Skalieren Sie den Schieberegler für die Entwicklung von Miniprogrammen, um die Funktion für den Belohnungsbetrag auszuwählen

Zusammenfassung: Im Gegensatz zum integrierten Schieberegler erhält er den Wert durch Verschieben des Lineals durch Gesten und nicht durch Verschieben des Schiebereglers selbst.
Rendering

Bild: 1.gif

Szene
Wenn ein Bildschirm nicht passt, z. B. Alters- und Gewichtsauswahl, Mengenauswahl und andere Auswahlmöglichkeiten, die in einem großen Bereich benötigt werden, ist er intuitiver als die integrierte Auswahl.
Idee:
Zeichnen Sie zuerst eine scrollView 2 und laden Sie sie in die Leinwand
lineTo zeichnet das Skalensegment, lineTo+fill zeichnet den Dreieckscursor und fillText zeichnet die Textbeschriftung
Überwachen Sie die Skalierung durch das Bindscroll Touch-Ereignis
Den Wert auf der Seite rendern
Grundlayout

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

Implementieren Sie die Bindscroll-Methode

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

Begrenzen Sie die Skala

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

Durchlaufen Sie die Skala

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

Denken Sie daran, context.beginPath();
aufzurufen Zeichnen Sie den 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();  }

Zeichnen Sie ein grünes gleichseitiges Dreieck als Cursor. Beachten Sie, dass der Cursor in der Schwebe ist. Erstellen Sie daher einen weiteren Cancas, um ihn zu halten. Natürlich schadet es nicht, stattdessen einfach ein Dreiecks-PNG zu erstellen. Sogar die Skalierung kann mit erstellt werden.
Definieren Sie den Standardanfangswert der Skala

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

Binden Sie den Scroll-Left-Parameter, der dem contentOffset von UIScrollView in iOS entspricht, und versetzen Sie ihn manuell auf den Koordinaten, die dem Standardanfangswert „Location“ entsprechen.
An den Mindestwert anpassen
Wenn das Geschäftsszenario beispielsweise eine Datenüberprüfung erfordert, muss der Betrag > 0 sein, das Alter muss größer als 18 Jahre sein usw., Sie müssen sich an den Extremwert anpassen.

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

Gleichzeitig sollte die x-Achsen-Koordinate des Häkchens korrigiert werden

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

Endgültiger 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)  }});

Das obige ist der detaillierte Inhalt vonSkalieren Sie den Schieberegler für die Entwicklung von Miniprogrammen, um die Funktion für den Belohnungsbetrag auszuwählen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!