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

?以下將展示小程序官方組件能力，組件樣式僅供參考，開發(fā)者可根據(jù)自身需求自定義組件樣式，具體屬性參數(shù)詳見小程序開發(fā)文檔。

1. page/component返回頂部

1、 a) .js Page({data: {list: [{id: 'view',name: '視圖容器',open: false,pages: ['view', 'scroll-view', 'swiper']}, {id: 'content',name: '基礎內(nèi)容',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">以下將展示小程序官方組件能力，組件樣式僅供參考，開發(fā)者可根據(jù)自身需求自定義組件樣式，具體屬性參數(shù)詳見小程序開發(fā)文檔。</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) 2、pages 3、resources -kind -pic 4、

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

1、view a) .js b)?.json c)?.wxml d)?.wxss e) 2、scroll-view a)?.js b)?.json c)?.wxml d)?.wxss e) 3、swiper a)?.js b)?.json c)?.wxml d)?.wxss e) 4、

3. ./pages/content 基礎內(nèi)容返回頂部

1、text a) .js b)?.json c)?.wxml d)?.wxss e) 2、icon a)?.js b)?.json c)?.wxml d)?.wxss e) 3、progress a)?.js b)?.json c)?.wxml d)?.wxss e)

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

1、button a) .js b)?.json c)?.wxml d)?.wxss e) 2、checkbox a)?.js b)?.json c)?.wxml d)?.wxss e) 3、form a)?.js b)?.json c)?.wxml d)?.wxss e) 4、input a)?.js b)?.json c)?.wxml d)?.wxss e) 5、label a)?.js b)?.json c)?.wxml d)?.wxss e) 6、picker 1、view a) .js b)?.json c)?.wxml d)?.wxss e) 7、radio a)?.js b)?.json c)?.wxml d)?.wxss e) 8、slider a)?.js b)?.json c)?.wxml d)?.wxss e) 9、switch a)?.js b)?.json c)?.wxml d)?.wxss e) 10、textarea a)?.js b)?.json c)?.wxml d)?.wxss e) 11、

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

1、navigator a)?.js b)?.json c)?.wxml d)?.wxss e) 2、

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

1、image a) .js b)?.json c)?.wxml d)?.wxss e) 2、audio a)?.js b)?.json c)?.wxml d)?.wxss e) 3、video a)?.js b)?.json c)?.wxml d)?.wxss e) 4、

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

1、map a)?.js b)?.json c)?.wxml d)?.wxss e) 2、

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

1、canvas a)?.js b)?.json c)?.wxml d)?.wxss e) 2、

9.返回頂部

10.返回頂部

11.返回頂部

作者：ylbtech 出處：http://ylbtech.cnblogs.com/ 本文版權歸作者和博客園共有，歡迎轉載，但未經(jīng)作者同意必須保留此段聲明，且在文章頁面明顯位置給出原文連接，否則保留追究法律責任的權利。

轉載于:https://www.cnblogs.com/storebook/p/9517154.html

總結

以上是生活随笔為你收集整理的小程序-demo：小程序示例-page/component的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。