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

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-->
<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**/

.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;
}