微信小程序使用slider设置数据值及switch开关组件功能【附源码下载】
更新时间：2017年12月09日 11:15:06 作者：FutrueJet
这篇文章主要介绍了微信小程序使用slider设置数据值及switch开关组件功能,结合实例形式分析了slider组件及switch组件的功能与使用方法,并附带源码供读者下载参考,需要的朋友可以参考下
（福利推荐：【腾讯云】服务器最新限时优惠活动，云服务器1核2G仅99元/年、2核4G仅768元/3年，立即抢购>>>：9i0i.cn/qcloud）
（福利推荐：你还在原价购买阿里云服务器？现在阿里云0.8折限时抢购活动来啦！4核8G企业云服务器仅2998元/3年，立即抢购>>>：9i0i.cn/aliyun）
本文实例讲述了微信小程序使用slider设置数据值及switch开关组件功能。分享给大家供大家参考，具体如下：
1、效果展示
2、关键代码
① index.wxml
<view>微信小程序组件：滑动选择器slider</view>
<slider bindchange="sliderBindchange" min="{{min}}" max="{{max}}" show-value/>
<view>最小值：{{min}}</view>
<view>最大值：{{max}}</view>
<view>当前值：{{text}}</view>
<view>---------------------------------</view>
<view>微信小程序组件：开关组件switch</view>
<switch checked type="switch" bindchange="switchBindchange"/>
<view>开关组件当前状态：{{switchState}}</view>
② index.js
Page({
data:{
// text:"这是一个页面"
min:'20',
max:'150',
text:'',
switchState:'开'
},
sliderBindchange:function(e){
this.setData({
text:e.detail.value
})
},
switchBindchange:function(e){
if(e.detail.value){
this.setData({
switchState:'开'
})
}else{
this.setData({
switchState:'关'
})
}
}
})
3、源代码点击此处本站下载。
关于slider与switch组件的详细说明与使用方法可参考官网：
https://mp.weixin.qq.com/debug/wxadoc/dev/component/slider.html
https://mp.weixin.qq.com/debug/wxadoc/dev/component/switch.html
希望本文所述对大家微信小程序开发有所帮助。
相关文章
javascript中的缓动效果可以应用于很多地方，比如距离位移上的变化：图片的滚动、焦点图的轮转切换，透明度上的变化：渐隐渐现。凡是存在运动的状态都适用，下面以最基本的块在容器内从左到右滑动为例，讲下几种不同的缓动处理方式2012-12-12
本篇文章主要介绍了详解webpack3如何正确引用并使用jQuery库，具有一定的参考价值，有兴趣的可以了解一下2017-08-08
这篇文章主要介绍了JavaScript合并两个数组并去除重复项的方法,涉及javascript操作数组的合并与去重的相关技巧,需要的朋友可以参考下2015-06-06
对frameset、frame、iframe的js操作示例代码
父框架到子框架的引用、子框架到父框架的引用、兄弟框架间的引用、不同层次框架间的互相引用具体实现如下，有此需求的朋友可以参考下2013-08-08
这篇文章主要为大家详细介绍了Bootstrap php制作动态分页标签的相关资料，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-12-12
这篇文章主要给大家介绍了关于uniapp如何实现tabBar之间传参的相关资料,文中通过代码示例介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2023-08-08
这篇文章主要为大家详细介绍了Bootstrap select多选下拉框实现，具有一定的参考价值，感兴趣的小伙伴们可以参考一下代码2016-12-12
本文将要介绍在JavaScript 6(ES6)里出现的一个关于字符串操作的语法特征，有需要的朋友们可以参考学习，下面来一起来看看吧。2016-09-09
在开发的时候为什么左边的数据出来比右边的慢呢？因为这里没有进行分页，左边的数据多，所以查询相对较慢。怎么解决此问题呢？下面小编给大家带来了JS鼠标滚动分页效果示例，需要的的朋友参考下吧2017-07-07
这篇文章主要介绍了JS对图片进行黑白化的实现代码,需要的朋友可以参考下2018-04-04
最新评论