小程序開發(fā)之如何實現(xiàn)刻度尺滑塊選擇打賞金額功能

這篇文章主要介紹小程序開發(fā)之如何實現(xiàn)刻度尺滑塊選擇打賞金額功能 ，文中介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們一定要看完！

場景
當一屏顯示不下，例如年齡體重選擇，金額選擇等大區(qū)間需要的選擇器，相比自帶的picker要直觀一些。
思路：
先畫一個scrollView 2 裝進canvas
lineTo畫刻度線段，lineTo+fill畫出三角形游標，fillText描繪文本標簽
通過bindscroll監(jiān)聽刻度尺觸摸事件
渲染取值到頁面
基本布局

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

實現(xiàn)bindscroll方法

bindscroll: function (e) {  // deltaX 水平位置偏移位，每次滑動一次觸發(fā)一次，所以需要記錄從第一次觸發(fā)滑動起，一共滑動了多少距離
  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次，效果表現(xià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="pw_scrollLeft">

綁定scroll-left參數(shù)，相當于iOS里了UIScrollView的contentOffset，手動讓偏移到默認初值對應的坐標位置。
適配最小值
當業(yè)務場景需要做數(shù)據(jù)驗證，例如金額要>0，年齡要大于18歲等，就得適配極值。

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

同時要修正刻度線的x軸坐標

// 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 描繪文本標簽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 最小刻度值    // 已經(jīng)定義在全局，便于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的位數(shù)就加高
      context.lineTo(origion.x + (i - minValue) * ratio, origion.y - (i % ratio == 0 ? heightDecimal : heightDigit));      // 設置屬性
      context.setLineWidth(2);      // 10的位數(shù)就加深
      context.setStrokeStyle(i % ratio == 0 ? 'gray' : 'darkgray');      // 描線
      context.stroke();      // 2.3 描繪文本標簽
      context.setFillStyle('gray');      if (i % ratio == 0) {
        context.setFontSize(fontSize);        // 為零補一個空格，讓它看起來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 () {    /* 定義變量 */// 定義三角形頂點 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 水平位置偏移位，每次滑動一次觸發(fā)一次，所以需要記錄從第一次觸發(fā)滑動起，一共滑動了多少距離
    deltaX += e.detail.deltaX;    // 數(shù)據(jù)綁定
    that.setData({
      value: Math.floor(- deltaX / 10 + minValue)    });
    console.log(deltaX)  }});

以上是“小程序開發(fā)之如何實現(xiàn)刻度尺滑塊選擇打賞金額功能 ”這篇文章的所有內容，感謝各位的閱讀！希望分享的內容對大家有幫助，更多相關知識，歡迎關注億速云行業(yè)資訊頻道！