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

以下将展示小程序官方组件能力，组件样式仅供参考，开发者可根据自身需求自定义组件样式，具体属性参数详见小程序开发文档。

1. page/component返回顶部
1、
a) .js
  1. Page({
  2.   data: {
  3.     list: [
  4.       {
  5.         id: 'view',
  6.         name: '视图容器',
  7.         open: false,
  8.         pages: ['view', 'scroll-view', 'swiper']
  9.       }, {
  10.         id: 'content',
  11.         name: '基础内容',
  12.         open: false,
  13.         pages: ['text', 'icon', 'progress']
  14.       }, {
  15.         id: 'form',
  16.         name: '表单组件',
  17.         open: false,
  18.         pages: ['button', 'checkbox', 'form', 'input', 'label', 'picker', 'radio', 'slider', 'switch', 'textarea']
  19.       }, {
  20.         id: 'nav',
  21.         name: '导航',
  22.         open: false,
  23.         pages: ['navigator']
  24.       }, {
  25.         id: 'media',
  26.         name: '媒体组件',
  27.         open: false,
  28.         pages: ['image', 'audio', 'video']
  29.       }, {
  30.         id: 'map',
  31.         name: '地图',
  32.         pages: ['map']
  33.       }, {
  34.         id: 'canvas',
  35.         name: '画布',
  36.         pages: ['canvas']
  37.       }
  38.     ]
  39.   },
  40.   kindToggle: function (e) {
  41.     var id = e.currentTarget.id, list = this.data.list;
  42.     for (var i = 0, len = list.length; i < len; ++i) {
  43.       if (list[i].id == id) {
  44.         list[i].open = !list[i].open
  45.       } else {
  46.         list[i].open = false
  47.       }
  48.     }
  49.     this.setData({
  50.       list: list
  51.     });
  52.   }
  53. })
b) .json
  1. {
  2.     "navigationBarTitleText": "小程序官方组件展示"
  3. }
c) .wxml
  1. <view class="index">
  2.   <view class="index-hd">
  3.     <image class="index-logo" src="resources/kind/logo.png"></image>
  4.     <view class="index-desc">以下将展示小程序官方组件能力，组件样式仅供参考，开发者可根据自身需求自定义组件样式，具体属性参数详见小程序开发文档。</view>
  5.   </view>
  6.   <view class="index-bd">
  7.     <view class="kind-list">
  8.       <block wx:for-items="{{list}}" wx:key="{{item.id}}">
  9.         <view class="kind-list-item">
  10.           <view id="{{item.id}}" class="kind-list-item-hd {{item.open ? 'kind-list-item-hd-show' : ''}}" bindtap="kindToggle">
  11.             <view class="kind-list-text">{{item.name}}</view>
  12.             <image class="kind-list-img" src="resources/kind/{{item.id}}.png"></image>
  13.           </view>
  14.           <view class="kind-list-item-bd {{item.open ? 'kind-list-item-bd-show' : ''}}">
  15.             <view class="navigator-box {{item.open ? 'navigator-box-show' : ''}}">
  16.               <block wx:for-items="{{item.pages}}" wx:for-item="page" wx:key="*item">
  17.                 <navigator url="pages/{{page}}/{{page}}" class="navigator">
  18.                   <view class="navigator-text">{{page}}</view>
  19.                   <view class="navigator-arrow"></view>
  20.                 </navigator>
  21.               </block>
  22.             </view>
  23.           </view>
  24.         </view>
  25.       </block>
  26.     </view>
  27.   </view>
  28. </view>
d) .wxss
  1. @import "../common/index.wxss";
e)
2、pages
3、resources
-kind
-pic
4、
2.  ./pages/view 试图容器返回顶部
1、view
a) .js
  1. Page({})
b) .json
  1. {
  2.     "navigationBarTitleText":"view"
  3. }
c) .wxml
  1. <import src="../../../common/head.wxml" />
  2. <import src="../../../common/foot.wxml" />
  3.  
  4. <view class="container">
  5.   <template is="head" data="{{title: 'view'}}"/>
  6.  
  7.   <view class="page-body">
  8.     <view class="page-section">
  9.       <view class="page-section-title">
  10.         <text>flex-direction: row\n横向布局</text>
  11.       </view>
  12.       <view class="page-section-spacing">
  13.         <view class="flex-wrp" style="flex-direction:row;">
  14.           <view class="flex-item demo-text-1"></view>
  15.           <view class="flex-item demo-text-2"></view>
  16.           <view class="flex-item demo-text-3"></view>
  17.         </view>
  18.       </view>
  19.     </view>
  20.     <view class="page-section">
  21.       <view class="page-section-title">
  22.         <text>flex-direction: column\n纵向布局</text>
  23.       </view>
  24.       <view class="flex-wrp" style="flex-direction:column;">
  25.         <view class="flex-item flex-item-V demo-text-1"></view>
  26.         <view class="flex-item flex-item-V demo-text-2"></view>
  27.         <view class="flex-item flex-item-V demo-text-3"></view>
  28.       </view>
  29.     </view>
  30.   </view>
  31.  
  32.   <template is="foot" />
  33. </view>
d) .wxss
  1. .flex-wrp{
  2.   margin-top: 60rpx;
  3.   display:flex;
  4. }
  5. .flex-item{
  6.   width: 200rpx;
  7.   height: 300rpx;
  8.   font-size: 26rpx;
  9. }
  10. .flex-item-V{
  11.   margin: 0 auto;
  12.   width: 300rpx;
  13.   height: 200rpx;
  14. }
e)
2、scroll-view
a) .js
  1. var order = ['demo1', 'demo2', 'demo3']
  2. Page({
  3.   data: {
  4.     toView: 'green'
  5.   },
  6.   upper: function(e) {
  7.     console.log(e)
  8.   },
  9.   lower: function(e) {
  10.     console.log(e)
  11.   },
  12.   scroll: function(e) {
  13.     console.log(e)
  14.   },
  15.   scrollToTop: function(e) {
  16.     this.setAction({
  17.       scrollTop: 0
  18.     })
  19.   },
  20.   tap: function(e) {
  21.     for (var i = 0; i < order.length; ++i) {
  22.       if (order[i] === this.data.toView) {
  23.         this.setData({
  24.           toView: order[i + 1],
  25.           scrollTop: (i + 1) * 200
  26.         })
  27.         break
  28.       }
  29.     }
  30.   },
  31.   tapMove: function(e) {
  32.     this.setData({
  33.       scrollTop: this.data.scrollTop + 10
  34.     })
  35.   }
  36. })
b) .json
  1. {
  2.     "navigationBarTitleText": "scroll-view"
  3. }
c) .wxml
  1. <import src="../../../common/head.wxml" />
  2. <import src="../../../common/foot.wxml" />
  3.  
  4. <view class="container">
  5.   <template is="head" data="{{title: 'scroll-view'}}"/>
  6.  
  7.   <view class="page-body">
  8.     <view class="page-section">
  9.       <view class="page-section-title">
  10.         <text>Vertical Scroll\n纵向滚动</text>
  11.       </view>
  12.       <view class="page-section-spacing">
  13.         <scroll-view scroll-y="true" style="height: 300rpx;" bindscrolltoupper="upper" bindscrolltolower="lower" bindscroll="scroll" scroll-into-view="{{toView}}" scroll-top="{{scrollTop}}">
  14.           <view id="demo1" class="scroll-view-item demo-text-1"></view>
  15.           <view id="demo2"  class="scroll-view-item demo-text-2"></view>
  16.           <view id="demo3" class="scroll-view-item demo-text-3"></view>
  17.         </scroll-view>
  18.       </view>
  19.     </view>
  20.     <view class="page-section">
  21.       <view class="page-section-title">
  22.         <text>Horizontal Scroll\n横向滚动</text>
  23.       </view>
  24.       <view class="page-section-spacing">
  25.         <scroll-view class="scroll-view_H" scroll-x="true" bindscroll="scroll" style="width: 100%">
  26.           <view id="demo1" class="scroll-view-item_H demo-text-1"></view>
  27.           <view id="demo2"  class="scroll-view-item_H demo-text-2"></view>
  28.           <view id="demo3" class="scroll-view-item_H demo-text-3"></view>
  29.         </scroll-view>
  30.       </view>
  31.     </view>
  32.   </view>
  33.  
  34.   <template is="foot" />
  35. </view>
d) .wxss
  1. .page-section-spacing{
  2.   margin-top: 60rpx;
  3. }
  4. .scroll-view_H{
  5.   white-space: nowrap;
  6. }
  7. .scroll-view-item{
  8.   height: 300rpx;
  9. }
  10. .scroll-view-item_H{
  11.   display: inline-block;
  12.   width: 100%;
  13.   height: 300rpx;
  14. }
e)
3、swiper
a) .js
  1. Page({
  2.   data: {
  3.     background: ['demo-text-1', 'demo-text-2', 'demo-text-3'],
  4.     indicatorDots: true,
  5.     vertical: false,
  6.     autoplay: false,
  7.     interval: 2000,
  8.     duration: 500
  9.   },
  10.   changeIndicatorDots: function (e) {
  11.     this.setData({
  12.       indicatorDots: !this.data.indicatorDots
  13.     })
  14.   },
  15.   changeAutoplay: function (e) {
  16.     this.setData({
  17.       autoplay: !this.data.autoplay
  18.     })
  19.   },
  20.   intervalChange: function (e) {
  21.     this.setData({
  22.       interval: e.detail.value
  23.     })
  24.   },
  25.   durationChange: function (e) {
  26.     this.setData({
  27.       duration: e.detail.value
  28.     })
  29.   }
  30. })
b) .json
  1. {
  2.     "navigationBarTitleText": "swiper"
  3. }
c) .wxml
  1. <import src="../../../common/head.wxml" />
  2. <import src="../../../common/foot.wxml" />
  3.  
  4. <view class="container">
  5.   <template is="head" data="{{title: 'swiper'}}"/>
  6.  
  7.   <view class="page-body">
  8.     <view class="page-section page-section-spacing swiper">
  9.       <swiper indicator-dots="{{indicatorDots}}"
  10.         autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}">
  11.         <block wx:for="{{background}}" wx:key="*this">
  12.           <swiper-item>
  13.             <view class="swiper-item {{item}}"></view>
  14.           </swiper-item>
  15.         </block>
  16.       </swiper>
  17.     </view>
  18.     <view class="page-section" style="margin-top: 40rpx;margin-bottom: 0;">
  19.       <view class="weui-cells weui-cells_after-title">
  20.         <view class="weui-cell weui-cell_switch">
  21.           <view class="weui-cell__bd">指示点</view>
  22.           <view class="weui-cell__ft">
  23.             <switch checked="{{indicatorDots}}" bindchange="changeIndicatorDots" />
  24.           </view>
  25.         </view>
  26.         <view class="weui-cell weui-cell_switch">
  27.           <view class="weui-cell__bd">自动播放</view>
  28.           <view class="weui-cell__ft">
  29.             <switch checked="{{autoplay}}" bindchange="changeAutoplay" />
  30.           </view>
  31.         </view>
  32.       </view>
  33.     </view>
  34.  
  35.     <view class="page-section page-section-spacing">
  36.       <view class="page-section-title">
  37.         <text>幻灯片切换时长(ms)</text>
  38.         <text class="info">{{duration}}</text>
  39.       </view>
  40.       <slider bindchange="durationChange" value="{{duration}}" min="500" max="2000"/>
  41.       <view class="page-section-title">
  42.         <text>自动播放间隔时长(ms)</text>
  43.         <text class="info">{{interval}}</text>
  44.       </view>
  45.       <slider bindchange="intervalChange" value="{{interval}}" min="2000" max="10000"/>
  46.     </view>
  47.   </view>
  48.  
  49.   <template is="foot" />
  50. </view>
d) .wxss
  1. @import "../../../common/lib/weui.wxss";
  2.  
  3. button{
  4.   margin-bottom: 30rpx;
  5. }
  6. button:last-child{
  7.   margin-bottom:;
  8. }
  9. .page-section-title{
  10.   padding:;
  11. }
  12. .swiper-item{
  13.   display: block;
  14.   height: 150px;
  15. }
  16. .page-section-title{
  17.   margin-top: 60rpx;
  18.   position: relative;
  19. }
  20. .info{
  21.   position: absolute;
  22.   right:;
  23.   color: #353535;
  24.   font-size: 30rpx;
  25. }
  26. .page-foot{
  27.   margin-top: 50rpx;
  28. }
e)
4、
3. ./pages/content 基础内容返回顶部
1、text
a) .js
  1. var texts = [
  2.   '2011年1月，微信1.0发布',
  3.   '同年5月，微信2.0语音对讲发布',
  4.   '10月，微信3.0新增摇一摇功能',
  5.   '2012年3月，微信用户突破1亿',
  6.   '4月份，微信4.0朋友圈发布',
  7.   '同年7月，微信4.2发布公众平台',
  8.   '2013年8月，微信5.0发布微信支付',
  9.   '2014年9月，企业号发布',
  10.   '同月，发布微信卡包',
  11.   '2015年1月，微信第一条朋友圈广告',
  12.   '2016年1月，企业微信发布',
  13.   '2017年1月，小程序发布',
  14.   '......'
  15. ];
  16.  
  17. Page({
  18.   data: {
  19.     text: '',
  20.     canAdd: true,
  21.     canRemove: false
  22.   },
  23.   extraLine: [],
  24.   add: function(e) {
  25.     var that = this;
  26.     this.extraLine.push(texts[this.extraLine.length % 12])
  27.     this.setData({
  28.       text: this.extraLine.join('\n'),
  29.       canAdd: this.extraLine.length < 12,
  30.       canRemove: this.extraLine.length > 0
  31.     })
  32.     setTimeout(function(){
  33.       that.setData({
  34.         scrollTop: 99999
  35.       });
  36.     }, 0)
  37.   },
  38.   remove: function(e) {
  39.     var that = this;
  40.     if (this.extraLine.length > 0) {
  41.       this.extraLine.pop()
  42.       this.setData({
  43.         text: this.extraLine.join('\n'),
  44.         canAdd: this.extraLine.length < 12,
  45.         canRemove: this.extraLine.length > 0,
  46.       })
  47.     }
  48.     setTimeout(function(){
  49.       that.setData({
  50.         scrollTop: 99999
  51.       });
  52.     }, 0)
  53.   }
  54. })
b) .json
  1. {
  2.     "navigationBarTitleText": "text"
  3. }
c) .wxml
  1. <import src="../../../common/head.wxml" />
  2. <import src="../../../common/foot.wxml" />
  3.  
  4. <view class="container">
  5.   <template is="head" data="{{title: 'text'}}"/>
  6.  
  7.   <view class="page-body">
  8.     <view class="page-section page-section-spacing">
  9.       <view class="text-box" scroll-y="true" scroll-top="{{scrollTop}}">
  10.         <text>{{text}}</text>
  11.       </view>
  12.       <button disabled="{{!canAdd}}" bindtap="add">add line</button>
  13.       <button disabled="{{!canRemove}}" bindtap="remove">remove line</button>
  14.     </view>
  15.   </view>
  16.  
  17.   <template is="foot" />
  18. </view>
d) .wxss
  1. button{
  2.   margin: 40rpx 0;
  3. }
  4. .text-box{
  5.   margin-bottom: 70rpx;
  6.   padding: 40rpx 0;
  7.   display: flex;
  8.   min-height: 300rpx;
  9.   background-color: #FFFFFF;
  10.   justify-content: center;
  11.   align-items: center;
  12.   text-align: center;
  13.   font-size: 30rpx;
  14.   color: #353535;
  15.   line-height: 2em;
  16. }
e)
2、icon
a) .js
  1. Page({})
b) .json
  1. {
  2.     "navigationBarTitleText": "icon"
  3. }
c) .wxml
  1. <import src="../../../common/head.wxml"/>
  2. <import src="../../../common/foot.wxml"/>
  3.  
  4. <view class="container">
  5.   <template is="head" data="{{title: 'icon'}}"/>
  6.  
  7.   <view class="icon-box">
  8.     <icon class="icon-box-img" type="success" size="93"></icon>
  9.     <view class="icon-box-ctn">
  10.       <view class="icon-box-title">成功</view>
  11.       <view class="icon-box-desc">用于表示操作顺利完成</view>
  12.     </view>
  13.   </view>
  14.   <view class="icon-box">
  15.     <icon class="icon-box-img" type="info" size="93"></icon>
  16.     <view class="icon-box-ctn">
  17.       <view class="icon-box-title">提示</view>
  18.       <view class="icon-box-desc">用于表示信息提示；也常用于缺乏条件的操作拦截，提示用户所需信息</view>
  19.     </view>
  20.   </view>
  21.   <view class="icon-box">
  22.     <icon class="icon-box-img" type="warn" size="93" color="#C9C9C9"></icon>
  23.     <view class="icon-box-ctn">
  24.       <view class="icon-box-title">普通警告</view>
  25.       <view class="icon-box-desc">用于表示操作后将引起一定后果的情况；也用于表示由于系统原因而造成的负向结果</view>
  26.     </view>
  27.   </view>
  28.   <view class="icon-box">
  29.     <icon class="icon-box-img" type="warn" size="93"></icon>
  30.     <view class="icon-box-ctn">
  31.       <view class="icon-box-title">强烈警告</view>
  32.       <view class="icon-box-desc">用于表示由于用户原因造成的负向结果；也用于表示操作后将引起不可严重的挽回的后果的情况</view>
  33.     </view>
  34.   </view>
  35.   <view class="icon-box">
  36.     <icon class="icon-box-img" type="waiting" size="93"></icon>
  37.     <view class="icon-box-ctn">
  38.       <view class="icon-box-title">等待</view>
  39.       <view class="icon-box-desc">用于表示等待，告知用户结果需等待</view>
  40.     </view>
  41.   </view>
  42.   <view class="icon-box">
  43.     <view class="icon-small-wrp">
  44.       <icon class="icon-small" type="success" size="23"></icon>
  45.     </view>
  46.     <view class="icon-box-ctn">
  47.       <view class="icon-box-title">多选控件图标_已选择</view>
  48.       <view class="icon-box-desc">用于多选控件中，表示已选择该项目</view>
  49.     </view>
  50.   </view>
  51.   <view class="icon-box">
  52.     <view class="icon-small-wrp">
  53.       <icon class="icon-small" type="circle" size="23"></icon>
  54.     </view>
  55.     <view class="icon-box-ctn">
  56.       <view class="icon-box-title">多选控件图标_未选择</view>
  57.       <view class="icon-box-desc">用于多选控件中，表示该项目可被选择，但还未选择</view>
  58.     </view>
  59.   </view>
  60.   <view class="icon-box">
  61.     <view class="icon-small-wrp">
  62.       <icon class="icon-small" type="warn" size="23"></icon>
  63.     </view>
  64.     <view class="icon-box-ctn">
  65.       <view class="icon-box-title">错误提示</view>
  66.       <view class="icon-box-desc">用于在表单中表示出现错误</view>
  67.     </view>
  68.   </view>
  69.   <view class="icon-box">
  70.     <view class="icon-small-wrp">
  71.       <icon class="icon-small" type="success_no_circle" size="23"></icon>
  72.     </view>
  73.     <view class="icon-box-ctn">
  74.       <view class="icon-box-title">单选控件图标_已选择</view>
  75.       <view class="icon-box-desc">用于单选控件中，表示已选择该项目</view>
  76.     </view>
  77.   </view>
  78.   <view class="icon-box">
  79.     <view class="icon-small-wrp">
  80.       <icon class="icon-small" type="download" size="23"></icon>
  81.     </view>
  82.     <view class="icon-box-ctn">
  83.       <view class="icon-box-title">下载</view>
  84.       <view class="icon-box-desc">用于表示可下载</view>
  85.     </view>
  86.   </view>
  87.   <view class="icon-box">
  88.     <view class="icon-small-wrp">
  89.       <icon class="icon-small" type="info_circle" size="23"></icon>
  90.     </view>
  91.     <view class="icon-box-ctn">
  92.       <view class="icon-box-title">提示</view>
  93.       <view class="icon-box-desc">用于在表单中表示有信息提示</view>
  94.     </view>
  95.   </view>
  96.   <view class="icon-box">
  97.     <view class="icon-small-wrp">
  98.       <icon class="icon-small" type="cancel" size="23"></icon>
  99.     </view>
  100.     <view class="icon-box-ctn">
  101.       <view class="icon-box-title">停止或关闭</view>
  102.       <view class="icon-box-desc">用于在表单中，表示关闭或停止</view>
  103.     </view>
  104.   </view>
  105.   <view class="icon-box">
  106.     <view class="icon-small-wrp">
  107.       <icon class="icon-small" type="search" size="14"></icon>
  108.     </view>
  109.     <view class="icon-box-ctn">
  110.       <view class="icon-box-title">搜索</view>
  111.       <view class="icon-box-desc">用于搜索控件中，表示可搜索</view>
  112.     </view>
  113.   </view>
  114.  
  115.   <template is="foot" />
  116. </view>
d) .wxss
  1. .icon-box{
  2.   margin-bottom: 40rpx;
  3.   padding: 0 75rpx;
  4.   display: flex;
  5.   align-items: center;
  6. }
  7. .icon-box-img{
  8.   margin-right: 46rpx;
  9. }
  10. .icon-box-ctn{
  11.   flex-shrink:;
  12. }
  13. .icon-box-title{
  14.   font-size: 34rpx;
  15. }
  16. .icon-box-desc{
  17.   margin-top: 12rpx;
  18.   font-size: 26rpx;
  19.   color: #888;
  20. }
  21.  
  22. .icon-small-wrp{
  23.   margin-right: 46rpx;
  24.   width: 93px;
  25.   height: 93px;
  26.   display: flex;
  27.   align-items: center;
  28.   justify-content: center;
  29. }
e)
3、progress
a) .js
  1. Page({})
b) .json
  1. {
  2.     "navigationBarTitleText": "progress"
  3. }
c) .wxml
  1. <import src="../../../common/head.wxml" />
  2. <import src="../../../common/foot.wxml" />
  3.  
  4. <view class="container">
  5.   <template is="head" data="{{title: 'progress'}}"/>
  6.  
  7.   <view class="page-body">
  8.     <view class="page-section page-section-gap">
  9.  
  10.       <view class="progress-box">
  11.         <progress percent="20" show-info stroke-width="3"/>
  12.       </view>
  13.  
  14.       <view class="progress-box">
  15.         <progress percent="40" active stroke-width="3" />
  16.         <icon class="progress-cancel" type="cancel"></icon>
  17.       </view>
  18.  
  19.       <view class="progress-box">
  20.         <progress percent="60" active stroke-width="3" />
  21.       </view>
  22.  
  23.       <view class="progress-box">
  24.         <progress percent="80" color="#10AEFF" active stroke-width="3" />
  25.       </view>
  26.     </view>
  27.   </view>
  28.  
  29.   <template is="foot" />
  30. </view>
d) .wxss
  1. progress{
  2.   width: 100%;
  3. }
  4. .progress-box{
  5.   display: flex;
  6.   height: 50rpx;
  7.   margin-bottom: 60rpx;
  8. }
  9. .progress-cancel{
  10.   margin-left: 40rpx;
  11. }
e)
4. ./pages/form 表单组件返回顶部
1、button
a) .js
  1. var types = ['default', 'primary', 'warn']
  2. var pageObject = {
  3.   data: {
  4.     defaultSize: 'default',
  5.     primarySize: 'default',
  6.     warnSize: 'default',
  7.     disabled: false,
  8.     plain: false,
  9.     loading: false
  10.   },
  11.   setDisabled: function(e) {
  12.     this.setData({
  13.       disabled: !this.data.disabled
  14.     })
  15.   },
  16.   setPlain: function(e) {
  17.     this.setData({
  18.       plain: !this.data.plain
  19.     })
  20.   },
  21.   setLoading: function(e) {
  22.     this.setData({
  23.       loading: !this.data.loading
  24.     })
  25.   }
  26. }
  27.  
  28. for (var i = 0; i < types.length; ++i) {
  29.   (function(type) {
  30.     pageObject[type] = function(e) {
  31.       var key = type + 'Size'
  32.       var changedData = {}
  33.       changedData[key] =
  34.         this.data[key] === 'default' ? 'mini' : 'default'
  35.       this.setData(changedData)
  36.     }
  37.   })(types[i])
  38. }
  39.  
  40. Page(pageObject)
b) .json
  1. {
  2.     "navigationBarTitleText": "button"
  3. }
c) .wxml
  1. <import src="../../../common/head.wxml" />
  2. <import src="../../../common/foot.wxml" />
  3.  
  4. <view class="container">
  5.   <template is="head" data="{{title: 'button'}}"/>
  6.  
  7.   <view class="page-body">
  8.     <view class="btn-area" id="buttonContainer">
  9.       <button type="primary">页面主操作 Normal</button>
  10.       <button type="primary" loading="true">页面主操作 Loading</button>
  11.       <button type="primary" disabled="true">页面主操作 Disabled</button>
  12.  
  13.       <button type="default">页面次要操作 Normal</button>
  14.       <button type="default" disabled="true">页面次要操作 Disabled</button>
  15.  
  16.       <button type="warn">警告类操作 Normal</button>
  17.       <button type="warn" disabled="true">警告类操作 Disabled</button>
  18.  
  19.       <view class="button-sp-area">
  20.         <button type="primary" plain="true">按钮</button>
  21.         <button type="primary" disabled="true" plain="true">不可点击的按钮</button>
  22.  
  23.         <button type="default" plain="true">按钮</button>
  24.         <button type="default" disabled="true" plain="true">按钮</button>
  25.  
  26.         <button class="mini-btn" type="primary" size="mini">按钮</button>
  27.         <button class="mini-btn" type="default" size="mini">按钮</button>
  28.         <button class="mini-btn" type="warn" size="mini">按钮</button>
  29.       </view>
  30.     </view>
  31.   </view>
  32.  
  33.   <template is="foot" />
  34. </view>
d) .wxss
  1. button{
  2.   margin-top: 30rpx;
  3.   margin-bottom: 30rpx;
  4. }
  5. .button-sp-area{
  6.   margin: 0 auto;
  7.   width: 60%;
  8. }
  9. .mini-btn{
  10.   margin-right: 10rpx;
  11. }
e)
2、checkbox
a) .js
  1. Page({
  2.   data: {
  3.     items: [
  4.       {value: 'USA', name: '美国'},
  5.       {value: 'CHN', name: '中国', checked: 'true'},
  6.       {value: 'BRA', name: '巴西'},
  7.       {value: 'JPN', name: '日本'},
  8.       {value: 'ENG', name: '英国'},
  9.       {value: 'FRA', name: '法国'}
  10.     ]
  11.   },
  12.   checkboxChange: function(e) {
  13.     console.log('checkbox发生change事件，携带value值为：', e.detail.value)
  14.  
  15.     var items = this.data.items, values = e.detail.value;
  16.     for (var i = 0, lenI = items.length; i < lenI; ++i) {
  17.       items[i].checked = false;
  18.  
  19.       for (var j = 0, lenJ = values.length; j < lenJ; ++j) {
  20.         if(items[i].value == values[j]){
  21.           items[i].checked = true;
  22.           break
  23.         }
  24.       }
  25.     }
  26.  
  27.     this.setData({
  28.       items: items
  29.     })
  30.   }
  31. })
b) .json
  1. {
  2.     "navigationBarTitleText": "checkbox"
  3. }
c) .wxml
  1. <import src="../../../common/head.wxml" />
  2. <import src="../../../common/foot.wxml" />
  3.  
  4. <view class="container">
  5.   <template is="head" data="{{title: 'checkbox'}}"/>
  6.  
  7.   <view class="page-body">
  8.     <view class="page-section page-section-gap">
  9.       <view class="page-section-title">默认样式</view>
  10.       <label class="checkbox">
  11.         <checkbox value="cb" checked="true"/>选中
  12.       </label>
  13.       <label class="checkbox">
  14.         <checkbox value="cb" />未选中
  15.       </label>
  16.     </view>
  17.  
  18.     <view class="page-section">
  19.       <view class="page-section-title">推荐展示样式</view>
  20.       <view class="weui-cells weui-cells_after-title">
  21.         <checkbox-group bindchange="checkboxChange">
  22.           <label class="weui-cell weui-check__label" wx:for="{{items}}" wx:key="{{item.value}}">
  23.             <view class="weui-cell__hd">
  24.               <checkbox value="{{item.value}}" checked="{{item.checked}}"/>
  25.             </view>
  26.             <view class="weui-cell__bd">{{item.name}}</view>
  27.           </label>
  28.         </checkbox-group>
  29.       </view>
  30.     </view>
  31.   </view>
  32.  
  33.   <template is="foot" />
  34. </view>
d) .wxss
  1. @import "../../../common/lib/weui.wxss";
  2.  
  3. .checkbox{
  4.   margin-right: 20rpx;
  5. }
e)
3、form
a) .js
  1. Page({
  2.   data: {
  3.     pickerHidden: true,
  4.     chosen: ''
  5.   },
  6.   pickerConfirm: function (e) {
  7.     this.setData({
  8.       pickerHidden: true
  9.     })
  10.     this.setData({
  11.       chosen: e.detail.value
  12.     })
  13.   },
  14.   pickerCancel: function (e) {
  15.     this.setData({
  16.       pickerHidden: true
  17.     })
  18.   },
  19.   pickerShow: function (e) {
  20.     this.setData({
  21.       pickerHidden: false
  22.     })
  23.   },
  24.   formSubmit: function (e) {
  25.     console.log('form发生了submit事件，携带数据为：', e.detail.value)
  26.   },
  27.   formReset: function (e) {
  28.     console.log('form发生了reset事件，携带数据为：', e.detail.value)
  29.     this.setData({
  30.       chosen: ''
  31.     })
  32.   }
  33. })
b) .json
  1. {
  2.     "navigationBarTitleText": "form"
  3. }
c) .wxml
  1. <import src="../../../common/head.wxml" />
  2. <import src="../../../common/foot.wxml" />
  3.  
  4. <view class="container">
  5.   <template is="head" data="{{title: 'form'}}"/>
  6.  
  7.   <view class="page-body">
  8.     <form catchsubmit="formSubmit" catchreset="formReset">
  9.       <view class="page-section page-section-gap">
  10.         <view class="page-section-title">switch</view>
  11.         <switch name="switch"/>
  12.       </view>
  13.  
  14.       <view class="page-section page-section-gap">
  15.         <view class="page-section-title">radio</view>
  16.         <radio-group name="radio">
  17.           <label><radio value="radio1"/>选项一</label>
  18.           <label><radio value="radio2"/>选项二</label>
  19.         </radio-group>
  20.       </view>
  21.  
  22.       <view class="page-section page-section-gap">
  23.         <view class="page-section-title">checkbox</view>
  24.         <checkbox-group name="checkbox">
  25.           <label><checkbox value="checkbox1"/>选项一</label>
  26.           <label><checkbox value="checkbox2"/>选项二</label>
  27.         </checkbox-group>
  28.       </view>
  29.  
  30.       <view class="page-section page-section-gap">
  31.         <view class="page-section-title">slider</view>
  32.         <slider value="50" name="slider" show-value ></slider>
  33.       </view>
  34.  
  35.       <view class="page-section">
  36.         <view class="page-section-title">input</view>
  37.         <view class="weui-cells weui-cells_after-title">
  38.           <view class="weui-cell weui-cell_input">
  39.             <view class="weui-cell__bd">
  40.               <input class="weui-input" name="input" placeholder="这是一个输入框" />
  41.             </view>
  42.           </view>
  43.         </view>
  44.       </view>
  45.  
  46.       <view class="btn-area">
  47.         <button type="primary" formType="submit">Submit</button>
  48.         <button formType="reset">Reset</button>
  49.       </view>
  50.     </form>
  51.   </view>
  52.  
  53.   <template is="foot" />
  54. </view>
d) .wxss
  1. @import "../../../common/lib/weui.wxss";
  2.  
  3. label {
  4.   display: inline-block;
  5.   min-width: 270rpx;
  6.   margin-right: 20rpx;
  7. }
  8. form{
  9.   width: 100%;
  10. }
  11. .picker-text {
  12.   margin-left: 20rpx;
  13.   position: relative;
  14. }
e)
4、input
a) .js
  1. Page({
  2.   data: {
  3.     focus: false,
  4.     inputValue: ''
  5.   },
  6.   bindKeyInput: function (e) {
  7.     this.setData({
  8.       inputValue: e.detail.value
  9.     })
  10.   },
  11.   bindReplaceInput: function (e) {
  12.     var value = e.detail.value
  13.     var pos = e.detail.cursor
  14.     var left
  15.     if (pos !== -1) {
  16.       // 光标在中间
  17.       left = e.detail.value.slice(0, pos)
  18.       // 计算光标的位置
  19.       pos = left.replace(/11/g, '2').length
  20.     }
  21.  
  22.     // 直接返回对象，可以对输入进行过滤处理，同时可以控制光标的位置
  23.     return {
  24.       value: value.replace(/11/g, '2'),
  25.       cursor: pos
  26.     }
  27.  
  28.     // 或者直接返回字符串,光标在最后边
  29.     // return value.replace(/11/g,'2'),
  30.   },
  31.   bindHideKeyboard: function (e) {
  32.     if (e.detail.value === '123') {
  33.       // 收起键盘
  34.       wx.hideKeyboard()
  35.     }
  36.   }
  37. })
b) .json
  1. {
  2.     "navigationBarTitleText": "input"
  3. }
c) .wxml
  1. <import src="../../../common/head.wxml" />
  2. <import src="../../../common/foot.wxml" />
  3.  
  4. <view class="container">
  5.   <template is="head" data="{{title: 'input'}}"/>
  6.  
  7.   <view class="page-body">
  8.     <view class="page-section">
  9.       <view class="weui-cells__title">可以自动聚焦的input</view>
  10.       <view class="weui-cells weui-cells_after-title">
  11.         <view class="weui-cell weui-cell_input">
  12.           <input class="weui-input" auto-focus placeholder="将会获取焦点"/>
  13.         </view>
  14.       </view>
  15.     </view>
  16.     <view class="page-section">
  17.       <view class="weui-cells__title">控制最大输入长度的input</view>
  18.       <view class="weui-cells weui-cells_after-title">
  19.         <view class="weui-cell weui-cell_input">
  20.           <input class="weui-input" maxlength="10" placeholder="最大输入长度为10" />
  21.         </view>
  22.       </view>
  23.     </view>
  24.     <view class="page-section">
  25.       <view class="weui-cells__title">实时获取输入值：{{inputValue}}</view>
  26.       <view class="weui-cells weui-cells_after-title">
  27.         <view class="weui-cell weui-cell_input">
  28.           <input class="weui-input"  maxlength="10" bindinput="bindKeyInput" placeholder="输入同步到view中"/>
  29.         </view>
  30.       </view>
  31.     </view>
  32.     <view class="page-section">
  33.       <view class="weui-cells__title">控制输入的input</view>
  34.       <view class="weui-cells weui-cells_after-title">
  35.         <view class="weui-cell weui-cell_input">
  36.           <input class="weui-input"  bindinput="bindReplaceInput" placeholder="连续的两个1会变成2" />
  37.         </view>
  38.       </view>
  39.     </view>
  40.     <view class="page-section">
  41.       <view class="weui-cells__title">控制键盘的input</view>
  42.       <view class="weui-cells weui-cells_after-title">
  43.         <view class="weui-cell weui-cell_input">
  44.           <input class="weui-input"  bindinput="bindHideKeyboard" placeholder="输入123自动收起键盘" />
  45.         </view>
  46.       </view>
  47.     </view>
  48.     <view class="page-section">
  49.       <view class="weui-cells__title">数字输入的input</view>
  50.       <view class="weui-cells weui-cells_after-title">
  51.         <view class="weui-cell weui-cell_input">
  52.           <input class="weui-input" type="number" placeholder="这是一个数字输入框" />
  53.         </view>
  54.       </view>
  55.     </view>
  56.     <view class="page-section">
  57.       <view class="weui-cells__title">密码输入的input</view>
  58.       <view class="weui-cells weui-cells_after-title">
  59.         <view class="weui-cell weui-cell_input">
  60.           <input class="weui-input" password type="text" placeholder="这是一个密码输入框" />
  61.         </view>
  62.       </view>
  63.     </view>
  64.     <view class="page-section">
  65.       <view class="weui-cells__title">带小数点的input</view>
  66.       <view class="weui-cells weui-cells_after-title">
  67.         <view class="weui-cell weui-cell_input">
  68.           <input class="weui-input" type="digit" placeholder="带小数点的数字键盘"/>
  69.         </view>
  70.       </view>
  71.     </view>
  72.     <view class="page-section">
  73.       <view class="weui-cells__title">身份证输入的input</view>
  74.       <view class="weui-cells weui-cells_after-title">
  75.         <view class="weui-cell weui-cell_input">
  76.           <input class="weui-input" type="idcard" placeholder="身份证输入键盘" />
  77.         </view>
  78.       </view>
  79.     </view>
  80.     <view class="page-section">
  81.       <view class="weui-cells__title">控制占位符颜色的input</view>
  82.       <view class="weui-cells weui-cells_after-title">
  83.         <view class="weui-cell weui-cell_input">
  84.           <input class="weui-input" placeholder-style="color:#F76260" placeholder="占位符字体是红色的" />
  85.         </view>
  86.       </view>
  87.     </view>
  88.   </view>
  89.  
  90.   <template is="foot" />
  91. </view>
d) .wxss
  1. @import "../../../common/lib/weui.wxss";
  2.  
  3. .page-section{
  4.   margin-bottom: 20rpx;
  5. }
e)
5、label
a) .js
  1. Page({
  2.   data: {
  3.     checkboxItems: [
  4.       {name: 'USA', value: '美国'},
  5.       {name: 'CHN', value: '中国', checked: 'true'}
  6.     ],
  7.     radioItems: [
  8.       {name: 'USA', value: '美国'},
  9.       {name: 'CHN', value: '中国', checked: 'true'}
  10.     ],
  11.     hidden: false
  12.   },
  13.   checkboxChange: function (e) {
  14.     var checked = e.detail.value
  15.     var changed = {}
  16.     for (var i = 0; i < this.data.checkboxItems.length; i++) {
  17.       if (checked.indexOf(this.data.checkboxItems[i].name) !== -1) {
  18.         changed['checkboxItems[' + i + '].checked'] = true
  19.       } else {
  20.         changed['checkboxItems[' + i + '].checked'] = false
  21.       }
  22.     }
  23.     this.setData(changed)
  24.   },
  25.   radioChange: function (e) {
  26.     var checked = e.detail.value
  27.     var changed = {}
  28.     for (var i = 0; i < this.data.radioItems.length; i ++) {
  29.       if (checked.indexOf(this.data.radioItems[i].name) !== -1) {
  30.         changed['radioItems[' + i + '].checked'] = true
  31.       } else {
  32.         changed['radioItems[' + i + '].checked'] = false
  33.       }
  34.     }
  35.     this.setData(changed)
  36.   },
  37.   tapEvent: function (e) {
  38.     console.log('按钮被点击')
  39.   }
  40. })
b) .json
  1. {
  2.     "navigationBarTitleText": "label"
  3. }
c) .wxml  ?点击该label下的文字默认选中第一个checkbox
  1. <import src="../../../common/head.wxml" />
  2. <import src="../../../common/foot.wxml" />
  3.  
  4. <view class="container">
  5.   <template is="head" data="{{title: 'label'}}"/>
  6.  
  7.   <view class="page-body">
  8.     <view class="page-section page-section-gap">
  9.       <view class="page-section-title">表单组件在label内</view>
  10.       <checkbox-group class="group" bindchange="checkboxChange">
  11.         <view class="label-1" wx:for="{{checkboxItems}}">
  12.           <label>
  13.             <checkbox value="{{item.name}}" checked="{{item.checked}}"></checkbox>
  14.             <text class="label-1-text">{{item.value}}</text>
  15.           </label>
  16.         </view>
  17.       </checkbox-group>
  18.     </view>
  19.  
  20.     <view class="page-section page-section-gap">
  21.       <view class="page-section-title">label用for标识表单组件</view>
  22.       <radio-group class="group" bindchange="radioChange">
  23.         <view class="label-2" wx:for="{{radioItems}}">
  24.           <radio id="{{item.name}}" value="{{item.name}}" checked="{{item.checked}}"></radio>
  25.           <label class="label-2-text" for="{{item.name}}"><text>{{item.name}}</text></label>
  26.         </view>
  27.       </radio-group>
  28.     </view>
  29.  
  30.     <view class="page-section page-section-gap">
  31.       <view class="page-section-title">label内有多个时选中第一个</view>
  32.       <label class="label-3">
  33.         <checkbox class="checkbox-3">选项一</checkbox>
  34.         <checkbox class="checkbox-3">选项二</checkbox>
  35.         <view class="label-3-text">点击该label下的文字默认选中第一个checkbox</view>
  36.       </label>
  37.     </view>
  38.   </view>
  39.  
  40.   <template is="foot" />
  41. </view>
d) .wxss
  1. .label-1, .label-2{
  2.   margin: 30rpx 0;
  3. }
  4. .label-3-text{
  5.   color: #576B95;
  6.   font-size: 28rpx;
  7. }
  8. .checkbox-3{
  9.   display: block;
  10.   margin: 30rpx 0;
  11. }
e)
6、picker
1、view
a) .js
  1. Page({
  2.   data: {
  3.     array: ['中国', '美国', '巴西', '日本'],
  4.     index: 0,
  5.     date: '2016-09-01',
  6.     time: '12:01'
  7.   },
  8.   bindPickerChange: function(e) {
  9.     console.log('picker发送选择改变，携带值为', e.detail.value)
  10.     this.setData({
  11.       index: e.detail.value
  12.     })
  13.   },
  14.   bindDateChange: function(e) {
  15.     this.setData({
  16.       date: e.detail.value
  17.     })
  18.   },
  19.   bindTimeChange: function(e) {
  20.     this.setData({
  21.       time: e.detail.value
  22.     })
  23.   }
  24. })
b) .json
  1. {
  2.     "navigationBarTitleText": "picker"
  3. }
c) .wxml
  1. <import src="../../../common/head.wxml" />
  2. <import src="../../../common/foot.wxml" />
  3.  
  4. <view class="container">
  5.   <template is="head" data="{{title: 'picker'}}"/>
  6.  
  7.   <view class="page-body">
  8.     <view class="page-section">
  9.       <view class="weui-cells__title">地区选择器</view>
  10.       <view class="weui-cells weui-cells_after-title">
  11.         <view class="weui-cell weui-cell_input">
  12.           <view class="weui-cell__hd">
  13.             <view class="weui-label">当前选择</view>
  14.           </view>
  15.           <view class="weui-cell__bd">
  16.             <picker bindchange="bindPickerChange" value="{{index}}" range="{{array}}">
  17.               <view class="weui-input">{{array[index]}}</view>
  18.             </picker>
  19.           </view>
  20.         </view>
  21.       </view>
  22.  
  23.       <view class="weui-cells__title">时间选择器</view>
  24.       <view class="weui-cells weui-cells_after-title">
  25.         <view class="weui-cell weui-cell_input">
  26.           <view class="weui-cell__hd">
  27.             <view class="weui-label">当前选择</view>
  28.           </view>
  29.           <view class="weui-cell__bd">
  30.             <picker mode="time" value="{{time}}" start="09:01" end="21:01" bindchange="bindTimeChange">
  31.               <view class="weui-input">{{time}}</view>
  32.             </picker>
  33.           </view>
  34.         </view>
  35.       </view>
  36.  
  37.       <view class="weui-cells__title">日期选择器</view>
  38.       <view class="weui-cells weui-cells_after-title">
  39.         <view class="weui-cell weui-cell_input">
  40.           <view class="weui-cell__hd">
  41.             <view class="weui-label">当前选择</view>
  42.           </view>
  43.           <view class="weui-cell__bd">
  44.             <picker mode="date" value="{{date}}" start="2015-09-01" end="2017-09-01" bindchange="bindDateChange">
  45.               <view class="weui-input">{{date}}</view>
  46.             </picker>
  47.           </view>
  48.         </view>
  49.       </view>
  50.     </view>
  51.   </view>
  52.  
  53.   <template is="foot" />
  54. </view>
d) .wxss
  1. @import "../../../common/lib/weui.wxss";
  2.  
  3. .picker{
  4.   padding: 19rpx 26rpx;
  5.   background-color: #FFFFFF;
  6. }
e)
7、radio
a) .js
  1. Page({
  2.   data: {
  3.     items: [
  4.       {value: 'USA', name: '美国'},
  5.       {value: 'CHN', name: '中国', checked: 'true'},
  6.       {value: 'BRA', name: '巴西'},
  7.       {value: 'JPN', name: '日本'},
  8.       {value: 'ENG', name: '英国'},
  9.       {value: 'FRA', name: '法国'},
  10.     ]
  11.   },
  12.   radioChange: function(e) {
  13.     console.log('radio发生change事件，携带value值为：', e.detail.value)
  14.  
  15.     var items = this.data.items;
  16.     for (var i = 0, len = items.length; i < len; ++i) {
  17.       items[i].checked = items[i].value == e.detail.value
  18.     }
  19.  
  20.     this.setData({
  21.       items: items
  22.     });
  23.   }
  24. })
b) .json
  1. {
  2.     "navigationBarTitleText": "radio"
  3. }
c) .wxml
  1. <import src="../../../common/head.wxml" />
  2. <import src="../../../common/foot.wxml" />
  3.  
  4. <view class="container">
  5.   <template is="head" data="{{title: 'radio'}}"/>
  6.  
  7.   <view class="page-body">
  8.     <view class="page-section page-section-gap">
  9.       <view class="page-section-title">默认样式</view>
  10.       <label class="radio">
  11.         <radio value="r1" checked="true"/>选中
  12.       </label>
  13.       <label class="radio">
  14.         <radio value="r2" />未选中
  15.       </label>
  16.     </view>
  17.  
  18.     <view class="page-section">
  19.       <view class="page-section-title">推荐展示样式</view>
  20.       <view class="weui-cells weui-cells_after-title">
  21.         <radio-group bindchange="radioChange">
  22.           <label class="weui-cell weui-check__label" wx:for="{{items}}" wx:key="{{item.value}}">
  23.  
  24.             <view class="weui-cell__hd">
  25.               <radio value="{{item.value}}" checked="true"/>
  26.             </view>
  27.             <view class="weui-cell__bd">{{item.name}}</view>
  28.           </label>
  29.         </radio-group>
  30.       </view>
  31.     </view>
  32.   </view>
  33.  
  34.   <template is="foot" />
  35. </view>
d) .wxss
  1. @import "../../../common/lib/weui.wxss";
  2.  
  3. .radio {
  4.   margin-right: 20rpx;
  5. }
e)
8、slider
a) .js
  1. var pageData = {}
  2. for (var i = 1; i < 5; ++i) {
  3.   (function (index) {
  4.     pageData['slider' + index + 'change'] = function(e) {
  5.       console.log('slider' + index + '发生change事件，携带值为', e.detail.value)
  6.     }
  7.   })(i)
  8. }
  9. Page(pageData)
b) .json
  1. {
  2.     "navigationBarTitleText": "slider"
  3. }
c) .wxml
  1. <import src="../../../common/head.wxml" />
  2. <import src="../../../common/foot.wxml" />
  3.  
  4. <view class="container">
  5.   <template is="head" data="{{title: 'slider'}}"/>
  6.  
  7.   <view class="page-body">
  8.     <view class="page-section page-section-gap">
  9.       <view class="page-section-title">设置step</view>
  10.       <view class="body-view">
  11.         <slider value="60" bindchange="slider2change" step="5"/>
  12.       </view>
  13.     </view>
  14.  
  15.     <view class="page-section page-section-gap">
  16.       <view class="page-section-title">显示当前value</view>
  17.       <view class="body-view">
  18.         <slider value="50" bindchange="slider3change" show-value/>
  19.       </view>
  20.     </view>
  21.  
  22.     <view class="page-section page-section-gap">
  23.       <view class="page-section-title">设置最小/最大值</view>
  24.       <view class="body-view">
  25.         <slider value="100" bindchange="slider4change" min="50" max="200" show-value/>
  26.       </view>
  27.     </view>
  28.   </view>
  29.  
  30.   <template is="foot" />
  31. </view>
d) .wxss
  1. @import "../../../common/lib/weui.wxss";
  2.  
  3. button{
  4.   margin-bottom: 30rpx;
  5. }
  6. button:last-child{
  7.   margin-bottom:;
  8. }
  9. .page-section-title{
  10.   padding:;
  11. }
  12. .swiper-item{
  13.   display: block;
  14.   height: 150px;
  15. }
  16. .page-section-title{
  17.   margin-top: 60rpx;
  18.   position: relative;
  19. }
  20. .info{
  21.   position: absolute;
  22.   right:;
  23.   color: #353535;
  24.   font-size: 30rpx;
  25. }
  26. .page-foot{
  27.   margin-top: 50rpx;
  28. }
e)
9、switch
a) .js
  1. Page({
  2.   switch1Change: function (e){
  3.     console.log('switch1 发生 change 事件，携带值为', e.detail.value)
  4.   },
  5.   switch2Change: function (e){
  6.     console.log('switch2 发生 change 事件，携带值为', e.detail.value)
  7.   }
  8. })
b) .json
  1. {
  2.     "navigationBarTitleText": "switch"
  3. }
c) .wxml
  1. <import src="../../../common/head.wxml" />
  2. <import src="../../../common/foot.wxml" />
  3.  
  4. <view class="container">
  5.   <template is="head" data="{{title: 'switch'}}"/>
  6.  
  7.   <view class="page-body">
  8.     <view class="page-section page-section-gap">
  9.       <view class="page-section-title">默认样式</view>
  10.       <view class="body-view">
  11.         <switch checked bindchange="switch1Change"/>
  12.         <switch bindchange="switch2Change"/>
  13.       </view>
  14.     </view>
  15.  
  16.     <view class="page-section">
  17.       <view class="page-section-title">推荐展示样式</view>
  18.       <view class="weui-cells weui-cells_after-title">
  19.         <view class="weui-cell weui-cell_switch">
  20.           <view class="weui-cell__bd">开启中</view>
  21.           <view class="weui-cell__ft">
  22.             <switch checked />
  23.           </view>
  24.         </view>
  25.         <view class="weui-cell weui-cell_switch">
  26.           <view class="weui-cell__bd">关闭</view>
  27.           <view class="weui-cell__ft">
  28.             <switch />
  29.           </view>
  30.         </view>
  31.       </view>
  32.     </view>
  33.   </view>
  34.  
  35.   <template is="foot" />
  36. </view>
d) .wxss
  1. @import "../../../common/lib/weui.wxss";
e)
10、textarea
a) .js
  1. Page({
  2.   data: {
  3.     focus: false
  4.   },
  5.   bindTextAreaBlur: function(e) {
  6.     console.log(e.detail.value)
  7.   }
  8. })
b) .json
  1. {
  2.     "navigationBarTitleText": "textarea"
  3. }
c) .wxml
  1. <import src="../../../common/head.wxml" />
  2. <import src="../../../common/foot.wxml" />
  3.  
  4. <view class="container">
  5.   <template is="head" data="{{title: 'textarea'}}"/>
  6.  
  7.   <view class="page-body">
  8.     <view class="page-section">
  9.       <view class="page-section-title">输入区域高度自适应，不会出现滚动条</view>
  10.       <view class="textarea-wrp">
  11.         <textarea bindblur="bindTextAreaBlur" auto-height />
  12.       </view>
  13.     </view>
  14.  
  15.     <view class="page-section">
  16.       <view class="page-section-title">这是一个可以自动聚焦的textarea</view>
  17.       <view class="textarea-wrp">
  18.         <textarea auto-focus="true" style="height: 3em" />
  19.       </view>
  20.     </view>
  21.   </view>
  22.  
  23.   <template is="foot" />
  24. </view>
d) .wxss
  1. textarea {
  2.     width: 700rpx;
  3.     padding: 25rpx 0;
  4. }
  5. .textarea-wrp {
  6.     padding: 0 25rpx;
  7.     background-color: #fff;
  8. }
e)
11、
5. ./pages/nav 导航返回顶部
0、
1、navigator
-navigate
a) .js
  1. Page({
  2.   onLoad: function(options) {
  3.     console.log(options)
  4.     this.setData({
  5.       title: options.title
  6.     })
  7.   }
  8. })
b) .json
  1. {
  2.     "navigationBarTitleText": "navigatePage"
  3. }
c) .wxml
  1. <import src="../../../common/head.wxml" />
  2. <import src="../../../common/foot.wxml" />
  3.  
  4. <view class="container">
  5.   <template is="head" data="{{title: '新建的页面'}}"/>
  6. </view>
d) .wxss
-navigator
a) .js
  1. Page({})
b) .json
  1. {
  2.     "navigationBarTitleText": "navigator"
  3. }
c) .wxml
  1. <import src="../../../common/head.wxml" />
  2. <import src="../../../common/foot.wxml" />
  3.  
  4. <view class="container">
  5.   <template is="head" data="{{title: 'navigator'}}"/>
  6.  
  7.   <view class="page-body">
  8.     <view class="btn-area">
  9.       <navigator url="navigate?title=navigate" hover-class="navigator-hover">
  10.         <button type="default">跳转到新页面</button>
  11.       </navigator>
  12.       <navigator url="redirect?title=redirect" redirect hover-class="other-navigator-hover">
  13.         <button type="default">在当前页打开</button>
  14.       </navigator>
  15.     </view>
  16.   </view>
  17.  
  18.   <template is="foot" />
  19. </view>
d) .wxss
  1. .navigator-hover button{
  2.   background-color: #DEDEDE;
  3. }
  4. .other-navigator-hover button{
  5.   background-color: #DEDEDE;
  6. }
-redirect
a) .js
  1. Page({
  2.   onLoad: function(options) {
  3.     console.log(options)
  4.     this.setData({
  5.       title: options.title
  6.     })
  7.   }
  8. })
b) .json
  1. {
  2.     "navigationBarTitleText": "redirectPage"
  3. }
c) .wxml
  1. <import src="../../../common/head.wxml" />
  2. <import src="../../../common/foot.wxml" />
  3.  
  4. <view class="container">
  5.   <template is="head" data="{{title: '当前页'}}"/>
  6. </view>
d) .wxss
e)
12、
 
6. ./pages/media 媒体组件返回顶部
1、image
a) .js
  1. Page({})
b) .json
  1. {
  2.     "navigationBarTitleText": "image"
  3. }
c) .wxml
  1. <import src="../../../common/head.wxml"/>
  2. <import src="../../../common/foot.wxml"/>
  3.  
  4. <view class="container">
  5.   <template is="head" data="{{title: 'image'}}"/>
  6.  
  7.   <view class="page-body">
  8.     <view class="page-section page-section-gap">
  9.       <view class="page-section-title">Local Image</view>
  10.       <view class="page-section-ctn">
  11.         <image class="image" src="../../resources/pic/1.jpg"/>
  12.       </view>
  13.     </view>
  14.     <view class="page-section page-section-gap">
  15.       <view class="page-section-title">Internet Image</view>
  16.       <view class="page-section-ctn">
  17.         <image class="image" src="../../resources/pic/2.jpg"/>
  18.       </view>
  19.     </view>
  20.   </view>
  21.  
  22.   <template is="foot"/>
  23. </view>
d) .wxss
  1. .page-section-ctn {
  2.   text-align: center;
  3. }
  4.  
  5. .image {
  6.   margin-top: 30rpx;
  7.   width: 580rpx;
  8.   height: 208rpx;
  9. }
e)
2、audio
a) .js
  1. Page({
  2.   data: {
  3.     current: {
  4.       poster: 'http://y.gtimg.cn/music/photo_new/T002R300x300M000003rsKF44GyaSk.jpg?max_age=2592000',
  5.       name: '此时此刻',
  6.       author: '许巍',
  7.       src: 'http://ws.stream.qqmusic.qq.com/M500001VfvsJ21xFqb.mp3?guid=ffffffff82def4af4b12b3cd9337d5e7&uin=346897220&vkey=6292F51E1E384E06DCBDC9AB7C49FD713D632D313AC4858BACB8DDD29067D3C601481D36E62053BF8DFEAF74C0A5CCFADD6471160CAF3E6A&fromtag=46',
  8.     },
  9.     audioAction: {
  10.       method: 'pause'
  11.     }
  12.   }
  13. })
b) .json
  1. {
  2.     "navigationBarTitleText": "audio"
  3. }
c) .wxml
  1. <import src="../../../common/head.wxml" />
  2. <import src="../../../common/foot.wxml" />
  3.  
  4. <view class="container">
  5.   <template is="head" data="{{title: 'audio'}}"/>
  6.  
  7.   <view class="page-body">
  8.     <view class="page-section page-section-gap" style="text-align: center;">
  9.       <audio style="text-align: left" src="{{current.src}}" poster="{{current.poster}}" name="{{current.name}}" author="{{current.author}}" action="{{audioAction}}" controls></audio>
  10.     </view>
  11.   </view>
  12.  
  13.   <template is="foot" />
  14. </view>
d) .wxss
e)
3、video
a) .js
  1. function getRandomColor () {
  2.   const rgb = []
  3.   for (let i = 0 ; i < 3; ++i){
  4.     let color = Math.floor(Math.random() * 256).toString(16)
  5.     color = color.length == 1 ? '0' + color : color
  6.     rgb.push(color)
  7.   }
  8.   return '#' + rgb.join('')
  9. }
  10.  
  11. Page({
  12.   onReady: function (res) {
  13.     this.videoContext = wx.createVideoContext('myVideo')
  14.   },
  15.   inputValue: '',
  16.     data: {
  17.     src: '',
  18.     danmuList:
  19.       [{
  20.         text: '第 1s 出现的弹幕',
  21.         color: '#ff0000',
  22.         time: 1
  23.       },
  24.       {
  25.         text: '第 3s 出现的弹幕',
  26.         color: '#ff00ff',
  27.         time: 3
  28.       }]
  29.     },
  30.   bindInputBlur: function(e) {
  31.     this.inputValue = e.detail.value
  32.   },
  33.   bindButtonTap: function() {
  34.     var that = this
  35.     wx.chooseVideo({
  36.         sourceType: ['album', 'camera'],
  37.         maxDuration: 60,
  38.         camera: ['front','back'],
  39.         success: function(res) {
  40.             that.setData({
  41.                 src: res.tempFilePath
  42.             })
  43.         }
  44.     })
  45.   },
  46.   bindSendDanmu: function () {
  47.     this.videoContext.sendDanmu({
  48.       text: this.inputValue,
  49.       color: getRandomColor()
  50.     })
  51.   },
  52.   videoErrorCallback: function(e) {
  53.     console.log('视频错误信息:')
  54.     console.log(e.detail.errMsg)
  55.   }
  56. })
b) .json
  1. {
  2.     "navigationBarTitleText": "video"
  3. }
c) .wxml
  1. <import src="../../../common/head.wxml" />
  2. <import src="../../../common/foot.wxml" />
  3.  
  4. <view class="container">
  5.   <template is="head" data="{{title: 'video'}}"/>
  6.  
  7.   <view class="page-body">
  8.     <view class="page-section tc">
  9.       <video id="myVideo" src="http://wxsnsdy.tc.qq.com/105/20210/snsdyvideodownload?filekey=30280201010421301f0201690402534804102ca905ce620b1241b726bc41dcff44e00204012882540400&bizid=1023&hy=SH&fileparam=302c020101042530230204136ffd93020457e3c4ff02024ef202031e8d7f02030f42400204045a320a0201000400" binderror="videoErrorCallback" danmu-list="{{danmuList}}" enable-danmu danmu-btn controls></video>
  10.  
  11.       <view class="weui-cells">
  12.         <view class="weui-cell weui-cell_input">
  13.           <view class="weui-cell__hd">
  14.             <view class="weui-label">弹幕内容</view>
  15.           </view>
  16.           <view class="weui-cell__bd">
  17.             <input bindblur="bindInputBlur" class="weui-input" type="text" placeholder="在此处输入弹幕内容" />
  18.           </view>
  19.         </view>
  20.       </view>
  21.       <view class="btn-area">
  22.         <button bindtap="bindSendDanmu" class="page-body-button" type="primary" formType="submit">发送弹幕</button>
  23.       </view>
  24.     </view>
  25.   </view>
  26.  
  27.   <template is="foot" />
  28. </view>
d) .wxss
  1. @import "../../../common/lib/weui.wxss";
  2.  
  3. .weui-cells{
  4.   margin-top: 80rpx;
  5.   text-align: left;
  6. }
  7. .weui-label{
  8.   width: 5em;
  9. }
e)
4、
7. ./pages/map 地图返回顶部
1、map
a) .js
  1. Page({
  2.   data: {
  3.     latitude: 23.099994,
  4.     longitude: 113.324520,
  5.     markers: [{
  6.       latitude: 23.099994,
  7.       longitude: 113.324520,
  8.       name: 'T.I.T 创意园'
  9.     }],
  10.     covers: [{
  11.       latitude: 23.099994,
  12.       longitude: 113.344520,
  13.       iconPath: '/image/location.png'
  14.     }, {
  15.       latitude: 23.099994,
  16.       longitude: 113.304520,
  17.       iconPath: '/image/location.png'
  18.     }]
  19.   }
  20. })
b) .json
  1. {
  2.     "navigationBarTitleText": "map"
  3. }
c) .wxml
  1. <import src="../../../common/head.wxml" />
  2. <import src="../../../common/foot.wxml" />
  3.  
  4. <view class="container">
  5.   <template is="head" data="{{title: 'map'}}"/>
  6.  
  7.   <view class="page-body">
  8.     <view class="page-section page-section-gap">
  9.       <map
  10.         style="width: 100%; height: 300px;"
  11.         latitude="{{latitude}}"
  12.         longitude="{{longitude}}"
  13.         markers="{{markers}}"
  14.         covers="{{covers}}"
  15.         >
  16.       </map>
  17.     </view>
  18.   </view>
  19.  
  20.   <template is="foot" />
  21. </view>
d) .wxss
e)
2、
8. ./pages/canvas 画布返回顶部
1、canvas
a) .js
  1. Page({
  2.   onReady: function () {
  3.     this.position = {
  4.       x: 150,
  5.       y: 150,
  6.       vx: 2,
  7.       vy: 2
  8.     }
  9.  
  10.     this.drawBall()
  11.     this.interval = setInterval(this.drawBall, 17)
  12.   },
  13.   drawBall: function () {
  14.     var p = this.position
  15.     p.x += p.vx
  16.     p.y += p.vy
  17.     if (p.x >= 300) {
  18.       p.vx = -2
  19.     }
  20.     if (p.x <= 7) {
  21.       p.vx = 2
  22.     }
  23.     if (p.y >= 300) {
  24.       p.vy = -2
  25.     }
  26.     if (p.y <= 7) {
  27.       p.vy = 2
  28.     }
  29.  
  30.     var context = wx.createContext()
  31.  
  32.     function ball(x, y) {
  33.       context.beginPath(0)
  34.       context.arc(x, y, 5, 0, Math.PI * 2)
  35.       context.setFillStyle('#1aad19')
  36.       context.setStrokeStyle('rgba(1,1,1,0)')
  37.       context.fill()
  38.       context.stroke()
  39.     }
  40.  
  41.     ball(p.x, 150)
  42.     ball(150, p.y)
  43.     ball(300 - p.x, 150)
  44.     ball(150, 300 - p.y)
  45.     ball(p.x, p.y)
  46.     ball(300 - p.x, 300 - p.y)
  47.     ball(p.x, 300 - p.y)
  48.     ball(300 - p.x, p.y)
  49.  
  50.     wx.drawCanvas({
  51.       canvasId: 'canvas',
  52.       actions: context.getActions()
  53.     })
  54.   },
  55.   onUnload: function () {
  56.     clearInterval(this.interval)
  57.   }
  58. })
b) .json
  1. {
  2.     "navigationBarTitleText": "canvas"
  3. }
c) .wxml
  1. <import src="../../../common/head.wxml" />
  2. <import src="../../../common/foot.wxml" />
  3.  
  4. <view class="container">
  5.   <template is="head" data="{{title: 'canvas'}}"/>
  6.  
  7.   <view class="page-body">
  8.     <view class="page-body-wrapper">
  9.       <canvas canvas-id="canvas" class="canvas"></canvas>
  10.     </view>
  11.   </view>
  12.  
  13.   <template is="foot" />
  14. </view>
d) .wxss
  1. .canvas {
  2.   width: 305px;
  3.   height: 305px;
  4.   background-color: #fff;
  5. }
e)
2、
9.返回顶部
 
10.返回顶部
0、
1、
 
11.返回顶部
 
作者：ylbtech
出处：http://ylbtech.cnblogs.com/
本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。

小程序-demo：小程序示例-page/component2的更多相关文章

  1. 近期热门微信小程序demo源码下载汇总

    近期微信小程序demo源码下载汇总,乃小程序学习分析必备素材!点击标题即可下载: 即速应用首发!原创!电商商场Demo 优质微信小程序推荐 -秀人美女图 图片下载.滑动翻页 微信小程序 - 新词 GE ...

  2. 小程序-demo：小程序示例-page/api

    ylbtech-小程序-demo:小程序示例-page/api 以下将演示小程序接口能力,具体属性参数详见小程序开发文档. 1. page/component返回顶部 1. a) .js Page({ ...

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

    ylbtech-小程序-demo:小程序示例-page/component 以下将展示小程序官方组件能力,组件样式仅供参考,开发者可根据自身需求自定义组件样式,具体属性参数详见小程序开发文档. 1. ...

  4. 小程序-demo：小程序示例-page/common

    ylbtech-小程序-demo:小程序示例-page/common 1.返回顶部 0.     1. 2. pages/common返回顶部 1. -lib --weui.wxss /*! * we ...

  5. 小程序-demo：小程序示例

    ylbtech-小程序-demo:小程序示例     1.返回顶部 0. 1.app.js const openIdUrl = require('./config').openIdUrl App({ ...

  6. 小程序-demo：知乎日报

    ylbtech-小程序-demo:知乎日报 1.返回顶部 0.         1.app.js //app.js App({ onLaunch: function () { //调用API从本地缓存 ...

  7. 小程序-demo：小熊の日记

    ylbtech-小程序-demo:小熊の日记 1.CHANGELOG.md # -- * 更新开发者工具至`v0.10.101100` * 修改`new`页的数据绑定方式 & 修改多行文本框输 ...

  8. 小程序-demo：天气预报

    ylbtech-小程序-demo:天气预报 1.返回顶部 1.app.js //app.js App({ //系统事件 onLaunch: function () {//小程序初始化事件 var th ...

  9. 番外篇！全球首个微信应用号开发教程！小程序 DEMO 视频奉上！

    大家好,我是博卡君.经过国庆节的七天假期,相信很多朋友都已经研究出自己的小程序 demo 了吧?我最近也利用休息时间关注了一下网上关于小程序开发的讨论,今天就利用这个番外篇谈谈自己对小程序的一些想法吧 ...

随机推荐

  1. Python基础教程笔记——第2章：列表和元组

    python shell 里重复上一次的命令:Alt+p 2.3 列表:Python的苦力 (1)list函数 (2)列表赋值,不蹦蹦为一个元素不存在的位置赋值 (3)删除元素,del name[1] ...

  2. HDU 3609 二分图多重匹配

    Escape Time Limit: 4000/2000 MS (Java/Others)    Memory Limit: 65536/65536 K (Java/Others)Total Subm ...

  3. 动态规划：HDU1087Super Jumping! Jumping! Jumping!（最大上升和）

    Problem Description Nowadays, a kind of chess game called “Super Jumping! Jumping! Jumping!” is very ...

  4. makefile的语法及写法(二)

     3 Makefile书写规则 -------------------------------------------------------------------------------- 规则包 ...

  5. 转 从头到尾彻底解析Hash表算法

    出处:http://blog.csdn.net/v_JULY_v.   说明:本文分为三部分内容,     第一部分为一道百度面试题Top K算法的详解:第二部分为关于Hash表算法的详细阐述:第三部 ...

  6. IOS开发 AFN和ASI

    做项目有一段时间了,项目过程中处理网络请求难免的,而对于选择第三方来处理网络请求肯定是个明智的选择! AFNetworking和ASIHTTPRequest   这两个第三方该如何选择       我 ...

  7. kvm虚拟化学习笔记(一)之kvm虚拟化环境安装

    平时一直玩RHEL/CentOS/OEL系列的操作,玩虚拟化也是采这一类系统,kvm在RHEL6系列操作系统支持比较好,本文采用采用OEL6.3操作系统,网上所有文章都说KVM比xen简单,我怎么感觉 ...

  8. 【转】AOP

    原文:http://blog.csdn.net/zhoudaxia/article/details/38502347 .---------------------------------------- ...

  9. JAVA_如何复制项目

    如何复制一个项目:复制这个项目,直接粘贴为一个新项目   注意复制完了之后一定要改一下Web Context-root   然后重新部署(注意Servers的Tomcat会变成当前项目,还要注意他的L ...

  10. Tomcat-公布WEB应用

    1.定义Context 进入管理WEB应用的URL是http://localhost:8080/manager/html. username与password的设置:打开tomcat安装文件夹中的co ...