Simple Example of WeChat applet slider and Applet slider instance

Simple Example of the applet slider and the applet slider instance

Simple Example of the applet slider

Implementation:

Small Program slider application, slider control that can be added or subtracted

<view class="control-w ">  <block wx:for="{{controls}}" wx:key="id" wx:for-item="v">   <view class="slide-item">    <view class="itemName">{{v.name}}</view>    <view class="slidewrap">     <text class="s-con" data-id="{{v.id}}" bindtap="minusCount">-</text>     <slider class="slide" bindchange="sliderchange" step="10" value="{{v.value}}" data-id="{{v.id}}" max="{{v.max}}" min="0" wx:if="{{index<3}}" />     <slider class="slide" bindchange="sliderchange" step="10" value="{{v.value}}" data-id="{{v.id}}" max="{{v.max}}" min="0" wx:if="{{index==3}}" />     <text class="s-con" data-id="{{v.id}}" data-max="{{v.max}}" bindtap="addCount">+</text>    </view>   </view>  </block> </view>

Page Structure

Page ({data: {controls: [{id: 1, name: 'function 1', value: 30, max: 60}, {id: 2, name: 'feature 2', value: 30, max: 60}, {id: 3, name: 'feature 3', value: 30, max: 60}, {id: 4, name: 'function 4', value: 50, max: 100}]}, // Add addCount: function (event) {let data = event. currentTarget. dataset let controls = this. data. controls let control = controls. find (function (v) {return v. id = data. id}) let control1 = controls. find (function (v) {return v. max = data. max}) if (control. value> control1.max) return control. value + = 10; this. setData ({'controls': controls})}, // control minus minusCount: function (event) {let data = event. currentTarget. dataset let controls = this. data. controls let control = controls. find (function (v) {return v. id = data. id}) if (control. value <= 0) return control. value-= 10; this. setData ({'controls': controls})}, // drag sliderchange: function (e) {let data = e. currentTarget. dataset let controls = this. data. controls let control = controls. find (function (v) {return v. id = data. id}) this. setData ({'controls': controls })}})

Thank you for reading this article. I hope it will help you. Thank you for your support for this site!