使用slider设置数据值及switch开关组件功能实现微信小程序

本文实例讲述了微信小程序使用slider设置数据值及switch开关组件功能。分享给大家供大家参考，具体如下：

1、效果展示

2、关键代码

① index.wxml

微信小程序组件：滑动选择器slider

最小值：{{min}}
最大值：{{max}}
当前值：{{text}}
---------------------------------
微信小程序组件：开关组件switch

开关组件当前状态：{{switchState}}

② index.js

Page({
 data:{
 // text:"这是一个页面"
 min:&＃39;20&＃39;,
 max:&＃39;150&＃39;,
 text:&＃39;&＃39;,
 switchState:&＃39;开&＃39;
 },
 sliderBindchange:function(e){
 this.setData({
  text:e.detail.value
 })
 },
 switchBindchange:function(e){
 if(e.detail.value){
  this.setData({
  switchState:&＃39;开&＃39;
  })
 }else{
  this.setData({
  switchState:&＃39;关&＃39;
  })
 }
 }
})

以上内容大家学会了吗？赶紧动手尝试一下吧。