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

本文主要介绍了微信小程序使用slider设置数据值及switch开关组件功能,结合实例形式分析了slider组件及switch组件的功能与使用方法,希望能帮助到大家。

本文实例讲述了微信小程序使用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: #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;
})

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

相关推荐：

微信小程序如何使用action-sheet弹出底部菜单

微信小程序顶部可滚动导航效果

微信小程序用户自定义模版的功能实现

以上就是使用slider设置数据值及switch开关组件功能实现微信小程序的详细内容，更多请关注php中文网其它相关文章！

微信app下载

微信是一款手机通信软件，支持通过手机网络发送语音短信、视频、图片和文字。微信可以单聊及群聊，还能根据地理位置找到附近的人，带给大家全新的移动沟通体验，有需要的小伙伴快来保存下载体验吧！