WeChat applet slider component usage details, slider Usage Details

The usage of the applet slider component is described in detail.

This article shares with you how to use the applet slider component for your reference. The specific content is as follows:

WXML

<View class = "tui-content"> <view class = "tui-slider-head"> set step. The current step is 5. Current value: {slider1 }}</view> <view class = "tui-slider-box"> <slider bindchange = "changeSlider1" step = "5" value = "{slider1}} "/> </view> <view class =" tui-content "> <view class =" tui-slider-head "> whether to display the current value on the right </view> <view class = "tui-slider-box"> <slider bindchange = "changeSlider2" value = "{slider2 }}" show-value/> </view> </view> <view class = "tui-content"> <view class = "tui-slider-head"> set the maximum and minimum values </view> <view class =" tui-slider-box "> <slider bindchange =" changeSlider3 "min =" 20 "max =" 90 "value =" {slider3 }}" show-value/> </ view> </view> <view class = "tui-content"> <view class = "tui-slider-head"> sliding selector setting name </view> <view class = "tui-slider-box"> <view class = "tui-fl"> select </view> <view class = "tui-fl" >{{ slider4 }}</ view> <view style = "overflow: hidden "> <slider bindchanging =" changeSlider4 "value =" {slider4 }}"/> </view>

WXSS

.tui-slider-head,.tui-slider-box{ height: 80rpx; line-height: 80rpx; font-size: 35rpx; color: #666;}

JS

Page({ data: {  slider1: 50,  slider2: 50,  slider3: 50,  slider4: 50 }, changeSlider1(e) {  this.setData({ slider1: e.detail.value }) }, changeSlider2(e){  this.setData({ slider2: e.detail.value}) }, changeSlider3(e) {  this.setData({ slider3: e.detail.value }) }, changeSlider4(e) {  this.setData({ slider4: e.detail.value }) }})

Note: two events of the slider component are triggered when bindchanging is dragged, and when bindchange is dragged once, it is triggered!

Download DEMO

The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.