<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({
data: {
controls: [
{
id: 1,
name: '功能一',
value: 30,
max: 60
},
{
id: 2,
name: '功能二',
value: 30,
max: 60
},
{
id: 3,
name: '功能三',
value: 30,
max: 60
},
{
id: 4,
name: '功能四',
value: 50,
max: 100
}
]
}, // 控制加
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
})
},
// 控制减
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
})
},
//拖动
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
}) }
})

js结构

页面样式

最新文章

  1. Android中Fragment与Activity之间的交互(两种实现方式)
  2. gulp(一)
  3. [原创]Matlab生成随机数
  4. char*或string转换成LPCWSTR
  5. Delphi调用约定
  6. D5转Xe点滴
  7. C Primer Plus(第五版)3
  8. Chromium浏览器高级开发系列第一篇:如何获取最新chromium源码
  9. HTML中noscript的用法
  10. js事件冒泡原理及处理
  11. [Javascript] Array methods in depth - some
  12. SQL 语句整理
  13. HDU 3117 Fibonacci Numbers(围绕四个租赁斐波那契,通过计++乘坐高速动力矩阵)
  14. AspNetPager常用属性及一些样式
  15. C++ 大多数人将 cin::sync() 视为清除缓存区函数的误用
  16. 201521123036 《Java程序设计》第2周学习总结
  17. Git命令(1)
  18. WPF TextBox 正则验证 大于等于0 小于等于1 的两位小数
  19. 【java】i++与++i、i--运算
  20. hdu 2870 Largest Submatrix(平面直方图的最大面积 变形)

热门文章

  1. MindManager全部快捷键(官方英文文档+中文翻译)
  2. npm使用入门
  3. 第八篇:ZTree操作总结
  4. Java核心-02 Exception和Error有什么区别?
  5. 记因为电脑名更改而导致sql server一直连接失败
  6. idea创建web项目,springboot项目,maven项目
  7. AWS云管理平台
  8. 【数位DP】[LOJ10163]Amount of Degrees
  9. springboot中pageHelper插件 list设置不进去 为null
  10. AutoIt自动化编程(1)【转】