Home  >  Article  >  WeChat Applet  >  Use slider to set data values ​​and switch component functions to implement WeChat applet

Use slider to set data values ​​and switch component functions to implement WeChat applet

小云云
小云云Original
2017-12-11 09:30:152536browse

This article mainly introduces the WeChat applet's use of slider to set data values ​​and switch component functions. It analyzes the functions and usage of slider components and switch components in the form of examples. I hope it can help everyone.

The example in this article describes the WeChat applet using slider to set data values ​​and switch component functions. Share it with everyone for your reference, the details are as follows:

1. Effect display

##2. Key code

① 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;
  })
 }
 }
})

Have you learned the above? Hurry up and give it a try.


Related recommendations:

How to use action-sheet to pop up the bottom menu of WeChat mini program

The top of WeChat mini program can be scrolled Navigation effect

Function implementation of WeChat applet user-defined template

The above is the detailed content of Use slider to set data values ​​and switch component functions to implement WeChat applet. For more information, please follow other related articles on the PHP Chinese website!

Statement:
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 admin@php.cn