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

小云云
Release: 2017-12-11 09:30:15
Original
2401 people have browsed it

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

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

1、效果展示

2、关键代码

① index.wxml

微信小程序组件:滑动选择器slider

最小值:{{min}}
最大值:{{max}}
当前值:{{text}}
---------------------------------
微信小程序组件:开关组件switch

开关组件当前状态:{{switchState}}
Copy after login

② 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:'关'
  })
 }
 }
})
Copy after login

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

相关推荐:

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

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

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

The above is the detailed content of 使用slider设置数据值及switch开关组件功能实现微信小程序. For more information, please follow other related articles on the PHP Chinese website!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact [email protected]
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!