微信小程序 slider的简单实例

微信小程序 slider的简单实例

微信小程序 slider的简单实例

实现效果图：

微信小程序slider应用，可加减的slider控制

{{v.name}}

-

+

JAasoAYiyg

页面结构

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

})

}

})

感谢阅读，希望能帮助到大家，谢谢大家对本站的支持！

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。