微信小程序使用slider設(shè)置數(shù)據(jù)值及switch開(kāi)關(guān)組件功能【附源碼下載】
更新時(shí)間：2017年12月09日 11:15:06 作者：FutrueJet
這篇文章主要介紹了微信小程序使用slider設(shè)置數(shù)據(jù)值及switch開(kāi)關(guān)組件功能,結(jié)合實(shí)例形式分析了slider組件及switch組件的功能與使用方法,并附帶源碼供讀者下載參考,需要的朋友可以參考下
本文實(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)'
})
}
}
})
3、源代碼點(diǎn)擊此處本站下載。
關(guān)于slider與switch組件的詳細(xì)說(shuō)明與使用方法可參考官網(wǎng)：
https://mp.weixin.qq.com/debug/wxadoc/dev/component/slider.html
https://mp.weixin.qq.com/debug/wxadoc/dev/component/switch.html
希望本文所述對(duì)大家微信小程序開(kāi)發(fā)有所幫助。
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了JavaScript動(dòng)態(tài)綁定，關(guān)于JavaScript中為元素綁定的事件失效的解決方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-09-09
js實(shí)現(xiàn)拾色器插件（ColorPicker）
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)拾色器插件ColorPicker，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-05-05
Bootstrap實(shí)現(xiàn)漸變頂部固定自適應(yīng)導(dǎo)航欄
這篇文章給大家介紹了Bootstrap實(shí)現(xiàn)漸變頂部固定自適應(yīng)導(dǎo)航欄，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-01-01
js實(shí)現(xiàn)點(diǎn)擊圖片在屏幕中間彈出放大效果
這篇文章主要介紹了js實(shí)現(xiàn)點(diǎn)擊圖片在屏幕中間彈出放大效果,非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2019-09-09
關(guān)于JavaScript數(shù)組去重的一些理解匯總
這篇文章主要給大家介紹了關(guān)于JavaScript數(shù)組去重的一些理解，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-09-09
原生JS實(shí)現(xiàn)垂直手風(fēng)琴效果
本篇文章主要介紹了原生JS實(shí)現(xiàn)垂直手風(fēng)琴效果的示例代碼，具有很好的參考價(jià)值，下面跟著小編一起來(lái)看下吧2017-02-02
Javascript 淺拷貝、深拷貝的實(shí)現(xiàn)代碼
Javascript中的對(duì)像賦值與Java中是一樣的,都為引用傳遞.就是說(shuō),在把一個(gè)對(duì)像賦值給一個(gè)變量時(shí),那么這個(gè)變量所指向的仍就是原來(lái)對(duì)像的地址.那怎么來(lái)做呢 答案是克隆.2008-12-12
本篇文章主要介紹了js中幾種實(shí)用的跨域方法原理詳解 ，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。2016-12-12
JavaScript監(jiān)聽(tīng)手機(jī)物理返回鍵的兩種解決方法
JavaScript沒(méi)有監(jiān)聽(tīng)物理返回鍵的API，所以只能使用 popstate 事件監(jiān)聽(tīng)。接下來(lái)通過(guò)本文給大家分享JavaScript監(jiān)聽(tīng)手機(jī)物理返回鍵的兩種解決方法，感興趣的朋友一起看看吧2017-08-08
