微信小程序使用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)文章
JS庫(kù)particles.js創(chuàng)建超炫背景粒子插件(附源碼下載)
particles.js用于創(chuàng)建粒子的輕量級(jí) JavaScript 庫(kù)。使用方法非常簡(jiǎn)單，代碼也很容易實(shí)現(xiàn)，下面通過(guò)本文給大家分享JS庫(kù)particles.js創(chuàng)建超炫背景粒子插件附源碼下載，需要的朋友參考下吧2017-09-09
這篇文章主要介紹了JavaScript布爾運(yùn)算符原理使用解析,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-05-05
這篇文章主要給大家介紹了關(guān)于JS算法教程之字符串去重與字符串反轉(zhuǎn)的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2020-12-12 
讓回調(diào)函數(shù) showResponse 也帶上參數(shù)的代碼
讓回調(diào)函數(shù) showResponse 也帶上參數(shù)的代碼...
2007-08-08 
面向?qū)ο罄^承實(shí)例(a如何繼承b問(wèn)題)(自寫)
經(jīng)常會(huì)看到a如何繼承b的問(wèn)題；決定寫一下，其實(shí)繼承就是繼承父級(jí)的屬性和方法，感興趣的朋友可以參考下哈，希望對(duì)大家有所幫助
2013-07-07 
詳解TypeScript如何正確使用Declare關(guān)鍵字
如果您編寫 TypeScript 代碼的時(shí)間足夠長(zhǎng)，您就已經(jīng)看到過(guò)declare關(guān)鍵字，但它有什么作用，為什么要使用它呢，下面小編就來(lái)和大家簡(jiǎn)單講講
2023-08-08 
js實(shí)現(xiàn)select組件的選擇輸入過(guò)濾代碼
如何實(shí)現(xiàn)select組件的選擇輸入過(guò)濾作用，下面有一段js代碼，很實(shí)用，需要的朋友可以看看
2014-10-10 
這篇文章主要為大家詳細(xì)介紹了微信小程序之購(gòu)物車功能的相關(guān)資料，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-05-05 
JS實(shí)現(xiàn)淘寶支付寶網(wǎng)站的控制臺(tái)菜單效果
這篇文章主要介紹了JS實(shí)現(xiàn)淘寶支付寶網(wǎng)站的控制臺(tái)菜單效果,涉及JavaScript基于時(shí)間函數(shù)及數(shù)學(xué)運(yùn)算控制頁(yè)面動(dòng)畫彈出菜單效果的實(shí)現(xiàn)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下
2015-09-09