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

bindscroll: function (e) {  // deltaX 水平位置偏移位，每次滑動(dòng)一次觸發(fā)一次，所以需要記錄從第一次觸發(fā)滑動(dòng)起，一共滑動(dòng)了多少距離  deltaX += e.detail.deltaX;  console.log(deltaX)}

const context = wx.createCanvasContext('canvas-ruler');// 移動(dòng)到原點(diǎn)context.moveTo(origion.x, origion.y);// 畫線到刻度高度context.lineTo(origion.x, origion.y - heightDecimal);// 設(shè)置屬性context.setLineWidth(1);// 描線context.stroke();// 描繪文本標(biāo)簽context.setFontSize(fontSize);context.fillText('0', origion.x - fontSize / 2, fontSize);context.draw();

for (var i = 0; i <= maxValue; i++) {  // 開始一個(gè)路徑，這條非常重要，否則會(huì)重復(fù)繪制之前的刻度n次，效果表現(xiàn)為頁面加載很卡，lineWidth得到的線很粗  context.beginPath();  // 繪制同上，不再贅述  ...  // 關(guān)閉一個(gè)路徑，它是可選的，調(diào)用過了beginPath，不關(guān)閉也沒有影響，保險(xiǎn)起見，加上它  context.closePath();}

drawCursor: function () {    /* 定義變量 */    // 定義三角形頂點(diǎn) TODO x    var center = {x: app.screenWidth / 2, y: 5};    // 定義三角形邊長(zhǎng)    var length = 20;    // 左端點(diǎn)    var left = {x: center.x - length / 2, y: center.y + length / 2 * Math.sqrt(3)};    // 右端點(diǎn)    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()描邊，于是省去手動(dòng)回歸原點(diǎn)，context.lineTo(center.x, center.y);    context.setFillStyle('#48c23d');    context.fill();    context.draw();  }

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

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

// 2.2 畫刻度線context.moveTo(origion.x + (i - minValue) * ratio, origion.y);// 畫線到刻度高度，10的位數(shù)就加高context.lineTo(origion.x + (i - minValue) * ratio, origion.y - (i % ratio == 0 ? heightDecimal : heightDigit));// 2.3 描繪文本標(biāo)簽context.fillText(i == 0 ? ' ' + i : i, origion.x + (i - minValue) * ratio - fontSize / 2, fontSize);

var that;var deltaX = 0;var minValue = 1;var app = getApp();Page({  data: {    value: 0,    canvasHeight: 80  },  onLoad: function (options) {    that = this;    // 繪制標(biāo)尺    that.drawRuler();    // 繪制三角形游標(biāo)    that.drawCursor();  },  drawRuler: function() {    /* 1.定義變量 */    // 1.1 定義原點(diǎn)與終點(diǎn)，x軸方向起點(diǎn)與終點(diǎn)各留半屏空白    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 定義文本標(biāo)簽字體大小    var fontSize = 20;    // 1.4 最小刻度值    // 已經(jīng)定義在全局，便于bindscroll訪問    // 1.5 總刻度值    var maxValue = 200;    // 1.6 當(dāng)前刻度值    var currentValue = 20;    // 1.7 每個(gè)刻度所占位的px    var ratio = 10;    // 1.8 畫布寬度    var canvasWidth = maxValue * ratio + app.screenWidth - minValue * ratio;    // 設(shè)定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的位數(shù)就加高      context.lineTo(origion.x + (i - minValue) * ratio, origion.y - (i % ratio == 0 ? heightDecimal : heightDigit));      // 設(shè)置屬性      context.setLineWidth(2);      // 10的位數(shù)就加深      context.setStrokeStyle(i % ratio == 0 ? 'gray' : 'darkgray');      // 描線      context.stroke();      // 2.3 描繪文本標(biāo)簽      context.setFillStyle('gray');      if (i % ratio == 0) {        context.setFontSize(fontSize);        // 為零補(bǔ)一個(gè)空格，讓它看起來2位數(shù)，頁面更整齊        context.fillText(i == 0 ? ' ' + i : i, origion.x + (i - minValue) * ratio - fontSize / 2, fontSize);      }      context.closePath();    }    // 2.4 繪制到context    context.draw();  },  drawCursor: function () {    /* 定義變量 */    // 定義三角形頂點(diǎn) TODO x    var center = {x: app.screenWidth / 2, y: 5};    // 定義三角形邊長(zhǎng)    var length = 20;    // 左端點(diǎn)    var left = {x: center.x - length / 2, y: center.y + length / 2 * Math.sqrt(3)};    // 右端點(diǎn)    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()描邊，于是省去手動(dòng)回歸原點(diǎn)，context.lineTo(center.x, center.y);    context.setFillStyle('#48c23d');    context.fill();    context.draw();  },  bindscroll: function (e) {    // deltaX 水平位置偏移位，每次滑動(dòng)一次觸發(fā)一次，所以需要記錄從第一次觸發(fā)滑動(dòng)起，一共滑動(dòng)了多少距離    deltaX += e.detail.deltaX;    // 數(shù)據(jù)綁定    that.setData({      value: Math.floor(- deltaX / 10 + minValue)    });    console.log(deltaX)  }});