微信小程序 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 相关文章推荐
Prototype1.5 rc2版指南最后一篇之Position
Jan 10 Javascript
javascript的渐进增强与平稳退化浅谈
Nov 12 Javascript
jQuery如何实现点击页面获得当前点击元素的id或其他信息
Jan 09 Javascript
javascript+html5实现绘制圆环的方法
Jul 28 Javascript
jQuery实现滚动切换的tab选项卡效果代码
Aug 26 Javascript
JavaScript reduce和reduceRight详解
Oct 24 Javascript
jQuery生成假加载动画效果
Dec 01 Javascript
JavaScript通过改变文字透明度实现的文字闪烁效果实例
Apr 27 Javascript
Vue resource中的GET与POST请求的实例代码
Jul 21 Javascript
Vue实现双向绑定的原理以及响应式数据的方法
Jul 02 Javascript
JavaScript中break、continue和return的用法区别实例分析
Mar 02 Javascript
js事件机制----捕获与冒泡机制实例分析
May 22 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
全国FM电台频率大全 - 23 四川省
2020/03/11 无线电
PHP的switch判断语句的“高级”用法详解
2014/10/01 PHP
讲解WordPress中用于获取评论模板和搜索表单的PHP函数
2015/12/28 PHP
基于laravel制作APP接口(API)
2016/03/15 PHP
[原创]PHP实现字节数Byte转换为KB、MB、GB、TB的方法
2017/08/31 PHP
laravel Task Scheduling(任务调度)在windows下的使用详解
2019/10/22 PHP
javascript firefox不显示本地预览图片问题的解决方法
2008/11/12 Javascript
jquery checkbox,radio是否选中的判断代码
2010/03/20 Javascript
js 绑定带参数的事件以及手动触发事件
2010/04/27 Javascript
JavaScript 判断指定字符串是否为有效数字
2010/05/11 Javascript
jQuery.holdReady()方法用法实例
2014/12/27 Javascript
Webpack 实现 AngularJS 的延迟加载
2016/03/02 Javascript
javascript的理解及经典案例分析
2016/05/20 Javascript
jQuery设置Easyui校验规则(推荐)
2016/11/21 Javascript
node.js平台下的mysql数据库配置及连接
2017/03/31 Javascript
Angular 4依赖注入学习教程之ValueProvider的使用(七)
2017/06/04 Javascript
基于require.js的使用(实例讲解)
2017/09/07 Javascript
React中常见的动画实现的几种方式
2018/01/10 Javascript
jQuery操作元素的内容和样式完整实例分析
2020/01/10 jQuery
如何构建一个Vue插件并生成npm包
2020/10/26 Javascript
vue使用echarts图表自适应的几种解决方案
2020/12/04 Vue.js
python代码制作configure文件示例
2014/07/28 Python
python常规方法实现数组的全排列
2015/03/17 Python
理解python正则表达式
2016/01/15 Python
Python为何不能用可变对象作为默认参数的值
2019/07/01 Python
Python 创建TCP服务器的方法
2020/07/28 Python
利用CSS3实现折角效果实例源码
2016/09/28 HTML / CSS
阿里巴巴国际站:Alibaba.com
2016/07/21 全球购物
TUMI马来西亚官方网站:国际领先的高品质商旅箱包品牌
2018/04/26 全球购物
巴西最好的男鞋:Rafarillo
2018/05/25 全球购物
有趣的睡衣和礼物:LazyOne
2019/11/27 全球购物
初一英语教学反思
2014/01/11 职场文书
人力资源部经理岗位职责规定
2014/02/23 职场文书
冰峪沟导游词
2015/02/09 职场文书
2016年小学圣诞节活动总结
2016/03/31 职场文书
Win10开机修复磁盘错误怎么跳过?Win10关闭开机磁盘检查的方法
2022/09/23 数码科技