微信小程序使用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 相关文章推荐
一个加载js文件的小脚本
Jun 28 Javascript
js 页面输出值
Nov 30 Javascript
如何编写高质量JS代码
Dec 28 Javascript
javascript新闻跑马灯实例代码
Jul 29 Javascript
javascript事件委托的用法及其好处简析
Apr 04 Javascript
JS动态添加选项案例分析
Oct 17 Javascript
React-router中结合webpack实现按需加载实例
May 25 Javascript
layui select动态添加option的实例
Mar 07 Javascript
vue 中动态绑定class 和 style的方法代码详解
Jun 01 Javascript
支付宝小程序tabbar底部导航
Nov 06 Javascript
javascript设计模式 ? 访问者模式原理与用法实例分析
Apr 26 Javascript
vue-cli单页面预渲染seo-prerender-spa-plugin操作
Aug 10 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 动态生成静态HTML页面示例代码
2014/01/15 PHP
PHP模拟QQ登录的方法
2015/07/29 PHP
学习php设计模式 php实现模板方法模式
2015/12/08 PHP
php文档工具PHP Documentor安装与使用方法
2016/01/25 PHP
php基于数组函数实现关联表的编辑操作示例
2017/07/04 PHP
PHP开发之归档格式phar文件概念与用法详解【创建,使用,解包还原提取】
2017/11/17 PHP
php对mongodb的扩展(小试牛刀)
2012/11/11 Javascript
ajax java 实现自动完成功能
2012/12/19 Javascript
裁剪字符串trim()自定义改进版
2013/04/10 Javascript
深入理解JavaScript系列(33):设计模式之策略模式详解
2015/03/03 Javascript
JavaScript获取页面中超链接数量的方法
2015/11/09 Javascript
JavaScript如何实现在文本框(密码框)输入提示语
2015/12/25 Javascript
Javascript中indexOf()和lastIndexOf应用方法实例
2016/08/24 Javascript
前端html中jQuery实现对文本的搜索功能并把搜索相关内容显示出来
2017/11/14 jQuery
使用Bootstrap4 + Vue2实现分页查询的示例代码
2017/12/21 Javascript
微信小程序button组件使用详解
2018/01/31 Javascript
jQuery中$原理实例分析
2018/08/13 jQuery
Puppet的一些技巧
2018/09/17 Javascript
BootStrap中的模态框(modal,弹出层)功能示例代码
2018/11/02 Javascript
JavaScript学习笔记之基于定时器实现图片无缝滚动功能详解
2019/01/09 Javascript
分享JS表单验证源码(带错误提示及密码等级)
2020/01/05 Javascript
VUE实现自身整体组件销毁的示例代码
2020/01/13 Javascript
Python实现的堆排序算法示例
2018/04/29 Python
linux安装python修改默认python版本方法
2019/03/31 Python
Python udp网络程序实现发送、接收数据功能示例
2019/12/09 Python
新手学习Python2和Python3中print不同的用法
2020/06/09 Python
Python实现加密的RAR文件解压的方法(密码已知)
2020/09/11 Python
selenium框架中driver.close()和driver.quit()关闭浏览器
2020/12/08 Python
全面解析CSS Media媒体查询使用操作(推荐)
2017/08/15 HTML / CSS
面向对象编程是如何提高软件开发水平的
2014/05/06 面试题
校园安全广播稿
2014/02/08 职场文书
个性发展自我评价
2014/02/11 职场文书
班主任新年寄语
2014/04/04 职场文书
交通志愿者活动总结
2014/06/27 职场文书
2015年人事工作总结范文
2015/04/09 职场文书
详解Python类和对象内容
2021/06/22 Python