微信小程序使用slider设置数据值及switch开关组件功能【附源码下载】


Posted in Javascript onDecember 09, 2017

本文实例讲述了微信小程序使用slider设置数据值及switch开关组件功能。分享给大家供大家参考,具体如下:

1、效果展示

微信小程序使用slider设置数据值及switch开关组件功能【附源码下载】

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 相关文章推荐
javascript 读取xml,写入xml 实现代码
Jul 10 Javascript
JS跨域总结
Aug 30 Javascript
jsp网页搜索结果中实现选中一行使其高亮
Feb 17 Javascript
jquery无法设置checkbox选中即没有变成选中状态
Mar 27 Javascript
jQuery中delegate()方法的用法详解
Oct 13 Javascript
JavaScript制作简单的框选图表
May 15 Javascript
vue实现全选和反选功能
Aug 31 Javascript
inner join 内联与left join 左联的实例代码
Sep 18 Javascript
JS自定义滚动条效果
Mar 13 Javascript
在vue中实现禁止屏幕滚动,禁止屏幕滑动
Jul 22 Javascript
JavaScript快速调试的两个技巧
Nov 04 Javascript
关于JS中的作用域中的问题思考分享
Apr 06 Javascript
微信小程序实现action-sheet弹出底部菜单功能【附源码下载】
Dec 09 #Javascript
微信小程序使用toast消息对话框提示用户忘记输入用户名或密码功能【附源码下载】
Dec 09 #Javascript
微信小程序loading组件显示载入动画用法示例【附源码下载】
Dec 09 #Javascript
Angular中点击li标签实现更改颜色的核心代码
Dec 08 #Javascript
Javascript中的作用域及块级作用域
Dec 08 #Javascript
Vue中自定义全局组件的实现方法
Dec 08 #Javascript
Vue中的Vux配置指南
Dec 08 #Javascript
You might like
PHP实现AES256加密算法实例
2014/09/22 PHP
PHP-FPM之Chroot执行环境详解
2015/08/03 PHP
PHP文件上传类实例详解
2016/04/08 PHP
php加密解密字符串示例
2016/10/13 PHP
Laravel框架分页实现方法分析
2018/06/12 PHP
jquery 事件执行检测代码
2009/12/09 Javascript
ASP小贴士/ASP Tips javascript tips可以当桌面
2009/12/10 Javascript
jquery下利用jsonp跨域访问实现方法
2010/07/29 Javascript
DLL+ ActiveX控件+WEB页面调用例子
2010/08/07 Javascript
解决火狐浏览器下JS setTimeout函数不兼容失效不执行的方法
2012/11/14 Javascript
网站如何做到完全不需要jQuery也可以满足简单需求
2013/06/27 Javascript
禁用JavaScript控制台调试的方法
2014/03/07 Javascript
用JavaScript实现页面重定向功能的教程
2015/06/04 Javascript
基于jQuery实现交互体验社会化分享代码附源码下载
2016/01/04 Javascript
全面解析JavaScript中的valueOf与toString方法(推荐)
2016/06/14 Javascript
jQuery制作圣诞主题页面 更像是爱情影集
2016/08/10 Javascript
Laydate时间组件在火狐浏览器下有多时间输入框时只能给第一个输入框赋值的解决方法
2016/08/18 Javascript
vue+element实现批量删除功能的示例
2018/02/28 Javascript
8 个有用的JS技巧(推荐)
2019/07/03 Javascript
七行JSON代码把你的网站变成移动应用过程详解
2019/07/09 Javascript
JS实现移动端在线签协议功能
2019/08/22 Javascript
ES6对象操作实例详解
2020/05/23 Javascript
Python功能键的读取方法
2015/05/28 Python
Python环境下搭建属于自己的pip源的教程
2016/05/05 Python
Python实现统计给定字符串中重复模式最高子串功能示例
2018/05/16 Python
python3模块smtplib实现发送邮件功能
2018/05/22 Python
django基于cors解决跨域请求问题详解
2019/08/06 Python
python中pyplot基础图标函数整理
2020/11/10 Python
Html5 Canvas 实现一个“刮刮乐”游戏
2019/09/05 HTML / CSS
前端实现背景虚化但内容清晰且自适应 的实例代码
2019/08/01 HTML / CSS
手工制作的男士奢华英国鞋和服装之家:Goodwin Smith
2019/06/21 全球购物
新闻传播专业求职信
2014/07/22 职场文书
禁毒宣传活动总结
2014/08/26 职场文书
小学生思想品德评语
2014/12/31 职场文书
未婚证明格式
2015/06/15 职场文书
谁动了我的奶酪读书笔记
2015/06/30 职场文书