微信小程序文本框，单选按钮，滑动选择器，时间选择器的实现。

## 这是自己做的一个自己制定方案的代码。包括了很多的知识点，希望能帮助大家。

WXML文件

<view class="intro" >
  <form bindsubmit="formSubmit" bindreset="formReset">
  <view class="section">
    <view class="section__title">方案名称：
    <input bindinput='int' name="name" class='input' placeholder="请备注方案名称" value='{{name}}'/>
    </view>
  </view>
    <view class="hot">
    <view  >光照模式：</view>
    <radio-group class="radio-group" bindchange="radioChange">
      <label class="radio" wx:for="{{items}}">
        <radio value="{{item.name}}" checked="{{item.checked}}" />
        {{item.value}}
      </label>
    </radio-group>
    </view>
      <!-- <view class="section">
        <view class="section__title">时间：
           <input bindinput='time1' name="time1" placeholder="时间"  value='{{time1}}'/>
            <input bindinput='time2' name="time2" placeholder="时间" value='{{time2}}'/>
             <input bindinput='time3' name="time3" placeholder="时间" value='{{time3}}'/>
              <input bindinput='time4' name="time4" placeholder="时间" value='{{time4}}'/>
        </view>
      </view> -->
<view class="section">
  <view class="section__title">换水时间</view>
  <picker mode="time" value="{{time}}" name='time' start="00:00" end="23:59" bindchange="bindTimeChange">
    <view class="picker">
      开始时间: {{time}}
    </view>
  </picker>
   <picker mode="time" value="{{time2}}" name='time2' bindchange="bindTimeChange1">
    <view class="picker">
      结束时间: {{time2}}
    </view>
  </picker>
</view>
  <view class="weidu">
    <view>温度：</view>
    <slider max='80' min='10' value='{{wtext}}'  block-size='15'backgroundColor='red' activeColor='blue' name="温度" show-value bindchange='wchange'></slider>
  </view>
  <view class="btn-area">
<button type='primary' bindtap='buttonListener' formType="submit" >提交</button>
  </view>
  </form>
  </view>

JS文件

Page({

  /**
   * 页面的初始数据
   */

  data: {
    items: [
      { name: '2', value: '蓝光' },
      { name: '1', value: '蓝紫光' },
      { name: '0', value: '关闭' },
    ],
    id: '',
    wtext: '20',
    gtext: '',
    names: '',
    showView: '',
    time: '11:20',
    time2: '12:20',
  },
  radioChange(e) {
    console.log('radio发生change事件，携带value值为：', e.detail.value);
    var that = this;
    that.setData({
      showView: e.detail.value
    })
  },

  bindTimeChange: function (e) {
    console.log('picker111发送选择改变，携带值为', e.detail.value)
    this.setData({
      time: e.detail.value
    })
  },

  bindTimeChange1: function (e) {
    console.log('picker222发送选择改变，携带值为', e.detail.value)
    this.setData({
      time2: e.detail.value
    })
  },
  formSubmit: function (e) {
  },

  wchange: function (e) {
    this.setData({
      wtext: e.detail.value
    })
  },
  schange: function (e) {
    this.setData({
      stext: e.detail.value
    })
  },
  gchange: function (e) {

    this.setData({
      gtext: e.detail.value
    })
  },
  int: function (e) {
    this.setData({
      names: e.detail.value
    })
  },

  buttonListener: function () {

    var that = this

    if (this.data.names == '') {
      wx.showModal({
        title: '方案名称为空',
        content: '请输入方案名称',
        success: function (res) {
        }
      })
    } else if (this.data.showView == '') {
      wx.showModal({
        title: '光照模式没选择',
        content: '请选择光照模式',
      })
    } else if (this.data.time >= this.data.time2) {

      wx.showModal({
        title: '请选择正确时间',
        content: '开始时间小于结束时间',
      })
    } else {
      wx.showToast({

        title: '保存成功',

        icon: 'success',
        duration: 2000,

      })
      setTimeout(function () {
        wx.reLaunch({
          url: '../geren/geren',
        })
      }, 1100)
    }
   

  },


  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {


  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

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

  },

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

  },

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

  },

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

  },

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

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

WXSS文件

.btn-area{
  margin-top: 100px;

}
.intro{
  font-size: 40rpx;
  line-height: 100rpx;
  margin: 30rpx;
}
.section__title{
  margin: 0px;
}
.input{
  float: right;
  font-size: 35rpx; 
  margin: 0px;
  margin-top: 25rpx;
  margin-right: 80rpx;
}
.radio{
  font-size: 35rpx;
}