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


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 相关文章推荐
ASP 过滤数组重复数据函数(加强版)
May 31 Javascript
DOM基础教程之事件对象
Jan 20 Javascript
jQuery动画出现连续触发、滞后反复执行的解决方法
Jan 28 Javascript
浅谈JavaScript字符串与数组
Jun 03 Javascript
JavaScript DOM节点操作方法总结
Aug 23 Javascript
js实现省市级联效果分享
Aug 10 Javascript
jQuery实现表单动态添加数据并提交的方法
Jul 19 jQuery
JS面向对象编程实现的Tab选项卡案例详解
Mar 03 Javascript
js实现动态时钟
Mar 12 Javascript
js实现简单的点名器随机色实例代码
Sep 20 Javascript
vue使用openlayers实现移动点动画
Sep 24 Javascript
swiper4实现移动端导航栏tab滑动切换
Oct 16 Javascript
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
Zerg剧情介绍
2020/03/14 星际争霸
降低PHP Redis内存占用
2017/03/23 PHP
event.srcElement+表格应用
2006/08/29 Javascript
图片自动更新(说明)
2006/10/02 Javascript
我也种棵OO树JXTree[js+css+xml]
2007/04/02 Javascript
jQuery 创建Dom元素
2010/05/07 Javascript
六款帮助你实现惊艳视差滚动效果的jQuery插件
2012/09/14 Javascript
nodejs中实现sleep功能实例
2015/03/24 NodeJs
javascript跨域的方法汇总
2015/10/23 Javascript
AngularJS报错$apply already in progress的解决方法分析
2017/01/30 Javascript
基于代数方程库Algebra.js解二元一次方程功能示例
2017/06/09 Javascript
vue+iview+less+echarts实战项目总结
2018/02/22 Javascript
nodejs简单访问及操作mysql数据库的方法示例
2018/03/15 NodeJs
layui radio性别单选框赋值方法
2018/08/15 Javascript
使用vue开发移动端管理后台的注意事项
2019/03/07 Javascript
用Vue.js方法创建模板并使用多个模板合成
2019/06/28 Javascript
浅谈vue-router路由切换 组件重用挖下的坑
2019/11/01 Javascript
Javascript实现鼠标移入方向感知
2020/06/24 Javascript
python 快速排序代码
2009/11/23 Python
解密Python中的描述符(descriptor)
2015/06/03 Python
Python爬虫代理IP池实现方法
2017/01/05 Python
获取Django项目的全部url方法详解
2017/10/26 Python
使用Python处理BAM的方法
2018/09/28 Python
Python爬取数据保存为Json格式的代码示例
2019/04/09 Python
对python3 sort sorted 函数的应用详解
2019/06/27 Python
详解Python对JSON中的特殊类型进行Encoder
2019/07/15 Python
python add_argument()用法解析
2020/01/29 Python
numpy中生成随机数的几种常用函数(小结)
2020/08/18 Python
python中pickle模块浅析
2020/12/29 Python
HTML5之WebGL 3D概述(上)—WebGL原生开发开启网页3D渲染新时代
2013/01/31 HTML / CSS
Algenist奥杰尼官网:微藻抗衰老护肤品牌
2017/07/15 全球购物
学校春季防火方案
2014/06/08 职场文书
盘点2020年适合农村地区创业的项目
2019/10/16 职场文书
Oracle笔记
2021/04/05 Oracle
opencv 分类白天与夜景视频的方法
2021/06/05 Python
python缺失值填充方法示例代码
2022/12/24 Python