| ylbtech-小程序-demo：小程序示例-page/component |
?以下將展示小程序官方組件能力，組件樣式僅供參考，開發者可根據自身需求自定義組件樣式，具體屬性參數詳見小程序開發文檔。
1、 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) 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 基礎內容返回頂部 |
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)
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、 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、
1、map a)?.js b)?.json c)?.wxml d)?.wxss e) 2、
1、canvas a)?.js b)?.json c)?.wxml d)?.wxss e) 2、
| 作者：ylbtech
出處：http://ylbtech.cnblogs.com/
本文版權歸作者和博客園共有，歡迎轉載，但未經作者同意必須保留此段聲明，且在文章頁面明顯位置給出原文連接，否則保留追究法律責任的權利。 |
轉載于:https://www.cnblogs.com/storebook/p/9517154.html
總結
以上是生活随笔為你收集整理的小程序-demo：小程序示例-page/component的全部內容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。
