Scale slider for mini program development to select reward amount function

Summary: Different from the built-in slider, it obtains the value by sliding the ruler through gestures, rather than sliding the slider itself.
Rendering

Picture: 1.gif

scene
When one screen cannot fit, such as age and weight selection, amount selection, and other selectors required for a large range, it is more intuitive than the built-in picker.
Idea:
First draw a scrollView 2 and load it into canvas
lineTo draws the scale segment, lineTo+fill draws the triangle cursor, and fillText draws the text label
Monitor the scale through bindscroll Touch event
Render the value to the page
Basic layout

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

Implement the bindscroll method

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

Delineate the scale

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();

Traverse the scale

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

Remember to call context.beginPath();
Draw the cursor

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

Painting ribbon A green equilateral triangle is used as the cursor. Note that the cursor is suspended, so another cancas is created to hold it. Of course, it's not necessary. It doesn't hurt to lazily Photoshop a triangle png instead. Even the scale can be generated using ae89cc1d5bca456c60a7b10985941a15 plus absolute positioning.
Define the default initial value of the scale

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

Bind the scroll-left parameter, which is equivalent to the contentOffset of UIScrollView in iOS, and manually offset it to the coordinate position corresponding to the default initial value.
Adapting the minimum value
When the business scenario requires data verification, for example, the amount must be >0, the age must be greater than 18 years old, etc., the extreme value must be adapted.

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

At the same time, the x-axis coordinate of the tick mark must be corrected

// 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);

Final js code

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(&#39;canvas-ruler&#39;);    // 遍历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 ? &#39;gray&#39; : &#39;darkgray&#39;);      // 描线
      context.stroke();      // 2.3 描绘文本标签
      context.setFillStyle(&#39;gray&#39;);      if (i % ratio == 0) {
        context.setFontSize(fontSize);        // 为零补一个空格，让它看起来2位数，页面更整齐
        context.fillText(i == 0 ? &#39; &#39; + 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(&#39;canvas-cursor&#39;);
    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(&#39;#48c23d&#39;);
    context.fill();
    context.draw();  },
  bindscroll: function (e) {    // deltaX 水平位置偏移位，每次滑动一次触发一次，所以需要记录从第一次触发滑动起，一共滑动了多少距离
    deltaX += e.detail.deltaX;    // 数据绑定
    that.setData({
      value: Math.floor(- deltaX / 10 + minValue)    });
    console.log(deltaX)  }});

The above is the detailed content of Scale slider for mini program development to select reward amount function. For more information, please follow other related articles on the PHP Chinese website!