微信小程序开发之（表单组件的使用）代码篇

这篇文章介绍微信小程序的表单组件的使用

内容包括添加视频播放、轮转图片、多选框

单选框、实时获取输入值、按钮提交输入控件的数据

笔者直接上代码，组件的详细介绍参考微信开发者文档：点击查看

嘿嘿！先来看看结果视频

微信小程序表单组件测试

1.工程目录

2.详细代码

index.js

Page({

  /**
   * 页面的初始数据
   */
  data: {
  //background:image的变量（设置图片的值）
    background: 
    ['https://res.wx.qq.com/wxdoc/dist/assets/img/0.4cb08bb4.jpg','https://res.wx.qq.com/wxdoc/dist/assets/img/0.4cb08bb4.jpg','https://res.wx.qq.com/wxdoc/dist/assets/img/0.4cb08bb4.jpg'],

//滑块视图容器的属性
    indicatorDots: true,
    vertical: false,
    autoplay: false,
    interval: 2000,
    duration: 500,


    items: [
      {value: 'USA', name: '美国'},
      {value: 'CHN', name: '中国', checked: 'true'},
      {value: 'BRA', name: '巴西'},
      {value: 'JPN', name: '日本'},
      {value: 'ENG', name: '英国'},
      {value: 'FRA', name: '法国'}
    ],
    inputValue: '',
    radioItems: [
      {name: 'USA', value: '美国'},
      {name: 'CHN', value: '中国', checked: 'true'}
    ],
  },
  checkboxChange(e) {
    console.log('checkbox发生change事件，携带value值为：', e.detail.value)

    const items = this.data.items
    const values = e.detail.value
    for (let i = 0, lenI = items.length; i < lenI; ++i) {
      items[i].checked = false

      for (let j = 0, lenJ = values.length; j < lenJ; ++j) {
        if (items[i].value === values[j]) {
          items[i].checked = true
          break
        }
      }
    }

    this.setData({
      items
    })
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */

  onReady: function () {
  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
    
  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {
    
  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {
    
  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {
    
  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {
    
  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {
    
  },


  bindKeyInput: function (e) {
    this.setData({
      inputValue: e.detail.value
    })
  },
  radioChange(e) {
    const checked = e.detail.value
    const changed = {}
    for (let i = 0; i < this.data.radioItems.length; i++) {
      if (checked.indexOf(this.data.radioItems[i].name) !== -1) {
        changed['radioItems[' + i + '].checked'] = true
      } else {
        changed['radioItems[' + i + '].checked'] = false
      }
    }
    this.setData(changed)
    console.log(changed)
  },
  tapEvent() {
    console.log('按钮被点击')
  },
  submit:function(e){
    console.log(e)
  }

})

index.wxml

内容包括添加视频播放、轮转图片、多选框、单选框、实时获取输入值、按钮提交输入控件的数据

 
<!--index.wxml-->
<view class="container">
<view>
 <text>hello world </text>




 <checkbox-group bindchange="checkboxChange" >
  <label  wx:for="{{items}}" wx:key="{{item.value}}">
      <view >
          <checkbox value="{{item.value}}" checked="{{item.checked}}"/>
      </view>
      <view>{{item.name}}</view>
    </label>
  </checkbox-group>
       </view> 
        



<view class="item3" >

    <form bindsubmit="submit">
      <custom-comp>
         <input name="name" placeholder="请输入名字"></input>
        <switch name="student" />
      </custom-comp>
      <button form-type="submit" size="default" type="primary" >提交</button>
    </form>

</view>





<view class="item">
  <view>实时获取输入值：{{inputValue}}</view>

     <input   maxlength="10" bindinput="bindKeyInput" placeholder="输入同步到view中"/>
  </view>
</view>


<view class="item1">
 <text>radio-group</text>
  <radio-group class="group" bindchange="radioChange">
        <view class="label-2" wx:for="{{radioItems}}">
          <radio id="{{item.name}}" value="{{item.name}}" checked="{{item.checked}}"></radio>
          <label class="label-2-text" for="{{item.name}}"><text>{{item.name}}</text></label>
        </view>
 </radio-group>
</view>




<view class="item2">
 <text>swiper   image </text>
      <swiper indicator-dots="{{indicatorDots}}" sytle="width:300px"
        autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}">
        <block wx:for="{{background}}" wx:key="*this">
          <swiper-item>
      <image src="{{item}}" class="slide-image" width="355" height="300"/>
  
          </swiper-item>
        </block>
      </swiper>
    </view>



    <view class="item2">
     <text>video </text>
        <video 
      id="myVideo" 
      src="http://81.71.14.198/vx/testvx.mp4" 
      binderror="videoErrorCallback" 
      danmu-list="{{danmuList}}" 
      enable-danmu 
      danmu-btn 
      show-center-play-btn='{{false}}' 
      show-play-btn="{{true}}" 
      controls
      picture-in-picture-mode="{{['push', 'pop']}}"
      bindenterpictureinpicture='bindVideoEnterPictureInPicture'
      bindleavepictureinpicture='bindVideoLeavePictureInPicture'
    ></video>
        </view>

index.wxss

/**index.wxss**/

.container{
  height:100%;
  width: 100%;
  background-color:rgb(119, 151, 221);
  display: flex;
  flex-direction: row;
 
 flex-wrap: wrap;/*换行*/

  justify-content: space-between;

  align-items: center;
}
.item{
  width:100%;
  height: 100rpx;
  background-color: yellow;
  border:1px solid#fff;
order: 3;
}

.item1{
  width:100%;
  height: 150rpx;
  background-color: rgb(105, 185, 109);
  border:1px solid#fff;
order: 3;
}
.item2{
  height: 300px;
  background-color: rgb(153, 172, 211);
  border:1px solid#fff;
order: 3;
}

.item3{
  
  background-color: rgb(241, 237, 241);
  border:1px solid#fff;
order: 3;
}

3.结果展示

测试展示图

调试信息，看标记部分

在这里插入图片描述

4.获取资源

【获取资源】

资源链接：资源获取

【关注微信公众号一起来交流】

·