使用slider設(shè)置數(shù)據(jù)值及switch開(kāi)關(guān)組件功能實(shí)現(xiàn)微信小程序的案例

小編給大家分享一下使用slider設(shè)置數(shù)據(jù)值及switch開(kāi)關(guān)組件功能實(shí)現(xiàn)微信小程序的案例，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

本文實(shí)例講述了微信小程序使用slider設(shè)置數(shù)據(jù)值及switch開(kāi)關(guān)組件功能。分享給大家供大家參考，具體如下：

1、效果展示

2、關(guān)鍵代碼

① index.wxml

<view>微信小程序組件：滑動(dòng)選擇器slider</view>
<slider bindchange="sliderBindchange" min="{{min}}" max="{{max}}" show-value/>
<view>最小值：{{min}}</view>
<view>最大值：{{max}}</view>
<view>當(dāng)前值：{{text}}</view>
<view>---------------------------------</view>
<view>微信小程序組件：開(kāi)關(guān)組件switch</view>
<switch checked type="switch" bindchange="switchBindchange"/>
<view>開(kāi)關(guān)組件當(dāng)前狀態(tài)：{{switchState}}</view>

② index.js

Page({
 data:{
 // text:"這是一個(gè)頁(yè)面"
 min:'20',
 max:'150',
 text:'',
 switchState:'開(kāi)'
 },
 sliderBindchange:function(e){
 this.setData({
  text:e.detail.value
 })
 },
 switchBindchange:function(e){
 if(e.detail.value){
  this.setData({
  switchState:'開(kāi)'
  })
 }else{
  this.setData({
  switchState:'關(guān)'
  })
 }
 }
})

以上是“使用slider設(shè)置數(shù)據(jù)值及switch開(kāi)關(guān)組件功能實(shí)現(xiàn)微信小程序的案例”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道！