微信小程序使用slider设置数据值及switch开关组件功能【附源码下载】
作者:FutrueJet 时间:2024-05-11 09:31:07
本文实例讲述了微信小程序使用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
希望本文所述对大家微信小程序开发有所帮助。
来源:http://blog.csdn.net/futruejet/article/details/52853807
标签:微信小程序,slider,switch
0
投稿
猜你喜欢
python爬虫之selenium库的安装及使用教程
2021-04-22 20:20:46
python 判断字符串当中是否包含字符(str.contain)
2022-11-10 04:21:10
js中int和string数据类型互相转化实例
2024-05-02 17:25:57
ORACLE常见错误代码的分析与解决(三)
2024-01-17 19:17:57
怎样设计"帮助"最有效?
2008-04-12 14:18:00
sql中的 where 、group by 和 having 用法解析
2024-01-14 05:12:13
使用Spring Boot实现操作数据库的接口的过程
2024-01-25 02:02:49
对跨多个表格的数据组合时需要用到的SQL
2009-01-06 11:18:00
通过Javascript将数据导出到外部Excel文档的函数代码
2024-04-22 22:32:00
SWFObject1.5: 基于Javascript的Flash媒体版本检测与嵌入模块
2009-08-06 18:02:00
javascript实现checkbox全选的代码
2024-04-16 10:38:11
在Python中使用SimpleParse模块进行解析的教程
2021-04-11 12:17:53
vue项目运行或打包时,频繁内存溢出情况问题
2024-05-02 16:53:45
pycharm创建并使用虚拟环境的详细图文教程
2022-05-27 18:19:51
Python实现HTTP协议下的文件下载方法总结
2023-04-29 20:01:36
异地远程访问本地SQL Server数据库
2024-01-18 20:00:18
JavaScript高级程序设计 阅读笔记(十七) js事件
2024-04-19 09:55:17
vue.js删除动态绑定的radio的指定项
2024-05-09 09:51:48
SQL Server中字符串函数的用法详解
2024-01-14 05:42:56
OpenLayer基于vue的封装使用教程
2024-05-11 09:16:22