微信小程序实现带刻度尺滑块功能


Posted in Javascript onMarch 29, 2017

摘要: 与自带的slider不同的是,它是通过手势滑动标尺得到取值,而不是通过滑动滑块本身。

效果图

微信小程序实现带刻度尺滑块功能

场景

当一屏显示不下,例如年龄体重选择,金额选择等大区间需要的选择器,相比自带的picker要直观一些。

思路:

先画一个scrollView 2 装进canvas

lineTo画刻度线段,lineTo+fill画出三角形游标,fillText描绘文本标签

通过bindscroll监听刻度尺触摸事件

渲染取值到页面

基本布局

<scroll-view scroll-x="true" bindscroll="bindscroll">
  <canvas canvas-id="canvas" id="canvas"></canvas>
</scroll-view>

实现bindscroll方法

bindscroll: function (e) {
  // deltaX 水平位置偏移位,每次滑动一次触发一次,所以需要记录从第一次触发滑动起,一共滑动了多少距离
  deltaX += e.detail.deltaX;
  console.log(deltaX)
}

描绘刻度

const context = wx.createCanvasContext('canvas-ruler');
// 移动到原点
context.moveTo(origion.x, origion.y);
// 画线到刻度高度
context.lineTo(origion.x, origion.y - heightDecimal);
// 设置属性
context.setLineWidth(1);
// 描线
context.stroke();
// 描绘文本标签
context.setFontSize(fontSize);
context.fillText('0', origion.x - fontSize / 2, fontSize);
context.draw();

遍历刻度

for (var i = 0; i <= maxValue; i++) {
  // 开始一个路径,这条非常重要,否则会重复绘制之前的刻度n次,效果表现为页面加载很卡,lineWidth得到的线很粗
  context.beginPath();
  // 绘制同上,不再赘述
  ...
  // 关闭一个路径,它是可选的,调用过了beginPath,不关闭也没有影响,保险起见,加上它
  context.closePath();
}

切记要调用context.beginPath();

描绘游标

drawCursor: function () {
    /* 定义变量 */
    // 定义三角形顶点 TODO x
    var center = {x: app.screenWidth / 2, y: 5};
    // 定义三角形边长
    var length = 20;
    // 左端点
    var left = {x: center.x - length / 2, y: center.y + length / 2 * Math.sqrt(3)};
    // 右端点
    var right = {x: center.x + length / 2, y: center.y + length / 2 * Math.sqrt(3)};
    // 初始化context
    const context = wx.createCanvasContext('canvas-cursor');
    context.moveTo(center.x, center.y);
    context.lineTo(left.x, left.y);
    context.lineTo(right.x, right.y);
    // fill()填充而不是stroke()描边,于是省去手动回归原点,context.lineTo(center.x, center.y);
    context.setFillStyle('#48c23d');
    context.fill();
    context.draw();
  }

画带一个绿色的正三角形作为游标,注意游标是悬浮不动的,所以另起一个cancas来装它。当然它不是必须的,偷个懒ps一张三角形的png代替也无妨,甚至刻度其实也可以用<view style="background: gray; width: 2px;">加绝对定位来生成的。

定义刻度默认初值

that.setData({
    scrollLeft: (currentValue - minValue) * ratio
});
<scroll-view scroll-x="true" bindscroll="bindscroll" scroll-left="{{scrollLeft}}">

绑定scroll-left参数,相当于iOS里了UIScrollView的contentOffset,手动让偏移到默认初值对应的坐标位置。

适配最小值

当业务场景需要做数据验证,例如金额要>0,年龄要大于18岁等,就得适配极值。

that.setData({
    amount: Math.floor(- deltaX / 10 + minValue)
});

同时要修正刻度线的x轴坐标

// 2.2 画刻度线
context.moveTo(origion.x + (i - minValue) * ratio, origion.y);
// 画线到刻度高度,10的位数就加高
context.lineTo(origion.x + (i - minValue) * ratio, origion.y - (i % ratio == 0 ? heightDecimal : heightDigit));
// 2.3 描绘文本标签
context.fillText(i == 0 ? ' ' + i : i, origion.x + (i - minValue) * ratio - fontSize / 2, fontSize);

最终js代码

var that;
var deltaX = 0;
var minValue = 1;
var app = getApp();
Page({
  data: {
    value: 0,
    canvasHeight: 80
  },
  onLoad: function (options) {
    that = this;
    // 绘制标尺
    that.drawRuler();
    // 绘制三角形游标
    that.drawCursor();
  },
  drawRuler: function() {
    /* 1.定义变量 */
    // 1.1 定义原点与终点,x轴方向起点与终点各留半屏空白
    var origion = {x: app.screenWidth / 2, y: that.data.canvasHeight};
    var end = {x: app.screenWidth / 2, y: that.data.canvasHeight};
    // 1.2 定义刻度线高度
    var heightDecimal = 50;
    var heightDigit = 25;
    // 1.3 定义文本标签字体大小
    var fontSize = 20;
    // 1.4 最小刻度值
    // 已经定义在全局,便于bindscroll访问
    // 1.5 总刻度值
    var maxValue = 200;
    // 1.6 当前刻度值
    var currentValue = 20;
    // 1.7 每个刻度所占位的px
    var ratio = 10;
    // 1.8 画布宽度
    var canvasWidth = maxValue * ratio + app.screenWidth - minValue * ratio;
    // 设定scroll-view初始偏移
    that.setData({
      canvasWidth: canvasWidth,
      scrollLeft: (currentValue - minValue) * ratio
    });
    /* 2.绘制 */
    // 2.1初始化context
    const context = wx.createCanvasContext('canvas-ruler');
    // 遍历maxValue
    for (var i = 0; i <= maxValue; i++) {
      context.beginPath();
      // 2.2 画刻度线
      context.moveTo(origion.x + (i - minValue) * ratio, origion.y);
      // 画线到刻度高度,10的位数就加高
      context.lineTo(origion.x + (i - minValue) * ratio, origion.y - (i % ratio == 0 ? heightDecimal : heightDigit));
      // 设置属性
      context.setLineWidth(2);
      // 10的位数就加深
      context.setStrokeStyle(i % ratio == 0 ? 'gray' : 'darkgray');
      // 描线
      context.stroke();
      // 2.3 描绘文本标签
      context.setFillStyle('gray');
      if (i % ratio == 0) {
        context.setFontSize(fontSize);
        // 为零补一个空格,让它看起来2位数,页面更整齐
        context.fillText(i == 0 ? ' ' + i : i, origion.x + (i - minValue) * ratio - fontSize / 2, fontSize);
      }
      context.closePath();
    }
    // 2.4 绘制到context
    context.draw();
  },
  drawCursor: function () {
    /* 定义变量 */
    // 定义三角形顶点 TODO x
    var center = {x: app.screenWidth / 2, y: 5};
    // 定义三角形边长
    var length = 20;
    // 左端点
    var left = {x: center.x - length / 2, y: center.y + length / 2 * Math.sqrt(3)};
    // 右端点
    var right = {x: center.x + length / 2, y: center.y + length / 2 * Math.sqrt(3)};
    // 初始化context
    const context = wx.createCanvasContext('canvas-cursor');
    context.moveTo(center.x, center.y);
    context.lineTo(left.x, left.y);
    context.lineTo(right.x, right.y);
    // fill()填充而不是stroke()描边,于是省去手动回归原点,context.lineTo(center.x, center.y);
    context.setFillStyle('#48c23d');
    context.fill();
    context.draw();
  },
  bindscroll: function (e) {
    // deltaX 水平位置偏移位,每次滑动一次触发一次,所以需要记录从第一次触发滑动起,一共滑动了多少距离
    deltaX += e.detail.deltaX;
    // 数据绑定
    that.setData({
      value: Math.floor(- deltaX / 10 + minValue)
    });
    console.log(deltaX)
  }
});

以上所述是小编给大家介绍的微信小程序实现带刻度尺滑块功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
Node.js中AES加密和其它语言不一致问题解决办法
Mar 10 Javascript
jQuery中:header选择器用法实例
Dec 29 Javascript
javascript实现拖放效果
Dec 16 Javascript
localStorage的黑科技-js和css缓存机制
Feb 06 Javascript
JavaScript该如何学习 怎样轻松学习JavaScript
Jun 12 Javascript
Vue.js实现实例搜索应用功能详细代码
Aug 24 Javascript
Vue 中mixin 的用法详解
Apr 23 Javascript
Node错误处理笔记之挖坑系列教程
Jun 05 Javascript
vue+springmvc导出excel数据的实现代码
Jun 27 Javascript
微信小程序列表时间戳转换实现过程解析
Oct 12 Javascript
javascript绘制简单钟表效果
Apr 07 Javascript
vue中利用mqtt服务端实现即时通讯的步骤记录
Jul 01 Vue.js
Javascript 详解封装from表单数据为json串进行ajax提交
Mar 29 #Javascript
详解如何在Vue2中实现组件props双向绑定
Mar 29 #Javascript
整理关于Bootstrap警示框的慕课笔记
Mar 29 #Javascript
node.js程序作为服务并在windows下开机自启动(用forever)
Mar 29 #Javascript
jQuery实现字体颜色渐变效果的方法
Mar 29 #jQuery
整理关于Bootstrap导航的慕课笔记
Mar 29 #Javascript
javascript 中Cookie读、写与删除操作
Mar 29 #Javascript
You might like
使用Smarty 获取当前日期时间和格式化日期时间的方法详解
2013/06/18 PHP
腾讯微博提示missing parameter errorcode 102 错误的解决方法
2014/12/22 PHP
PHP 生成N个不重复的随机数
2015/01/21 PHP
php实现的微信红包算法分析(非官方)
2015/09/25 PHP
PHP+iframe模拟Ajax上传文件功能示例
2019/07/02 PHP
php设计模式之抽象工厂模式分析【星际争霸游戏案例】
2020/01/23 PHP
表单提交验证类
2006/07/14 Javascript
Javascript JSQL,SQL无处不在,
2010/05/05 Javascript
在VS2008中使用jQuery智能感应的方法
2010/12/30 Javascript
js中访问html中iframe的文档对象的代码[IE6,IE7,IE8,FF]
2011/01/08 Javascript
javascript Array.prototype.slice的使用示例
2013/11/14 Javascript
jquery对象和javascript对象即DOM对象相互转换
2014/08/07 Javascript
jQuery时间插件jquery.clock.js用法实例(5个示例)
2016/01/14 Javascript
浅析JavaScript中的对象类型Object
2016/05/26 Javascript
vue项目中使用tinymce编辑器的步骤详解
2018/09/11 Javascript
浅谈JavaScript面向对象--继承
2019/03/20 Javascript
如何从零开始手写Koa2框架
2019/03/22 Javascript
layui前端时间戳转化实例
2019/11/15 Javascript
Vue实现base64编码图片间的切换功能
2019/12/04 Javascript
借助云开发实现小程序短信验证码的发送
2020/01/06 Javascript
浅谈python类属性的访问、设置和删除方法
2016/07/25 Python
python用reduce和map把字符串转为数字的方法
2016/12/19 Python
Python基于动态规划算法解决01背包问题实例
2017/12/06 Python
Python读取MRI并显示为灰度图像实例代码
2018/01/03 Python
python字典快速保存于读取的方法
2018/03/23 Python
python pandas 对时间序列文件处理的实例
2018/06/22 Python
Python设置在shell脚本中自动补全功能的方法
2018/06/25 Python
基于python实现KNN分类算法
2020/04/23 Python
python实现五子棋人机对战游戏
2020/03/25 Python
Flask框架单例模式实现方法详解
2019/07/31 Python
python中数字是否为可变类型
2020/07/08 Python
python之随机数函数的实现示例
2020/12/30 Python
雷朋巴西官方商店:Ray-Ban Brasil
2020/07/21 全球购物
货物运输服务质量承诺书
2014/05/29 职场文书
2015庆祝七一建党节94周年活动总结
2015/03/20 职场文书
用python开发一款操作MySQL的小工具
2021/05/12 Python