189 8069 5689

微信小程序slider的简单实例

微信小程序 slider的简单实例

创新互联公司成立与2013年,是专业互联网技术服务公司,拥有项目成都网站设计、做网站网站策划,项目实施与项目整合能力。我们以让每一个梦想脱颖而出为使命,1280元集宁做网站,已为上家服务,为集宁各地企业和个人服务,联系电话:18980820575

实现效果图:

微信小程序 slider的简单实例

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


  
   
    {{v.name}}
    
     -
     
     
     +
    
   
  
 

页面结构

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

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


分享题目:微信小程序slider的简单实例
文章源于:http://cdxtjz.com/article/gedghh.html

其他资讯