微信小程序中常见组件的使用

微信小程序中常见组件的使用

官方文档: https://developers.weixin.qq.com/miniprogram/dev/component/

微信小程序中组件的概念和Vue中是一致的（好像现在各大主流框架中组件的概念都是互通的）

注意：所有组件名和属性都是小写，多个单词会以英文横杠 - 进行连接。对于一些容器组件，其内容可以声明在其开始标签和结束标签之间。

下面表格列举了所有组件都拥有属性，主要涉及样式和事件绑定：

• 微信小程序中组件的分类：

  • 视图容器

  • 基础内容

  • 表单组件

  • 导航组件

  • 媒体组件

  • 地图组件

  • 画布组件

  • 开放能力

  • 无障碍访问

  • 导航栏

  • 页面属性配置节点

视图组件

view

用户基础的展示

视图组件最开始就接触了

<view></view>

View组件属性说明：

示例

index.wxtml：

<view class="container" 
hover-start-time="1500" 
hover-stay-time="1000" 
hover-class="green">
  父组件
  <view class="red size" 
  hover-class="green" 
  hover-start-time="1500" 
  hover-stay-time="1000" 
  hover-stop-propagation="{{false}}">
    View组件
  </view>
</view>

注意：false和true需要使用{{}}包起来，否则无论设置成false还是true，最终都是true（字符串是真）

index.wxss：

/* 父组件样式 */
.container{
  background-color: grey;
}
/* 初始化样式 */
.red{
  background-color: hotpink;
  color: red;
}
.size{
  font-size: 38px;
}

/* 点击样式 */
.green{
  color: green;
}

默认展示红色，点击1秒钟后显示为绿色并持续3秒，

scroll-view

用户制作滚动

<scroll-view></scroll-view>

注意事项：

1. scroller-view内部子组件的高度或宽度要小于scroller-view组件，这样才能出现滚动条效果

scroll-view组件常用属性：

示例

index.wxml：

<view class="container">
    <view class="page-section">
        <view class="page-section-title">
            <text>Vertical Scroll\n纵向滚动</text>
        </view>
        <view class="page-section-spacing">
            <scroll-view class="scroll-container" 
                         scroll-y="{{true}}" 
                         bindscrolltoupper="scrolltoupper" 
                         bindscrolltolower="scrolltolower" >
                <view id="demo1" class="scroll-view-item demo-text-1">A</view>
                <view id="demo2" class="scroll-view-item demo-text-2">B</view>
                <view id="demo3" class="scroll-view-item demo-text-3">C</view>
            </scroll-view>
        </view>
    </view>
</view>

index.wxss：

.scroll-view-item{
  width: 100%;
  height: 100px;
  text-align: center;
  line-height: 100px;
  font-size: 26px;
  font-weight: bold;
} 
.demo-text-1{
  background-color: green;
}
.demo-text-2{
  background-color: red;
}
.demo-text-3{
  background-color: blue;
}
.scroll-container{
  height: 200px;
  border: 1px solid yellow;
  white-space: nowrap;
}

index.js：

Page({
  data: {

  },
  scrolltoupper:function(){
        console.log("滚动到顶部");
    },
    scrolltolower:function(){
        console.log("滚动到底部");
    }
})

swiper

用户制作轮播图

<swiper></<swiper>

注意：滑块视图容器。其中只可放置swiper-item组件，否则会导致未定义的行为，我们可以使用swiper实现轮播图效果

滑块组件属性介绍：

index.wxml:

<view class="container">
  <view class="page-body">
    <view class="page-section page-section-spacing swiper">
      <swiper indicator-dots="{{indicatorDots}}"
        autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}">
        <block wx:for="{{imgUrls}}" wx:key="*this">
          <swiper-item>
            <image  src="{{item}}" class="swiper-item"></image>
          </swiper-item>
        </block>
      </swiper>
    </view>
    <view class="page-section" style="margin-top: 40rpx;margin-bottom: 0;">
      <view class="weui-cells weui-cells_after-title">
        <view class="weui-cell weui-cell_switch">
          <view class="weui-cell__bd">指示点</view>
          <view class="weui-cell__ft">
            <switch checked="{{indicatorDots}}" bindchange="changeIndicatorDots" />
          </view>
        </view>
        <view class="weui-cell weui-cell_switch">
          <view class="weui-cell__bd">自动播放</view>
          <view class="weui-cell__ft">
            <switch checked="{{autoplay}}" bindchange="changeAutoplay" />
          </view>
        </view>
      </view>
    </view>

    <view class="page-section page-section-spacing">
      <view class="page-section-title">
        <text>幻灯片切换时长{{duration}}(ms)</text>
      </view>
      <slider bindchange="durationChange" value="{{duration}}" min="500" max="2000"/>
      <view class="page-section-title">
        <text>自动播放间隔时长{{interval}}(ms)</text>
      </view>
      <slider bindchange="intervalChange" value="{{interval}}" min="2000" max="10000"/>
    </view>
  </view>
</view>

index.wxsss：

page {
  background-color: #F8F8F8;
  height: 100%;
  font-size: 32rpx;
  line-height: 1.6;
}

.page-body {
  padding-top: 60rpx;
}

.page-section {
  width: 100%;
  margin-bottom: 60rpx;
}

.page-section_center {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.page-section:last-child {
  margin-bottom: 0;
}

.page-section-gap {
  box-sizing: border-box;
  padding: 0 30rpx;
}

.page-section-spacing {
  box-sizing: border-box;
  padding: 0 80rpx;
}

.page-section-title {
  font-size: 28rpx;
  color: #999999;
  margin-bottom: 10rpx;
  padding-left: 30rpx;
  padding-right: 30rpx;
}

.page-section-gap .page-section-title {
  padding-left: 0;
  padding-right: 0;
}

button {
  margin-bottom: 30rpx;
}

button:last-child {
  margin-bottom: 0;
}

.page-section-title {
  padding: 0;
}

.swiper-item {
  display: block;
  height: 150px;
}

.page-section-title {
  margin-top: 60rpx;
  position: relative;
}

.weui-cells {
  position: relative;
  margin-top: 1.17647059em;
  background-color: #FFFFFF;
  line-height: 1.41176471;
  font-size: 17px;
}

.weui-cells_after-title {
  margin-top: 0;
}

.weui-cell {
  padding: 10px 15px;
  position: relative;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  align-items: center;
}

.weui-cell_switch {
  padding-top: 6px;
  padding-bottom: 6px;
}

.weui-cell__bd {
  flex: 1;
}

.weui-cell__ft {
  text-align: right;
  color: #999999;
}

index.js：

Page({
  data: {
      imgUrls: ['./images/1.jpg', './images/2.jpg', './images/3.jpg'],
      indicatorDots: true,
      vertical: false,
      autoplay: false,
      circular: false,
      interval: 2000,
      duration: 500,
      previousMargin: 0,
      nextMargin: 0
    },
    changeProperty: function (e) {
      var propertyName = e.currentTarget.dataset.propertyName
      var newData = {}
      newData[propertyName] = e.detail.value
      this.setData(newData)
    },
    changeIndicatorDots: function (e) {
      this.setData({
        indicatorDots: !this.data.indicatorDots
      })
    },
    changeAutoplay: function (e) {
      this.setData({
        autoplay: !this.data.autoplay
      })
    },
    intervalChange: function (e) {
      this.setData({
        interval: e.detail.value
      })
    },
    durationChange: function (e) {
      this.setData({
        duration: e.detail.value
      })
    }
  })

movable-area

用户设置组件拖动的方式

movable-area组件属性说明：

注意事项：

1. movable-area 必须设置 width 和height属性，不设置默认为10px
2. 当 movable-view 小于 movable-area 时，movable-view的移动范围是在 movable-area 内
3. 当 movable-view 大于 movable-area 时，movable-view的移动范围必须包含movable-area（x轴方向和 y 轴方向分开考虑）
4. movable-view必须在 movable-area 组件中，并且必须是直接子节点，否则不能移动
5. movable-view 必须设置 width 和height属性，不设置默认为10px
6. movable-view 默认为绝对定位，top和 left 属性为0px

movable-view组件属性说明：

index.wxml:

<movable-area class="container1">
  <movable-view class="size" direction="all">A</movable-view>
</movable-area>

index.wxss:

.container1{
    width: 100%;
    height: 500px;
    background-color: grey;
}

.size{
    width:100px;
    height: 100px;
    background-color: lawngreen;
    text-align: center;
    font-size: 26px;
    line-height: 100px;
}

基础组件

icon

<icon></<icon>

属性说明:

<icon type="success" size="60" color="blue"></icon>

text

文本组件，用于显示文本

 <text></text>

注意事项：

1. 该组件支持转义符
2. text标签不可以嵌套别的组件，但是可以嵌套自己
3. 如果需要长按选中文本的话，必须使用text标签包裹

属性说明:

<text decode="{{true}}">
     你好,        世界 &gt； &lt; &nbsp;   
</text>

rich-text

富文本组件

<rich-text></rich-text>

注意事项：

1. nodes 不推荐使用 String 类型，性能会有所下降。
2. rich-text 组件内屏蔽所有节点的事件。
3. attrs 属性不支持 id ，支持 class 。
4. name 属性大小写不敏感。
5. 如果使用了不受信任的 HTML 节点，该节点及其所有子节点将会被移除。
6. img 标签仅支持网络图片。
7. 如果在自定义组件中使用 rich-text 组件，那么仅自定义组件的 wxss 样式对 rich-text 中的 class 生效。

rich-text组件属性说明:

元素节点：type = node

文本节点：type = text

示例：

<view class="container">
  <rich-text nodes="{{htmlSnip}}"></rich-text>
  <hr/>
  <rich-text nodes="{{arraySnip}}"></rich-text>
</view>

const htmlSnip =`<div class="div_class">
                    <h1>Title</h1>
                    <p class="p">
                    Life is&nbsp;<i>like</i>&nbsp;a box of
                    <b>&nbsp;chocolates</b>.
                    </p>
                </div>`;
Page({

    /**
     * 页面的初始数据
     */
    data: {
        htmlSnip:htmlSnip,
        arraySnip:[{
            name: 'div',
            attrs: {
              class: 'div_class',
              style: 'line-height: 60px; color: #1AAD19;'
            },
            children: [{
              type: 'text',
              text: 'You never know what you\'re gonna get.'
            }]
          }]
    }
})

progress

进程组件

<progress></progress>

属性说明:

示例

<text>20%</text>
<view class="progress-box">
  <progress percent="20" show-info stroke-width="3"/>
</view>

<text>40%</text>

<view class="progress-box">
  <progress percent="40" active stroke-width="3" />
</view>

<text>60%</text>

<view class="progress-box">
  <progress percent="60" active stroke-width="3" />
</view>

<text>80%</text>

<view class="progress-box">
  <progress percent="80" color="#10AEFF" active stroke-width="3" />
</view>

表单组件

button

按钮组件

<button size="mini" type="primary" 	loading="true">按钮</button>
<button size="mini"  type="warn" disabled="true" >按钮2</button>
<button size="mini" plain="true" type="warn" >按钮3</button>

注意事项：

1. button-hover 默认为{background-color: rgba(0, 0, 0, 0.1); opacity: 0.7;}
2. bindgetphonenumber 从1.2.0 开始支持，但是在1.5.3以下版本中无法使用wx.canIUse进行检测，建议使用基础库版本进行判断。
3. 在bindgetphonenumber 等返回加密信息的回调中调用 wx.login 登录，可能会刷新登录态。此时服务器使用 code 换取的 sessionKey 不是加密时使用的 sessionKey，导致解密失败。建议开发者提前进行 login；或者在回调中先使用 checkSession 进行登录态检查，避免 login 刷新登录态。
4. 从 2.21.2 起，对getPhoneNumber接口进行了安全升级，bindgetphonenumber 返回的信息中增加code参数，code是一个动态的令牌，开发者拿到code后需调用微信后台接口换取手机号。详情新版接口使用指南
5. 从 2.1.0 起，button 可作为原生组件的子节点嵌入，以便在原生组件上使用 open-type 的能力。
6. 目前设置了 form-type 的 button 只会对当前组件中的 form 有效。因而，将 button 封装在自定义组件中，而 form 在自定义组件外，将会使这个 button 的 form-type 失效

属性说明:

checkbox、checkbox-group

   <checkbox-group bindchange="chooseLove">
        <checkbox value="read" checked="true"/>
    </checkbox-group>

注意事项：同一组的checkbox需要用一个checkbox-group包裹

checkbox-group属性说明 :

checkbox属性说明:

<view>
   爱好: 
   <checkbox-group bindchange="chooseLove">
        <checkbox value="read" checked="true"/> 阅读
        <checkbox value="sport"/> 运动
        <checkbox value="music" /> 音乐 
    </checkbox-group>
</view>
<view>
    <text>循环生成checkbox</text>
   <checkbox-group>
        <view  wx:for="{{provinces}}" wx:key="*this">
            <checkbox value="{{item.py}}" />{{item.text}}
        </view>
    </checkbox-group>
</view>

Page({
    data:{
         provinces:[
               {py:'hunan',text:'湖南'},
               {py:'guangdong',text:'广东'},
               {py:'shanghai',text:'上海'},
               {py:'hubei',text:'湖北'},
              ]
    },
    chooseLove:function(e){
            //通过事件对象的detail.value获取选中的checkbox的value
            console.log(e.detail.value)
     }
})

label

我们可以使用label包裹文本,与对应的表单组件进行管理, 从而当我们点击文本的时候,也可以操作对应绑定的组件, label使用for管理对应组件的id，目前可以绑定的控件有：button, checkbox, radio, switch, input

属性说明:

​ 我们上面的checkbox案例,当我们点击文本的时候,不会对我们的checkbox框进行操作, 这样不是很友好,那我们可以把文本使用label包裹, 并使用for关联对应的checkbox,这样我们就可以实现上面的效果了.

<view>
    <text>循环生成checkbox</text>
   <checkbox-group>
        <view  wx:for="{{provinces}}" wx:key="*this">
            <checkbox value="{{item.py}}" id="{{item.py}}" /> 
            <label for="{{item.py}}">{{item.text}}</label>
        </view>
    </checkbox-group>
</view>

Page({
  data:{
    provinces:[
      {py:'hunan',text:'湖南'},
      {py:'guangdong',text:'广东'},
      {py:'shanghai',text:'上海'},
      {py:'hubei',text:'湖北'},
     ]
  },
  chooseLove:function(e){
          //通过事件对象的detail.value获取选中的checkbox的value
          console.log(e.detail.value)
   }
})

form

表单。将组件内的用户输入的switch input checkbox slider radio picker 提交。

当点击 form 表单中 form-type 为 submit 的 button 组件时，会将表单组件中的 value 值进行提交，需要在表单组件中加上 name 来作为 key。

<form></form>

表单组件属性说明

<form bindsubmit="submitForm">
    <view>
    爱好: 
    <checkbox-group bindchange="chooseLove" name="love">
            <checkbox value="read" checked="true"/> 阅读
            <checkbox value="sport"/> 运动
            <checkbox value="music" /> 音乐 
        </checkbox-group>
    </view>

    <view>
        <text>循环生成checkbox</text>
        <checkbox-group name="province">
            <view  wx:for="{{provinces}}" wx:key="*this">
                <checkbox value="{{item.py}}" id="{{item.py}}" /> <label for="{{item.py}}">{{item.text}}</label>
            </view>
        </checkbox-group>
    </view>
    <button form-type="submit" type="primary">提交</button>
    <button form-type="reset" type="warn">重置</button>
</form>

Page({
  data: {
      provinces:[
             {py:'hunan',text:'湖南'},
             {py:'guangdong',text:'广东'},
             {py:'shanghai',text:'上海'},
             {py:'hubei',text:'湖北'},
            ]

  },
  // 选中爱好触发事件
  chooseLove:function(e){
    // 打印选中的爱好
      console.log(e.detail.value)
  },
  // 提交表单触发
  submitForm:function(e){
    // 打印选中的checkbox
    console.log(e.detail.value)
  }
})

input

输入框组件，用户表单数据的输入

<intpu></intpu>

1. confirm-type的最终表现与手机输入法本身的实现有关，部分安卓系统输入法和第三方输入法可能不支持或不完全支持
2. input 组件是一个原生组件，字体是系统字体，所以无法设置 font-family
3. 在 input 聚焦期间，避免使用 css 动画
4. 对于将 input 封装在自定义组件中、而 form 在自定义组件外的情况， form 将不能获得这个自定义组件中 input 的值。此时需要使用自定义组件的 内置 behaviors wx://form-field
5. 键盘高度发生变化，keyboardheightchange事件可能会多次触发，开发者对于相同的 height 值应该忽略掉

input属性说明:

<view class="page-body">
  <view class="page-section">
    <view class="weui-cells__title">可以自动聚焦的input</view>
    <view class="weui-cells weui-cells_after-title">
      <view class="weui-cell weui-cell_input">
        <input class="weui-input" focus="{{focus}}" placeholder="将会获取焦点"/>
      </view>
    </view>
  </view>
  <view class="page-section">
    <view class="weui-cells__title">控制最大输入长度的input</view>
    <view class="weui-cells weui-cells_after-title">
      <view class="weui-cell weui-cell_input">
        <input class="weui-input" maxlength="10" placeholder="最大输入长度为10" />
      </view>
    </view>
  </view>
  <view class="page-section">
    <view class="weui-cells__title">实时获取输入值：{{inputValue}}</view>
    <view class="weui-cells weui-cells_after-title">
      <view class="weui-cell weui-cell_input">
        <input class="weui-input"  maxlength="10" bindinput="bindKeyInput" placeholder="输入同步到view中"/>
      </view>
    </view>
  </view>
  <view class="page-section">
    <view class="weui-cells__title">控制输入的input</view>
    <view class="weui-cells weui-cells_after-title">
      <view class="weui-cell weui-cell_input">
        <input class="weui-input"  bindinput="bindReplaceInput" placeholder="连续的两个1会变成2" />
      </view>
    </view>
  </view>
  <view class="page-section">
    <view class="weui-cells__title">控制键盘的input</view>
    <view class="weui-cells weui-cells_after-title">
      <view class="weui-cell weui-cell_input">
        <input class="weui-input"  bindinput="bindHideKeyboard" placeholder="输入123自动收起键盘" />
      </view>
    </view>
  </view>
  <view class="page-section">
    <view class="weui-cells__title">数字输入的input</view>
    <view class="weui-cells weui-cells_after-title">
      <view class="weui-cell weui-cell_input">
        <input class="weui-input" type="number" placeholder="这是一个数字输入框" />
      </view>
    </view>
  </view>
  <view class="page-section">
    <view class="weui-cells__title">密码输入的input</view>
    <view class="weui-cells weui-cells_after-title">
      <view class="weui-cell weui-cell_input">
        <input class="weui-input" password type="text" placeholder="这是一个密码输入框" />
      </view>
    </view>
  </view>
  <view class="page-section">
    <view class="weui-cells__title">带小数点的input</view>
    <view class="weui-cells weui-cells_after-title">
      <view class="weui-cell weui-cell_input">
        <input class="weui-input" type="digit" placeholder="带小数点的数字键盘"/>
      </view>
    </view>
  </view>
  <view class="page-section">
    <view class="weui-cells__title">身份证输入的input</view>
    <view class="weui-cells weui-cells_after-title">
      <view class="weui-cell weui-cell_input">
        <input class="weui-input" type="idcard" placeholder="身份证输入键盘" />
      </view>
    </view>
  </view>
  <view class="page-section">
    <view class="weui-cells__title">控制占位符颜色的input</view>
    <view class="weui-cells weui-cells_after-title">
      <view class="weui-cell weui-cell_input">
        <input class="weui-input" placeholder-style="color:#F76260" placeholder="占位符字体是红色的" />
      </view>
    </view>
  </view>
</view>

Page({
  data: {
    focus: false,
    inputValue: ''
  },
  bindKeyInput: function (e) {
    this.setData({
      inputValue: e.detail.value
    })
  },
  // 连续输入两个1，会编程一个2
  bindReplaceInput: function (e) {
    console.log(e.detail)
    // 获取当前输入框的值
    var value = e.detail.value
    // 获取当前光标的位置
    console.log(e.detail)
    var pos = e.detail.cursor
    return {
      value: value.replace(/11/g, '2'),
      cursor: pos
    }
  },
  // 用户输入123，触发事件
  bindHideKeyboard: function (e) {
    if (e.detail.value === '123') {
      // 收起键盘
      wx.hideKeyboard()
    }
  }
})

picker

从底部弹起的滚动选择器

<picker></picker>

picker组件属性说明:

除了上述通用的属性，对于不同的mode，picker拥有不同的属性。

单列选择器

普通选择器：mode = selector

普通选择器常用属性：

<view>
    <picker bindchange="bindPickerChange" value="{{index}}" range="{{array}}">
        <view>
            请选择序号：{{array[index]}}
        </view>
    </picker>
</view>

<view>
    <picker bindchange="bindPickerChange2" value="{{index}}" range="{{objectArray}}"range-key="name">
        <view>
            当前选择的姓名：{{name}}
        </view>
    </picker>
</view>

Page({
  data: {
      array:[1,2,3,4,5],
      index:-1,
      objectArray:[
          {id:1,name:'张三'},
          {id:2,name:'李四'},
          {id:3,name:'王五'},
          {id:4,name:'赵六'}
      ],
      name:'请选择人名',
  },

  bindPickerChange:function(e){
      //获取选中的下标
      var index = e.detail.value;
      //设置data中的index
      this.setData({
          index:index,
      });
  },
  bindPickerChange2:function(e){
      var index = e.detail.value;
       //设置data中的index
       this.setData({
          name:this.data.objectArray[index].name,
      });
  }
})

多列选择器

多列选择器：mode = multiSelector，与普通选择器的区别在于,多列选择器要求数组必须是一个二维的数组

<view>
    <view>多列选择器</view>
    <picker bindchange="bindPickerChange" value="{{index}}" range="{{array}}" mode="multiSelector">
        <view>
            当前选择：{{num}}
        </view>
    </picker>
</view>

<view>
    <view>多列选择器2</view>
    <picker bindchange="bindPickerChange2" value="{{index}}" range="{{objectArray}}" range-key="name" mode="multiSelector">
        <view>
            当前选择：{{name}}
        </view>
    </picker>
</view>

Page({
    data: {
        array:[[1,2,3,4,5],[6,7,8,9,10]],
        num:"",
        objectArray:[
            [
                {id:1,name:'张三'},
                {id:2,name:'李四'},
                {id:3,name:'王五'},
                {id:4,name:'赵六'}
            ],
            [
                {id:1,name:'张三'},
                {id:2,name:'李四'},
                {id:3,name:'王五'},
                {id:4,name:'赵六'}
            ]
        ],
        name:'请选择人名',
    },

    bindPickerChange:function(e){
        //获取选中的下标
        var indexs = e.detail.value;
        //设置data中的index
        this.setData({
            num:this.data.array[0][indexs[0]]+'-->'+this.data.array[1][indexs[1]],
        });
    },
    bindPickerChange2:function(e){
        var indexs = e.detail.value;
         //设置data中的index
         this.setData({
            name:this.data.objectArray[0][indexs[0]].name +'-->'+this.data.objectArray[1][indexs[1]].name,
        });
    }
})

时间选择器&日期选择器&地区选择器

时间选择器：mode = time

时间选择器常见属性：

日期选择器：mode = date

日期选择器常见属性：

fields 有效值：

省市区选择器：mode = region

地区选择器常见属性：

level 的有效值

<view>
  <view >时间选择器</view>
  <picker mode="time" value="{{time}}" start="09:01" end="21:01" bindchange="bindTimeChange">
    <view class="picker">
      当前选择: {{time}}
    </view>
  </picker>
</view>

<view>
  <view>日期选择器</view>
  <picker mode="date" value="{{date}}" start="2015-09-01" end="2017-09-01" bindchange="bindDateChange">
    <view class="picker">
      当前选择: {{date}}
    </view>
  </picker>
</view>

<view>
  <view>省市区选择器</view>
  <picker mode="region" bindchange="bindRegionChange"  custom-item="{{customItem}}">
    <view class="picker">
      当前选择：{{region}}
    </view>
  </picker>
</view>

// pages/picker/picker.js
Page({
    data: {
       time:'请选择时间',
       date:'请选择日期',
       customItem:'全部',
       region:'',
    },

    bindTimeChange:function(e){
        //获取选中的下标
        //设置data中的index
        this.setData({
            time:e.detail.value,
        });
    },
    bindDateChange:function(e){
        this.setData({
            date:e.detail.value,
        });
    },
    bindRegionChange:function(e){
        console.log(e.detail.value);
        this.setData({
            region:e.detail.value,
        });
    }
   
})

picker-view

嵌入页面的滚动选择器。其中只可放置 picker-view-column组件

属性说明:

<picker-view style="width: 100%;height: 250px;" bindchange="changevalue">
 <picker-view-column>
    <view wx:for="{{year}}">{{item}}</view>
 </picker-view-column>
 <picker-view-column>
    <view wx:for="{{month}}">{{item}}</view>
 </picker-view-column>
 <picker-view-column>
    <view wx:for="{{day}}">{{item}}</view>
 </picker-view-column>
</picker-view>
<view>{{myvalue}}</view>

Page({
    data: {
        year:[1990,1995,2000,2005,2010,2020,2025],
        month:[1,2,3,4,5,6,7,8,9,10,11,12],
        day:[1,5,10,15,20,25,30],
        myvalue:''

    },
    changevalue:function(e){
        //获取选中的下标集合
         let indexs = e.detail.value;
         var year = this.data.year[indexs[0]];
         var month = this.data.month[indexs[1]];
         var day = this.data.day[indexs[2]];
         this.setData({
             myvalue: this.data.myvalue = year+"-"+month+"-"+day,
         });
    }
})

滑动有声音，吓我一条

radio

属性说明:

<radio-group bindchange="choose">
    <radio checked="{{item.id == 2?true:false}}" wx:for="{{array}}" value="{{item.name}}">{{item.value}}</radio>
</radio-group>
<view>{{myvalue}}</view>

Page({
    data: {
      array:[
        {id:'1',name:'male',value:'男'},
        {id:'2',name:'female',value:'女'}
      ],
      myvalue:'请选择性别'
    },
    choose:function(e){
        var value = e.detail.value;
        this.setData({
            myvalue:value
        });
    }
})

slider

滑动选择器

属性说明:

<slider min="1" max="100" show-value="{{true}}" bindchanging="changevalue"></slider>
<view style="width:{{width}};height:100rpx;background-color: green;"></view>

Page({
    data: {
        width:"10rpx",
    },
    changevalue:function(e){
        var value = e.detail.value;
        this.setData({
            width:value*5+"rpx"
        });
    }
})

switch

开关选择器。

属性说明:

<switch checked="{{false}}" color="red">这是一个开关选择器</switch>
<switch checked="{{true}}" bindchange="changevalue">开关</switch>
<view style="background-color: {{color}};width: 100%;height: 500rpx;"></view>

Page({
    data: {
      color:'#FFFFFF'
    },
    changevalue:function(e){
        var flag = e.detail.value;
        if(flag){
            this.setData({
                color:'#FFFFFF' 
            });
        }else{
            this.setData({
                color:'#000000' 
            });
        }
    }
})

表单综合练习

<form bindsubmit="submitForm">
    <input name="username" placeholder="请输入用户名" />
    <input name="password" password="{{true}}" placeholder="请输入密码" />
    <checkbox-group name="skill" style="margin-top: 25rpx;">
        请选择技能
        <view wx:for="{{skills}}">
            <checkbox id="{{item.id}}" value="{{item.name}}">{{item.value}}</checkbox>
        </view>
    </checkbox-group>
    <picker name="birthday" mode="date" start="1970-01-01" end="2000-12-31" bindchange="changeDate" style="margin-top: 25rpx">
        <view>{{birthday}}</view>
    </picker>
    <picker name="city" mode="region" bindchange="changeCity" style="margin-top: 25rpx">
        <view>{{city}}</view>
    </picker>
    <radio-group name="sex" style="margin-top: 25rpx">
      <radio value="男" checked="{{true}}">男</radio>
      <radio value="女">女</radio>
    </radio-group>
    <view style="margin-top: 25rpx">
        请选择年龄:
        <slider min="15" max="50" show-value="{{true}}" name="age"></slider>
    </view>
    <switch name="isOk" style="margin-top: 25rpx">是否保密</switch>
    <textarea name="remark" style="margin-top: 25rpx" placeholder="备注">
    </textarea>
    <button form-type="submit" type="primary" size="mini">提交</button>
    <button style="margin-left: 25rpx;" form-type="reset" type="warn"size="mini">重置</button>
</form>

Page({
    data: {
        skills:[{id:'s01',name:'Java',value:'Java'},
                {id:'s02',name:'SQL',value:'SQL'},
                {id:'s03',name:'HTML',value:'HTML'},
                {id:'s04',name:'JavaScript',value:'JavaScript'}
                ],
        birthday:'请选择出生日期',
        city:'请选择你所在地'
    },
    submitForm:function(e){
       console.log(e);
    },
    changeDate:function(e){
        this.setData({
            birthday:e.detail.value,
        });
    },
    changeCity:function(e){
        var values = e.detail.value;
        this.setData({
            city:values[0]+','+values[1]+','+values[2],
        });
        console.log(e)
    }
})

导航组件

<navigator></navigator>

页面链接,类似html的超链接

属性说明: