微信小程序 slider的简单实例


Posted in Javascript onApril 19, 2017

微信小程序 slider的简单实例

实现效果图:

微信小程序 slider的简单实例

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

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

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

Javascript 相关文章推荐
jQuery lazyLoad图片延迟加载插件的优化改造方法分享
Aug 13 Javascript
jQuery实现动画效果的简单实例
Jan 27 Javascript
Javascript让DEDECMS告别手写Tag
Sep 01 Javascript
javascript抽象工厂模式详细说明
Dec 16 Javascript
Angularjs处理页面闪烁的解决方法
Mar 09 Javascript
详谈js遍历集合(Array,Map,Set)
Apr 06 Javascript
vue.js内置组件之keep-alive组件使用
Jul 10 Javascript
详解微信图片防盗链“此图片来自微信公众平台 未经允许不得引用”的解决方案
Apr 04 Javascript
JS学习笔记之原型链和利用原型实现继承详解
May 29 Javascript
Vue实现日历小插件
Jun 26 Javascript
vue-cli在 history模式下的配置详解
Nov 26 Javascript
JavaScript获取时区实现过程解析
Sep 24 Javascript
详解Node.js中exports和module.exports的区别
Apr 19 #Javascript
jQuery ajax请求struts action实现异步刷新
Apr 19 #jQuery
JS正则验证多个邮箱完整实例【邮箱用分号隔开】
Apr 19 #Javascript
微信小程序 登录的简单实现
Apr 19 #Javascript
微信小程序开发入门基础教程
Apr 19 #Javascript
微信小程序教程系列之视图层的条件渲染(10)
Apr 19 #Javascript
JS实现AES加密并与PHP互通的方法分析
Apr 19 #Javascript
You might like
php文件操作实例代码
2012/05/10 PHP
SESSION信息保存在哪个文件目录下以及能够用来保存什么类型的数据
2012/06/17 PHP
php中文字符串截取方法实例总结
2014/09/30 PHP
php简单实现快速排序的方法
2015/04/04 PHP
php操作mongodb封装类与用法实例
2018/09/01 PHP
yii2.0框架使用 beforeAction 防非法登陆的方法分析
2019/09/11 PHP
解决在laravel中auth建立时候遇到的问题
2019/10/15 PHP
laravel解决迁移文件一次删除创建字段报错的问题
2019/10/24 PHP
JS 创建对象(常见的几种方法)
2008/11/03 Javascript
javascript 学习之旅 (2)
2009/02/05 Javascript
Javascript Math对象
2009/08/13 Javascript
Jquery中ajax方法data参数的用法小结
2014/02/12 Javascript
js图片滚动效果时间可随意设定当鼠标移上去时停止
2014/06/26 Javascript
JavaScript indexOf方法入门实例(计算指定字符在字符串中首次出现的位置)
2014/10/17 Javascript
jQuery选择器全集详解
2014/11/24 Javascript
jQuery插件windowScroll实现单屏滚动特效
2015/07/14 Javascript
vue实现验证码输入框组件
2017/12/14 Javascript
Node.JS循环删除非空文件夹及子目录下的所有文件
2018/03/12 Javascript
详解Axios统一错误处理与后置
2018/09/26 Javascript
python基于BeautifulSoup实现抓取网页指定内容的方法
2015/07/09 Python
Python实现Youku视频批量下载功能
2017/03/14 Python
Python学习小技巧之列表项的拼接
2017/05/20 Python
解决Pycharm中import时无法识别自己写的程序方法
2018/05/18 Python
python文件转为exe文件的方法及用法详解
2019/07/08 Python
np.newaxis 实现为 numpy.ndarray(多维数组)增加一个轴
2019/11/30 Python
python 对象真假值的实例(哪些视为False)
2020/12/11 Python
你可能不熟练的十个前端HTML5经典面试题
2018/07/03 HTML / CSS
俄罗斯最大的香水和化妆品网上商店:Randewoo
2020/11/05 全球购物
绩效专员岗位职责
2013/12/02 职场文书
电气个人求职信范文
2014/02/04 职场文书
《蒲公英》教学反思
2014/02/28 职场文书
毕业典礼演讲稿
2014/05/13 职场文书
党的群众路线教育实践活动调研报告
2014/11/03 职场文书
三年级学生期末评语
2014/12/26 职场文书
公务员个人总结
2015/02/12 职场文书
乱世佳人观后感
2015/06/08 职场文书