小程序-demo：小程序示例-page/component

ylbtech-小程序-demo：小程序示例-page/component

 如下將展現小程序官方組件能力，組件樣式僅供參考，開發者可根據自身需求自定義組件樣式，具體屬性參數詳見小程序開發文檔。

1. page/component返回頂部

一、

a) .js

Page({
  data: {
    list: [
      {
        id: 'view',
        name: '視圖容器',
        open: false,
        pages: ['view', 'scroll-view', 'swiper']
      }, {
        id: 'content',
        name: '基礎內容',
        open: false,
        pages: ['text', 'icon', 'progress']
      }, {
        id: 'form',
        name: '表單組件',
        open: false,
        pages: ['button', 'checkbox', 'form', 'input', 'label', 'picker', 'radio', 'slider', 'switch', 'textarea']
      }, {
        id: 'nav',
        name: '導航',
        open: false,
        pages: ['navigator']
      }, {
        id: 'media',
        name: '媒體組件',
        open: false,
        pages: ['image', 'audio', 'video']
      }, {
        id: 'map',
        name: '地圖',
        pages: ['map']
      }, {
        id: 'canvas',
        name: '畫布',
        pages: ['canvas']
      }
    ]
  },
  kindToggle: function (e) {
    var id = e.currentTarget.id, list = this.data.list;
    for (var i = 0, len = list.length; i < len; ++i) {
      if (list[i].id == id) {
        list[i].open = !list[i].open
      } else {
        list[i].open = false
      }
    }
    this.setData({
      list: list
    });
  }
})

b) .json

{
    "navigationBarTitleText": "小程序官方組件展現"
}

c) .wxml

<view class="index">
  <view class="index-hd">
    <image class="index-logo" src="resources/kind/logo.png"></image>
    <view class="index-desc">如下將展現小程序官方組件能力，組件樣式僅供參考，開發者可根據自身需求自定義組件樣式，具體屬性參數詳見小程序開發文檔。</view>
  </view>
  <view class="index-bd">
    <view class="kind-list">
      <block wx:for-items="{{list}}" wx:key="{{item.id}}">
        <view class="kind-list-item">
          <view id="{{item.id}}" class="kind-list-item-hd {{item.open ? 'kind-list-item-hd-show' : ''}}" bindtap="kindToggle">
            <view class="kind-list-text">{{item.name}}</view>
            <image class="kind-list-img" src="resources/kind/{{item.id}}.png"></image>
          </view>
          <view class="kind-list-item-bd {{item.open ? 'kind-list-item-bd-show' : ''}}">
            <view class="navigator-box {{item.open ? 'navigator-box-show' : ''}}">
              <block wx:for-items="{{item.pages}}" wx:for-item="page" wx:key="*item">
                <navigator url="pages/{{page}}/{{page}}" class="navigator">
                  <view class="navigator-text">{{page}}</view>
                  <view class="navigator-arrow"></view>
                </navigator>
              </block>
            </view>
          </view>
        </view>
      </block>
    </view>
  </view>
</view>

d) .wxss

@import "../common/index.wxss";

e)

二、pages

三、resources

-kind

-pic

四、

2.  ./pages/view 試圖容器返回頂部

一、view

a) .js

b) .json

c) .wxml

d) .wxss

e)

二、scroll-view

a) .js

b) .json

c) .wxml

d) .wxss

e)

三、swiper

a) .js

b) .json

c) .wxml

d) .wxss

e)

四、

3. ./pages/content 基礎內容返回頂部

一、text

a) .js

b) .json

c) .wxml

d) .wxss

e)

二、icon

a) .js

b) .json

c) .wxml

d) .wxss

e)

三、progress

a) .js

b) .json

c) .wxml

d) .wxss

e)

4. ./pages/form 表單組件返回頂部

一、button

a) .js

b) .json

c) .wxml

d) .wxss

e)

二、checkbox

a) .js

b) .json

c) .wxml

d) .wxss

e)

三、form

a) .js

b) .json

c) .wxml

d) .wxss

e)

四、input

a) .js

b) .json

c) .wxml

d) .wxss

e)

五、label

a) .js

b) .json

c) .wxml

d) .wxss

e)

六、picker

一、view

a) .js

b) .json

c) .wxml

d) .wxss

e)

七、radio

a) .js

b) .json

c) .wxml

d) .wxss

e)

八、slider

a) .js

b) .json

c) .wxml

d) .wxss

e)

九、switch

a) .js

b) .json

c) .wxml

d) .wxss

e)

十、textarea

a) .js

b) .json

c) .wxml

d) .wxss

e)

十一、

5. ./pages/nav 導航返回頂部

一、navigator

a) .js

b) .json

c) .wxml

d) .wxss

e)

二、

 

6. ./pages/media 媒體組件返回頂部

一、image

a) .js

b) .json

c) .wxml

d) .wxss

e)

二、audio

a) .js

b) .json

c) .wxml

d) .wxss

e)

三、video

a) .js

b) .json

c) .wxml

d) .wxss

e)

四、

7. ./pages/map 地圖返回頂部

一、map

a) .js

b) .json

c) .wxml

d) .wxss

e)

二、

8. ./pages/canvas 畫布返回頂部

一、canvas

a) .js

b) .json

c) .wxml

d) .wxss

e)

二、

9.返回頂部

 

10.返回頂部

 

 

11.返回頂部

 

做者：ylbtech 出處：http://ylbtech.cnblogs.com/ 本文版權歸做者和博客園共有，歡迎轉載，但未經做者贊成必須保留此段聲明，且在文章頁面明顯位置給出原文鏈接，不然保留追究法律責任的權利。