微信小程序實現(xiàn)帶刻度尺滑塊功能

更新時間：2017年03月29日 11:28:56 投稿：mrr

這篇文章主要介紹了微信小程序實現(xiàn)帶刻度尺滑塊功能，非常不錯，具有參考借鑒價值，需要的朋友可以參考下

摘要: 與自帶的slider不同的是，它是通過手勢滑動標尺得到取值，而不是通過滑動滑塊本身。

效果圖

場景

當一屏顯示不下，例如年齡體重選擇，金額選擇等大區(qū)間需要的選擇器，相比自帶的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>

實現(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="{{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)
  }
});

以上所述是小編給大家介紹的微信小程序實現(xiàn)帶刻度尺滑塊功能，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！

JavaScript防止全局變量污染的方法總結
這篇文章主要介紹了JavaScript防止全局變量污染的方法,結合實例形式較為詳細的總結分析了JavaScript防止全局變量污染的常用操作技巧與注意事項,需要的朋友可以參考下
2018-08-08
javascript實現(xiàn)點擊按鈕變色
這篇文章主要為大家詳細介紹了javascript實現(xiàn)點擊按鈕變色，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2022-07-07
JavaScript表單驗證實例之驗證表單項是否為空
表單驗證幾乎在每個需要注冊或者是登錄的網(wǎng)站都是必不可少，下面通過本篇文章給大家介紹JavaScript表單驗證實例之驗證表單項是否為空，涉及到js表單驗證實例相關知識，對js表單驗證實例代碼需要的朋友一起學習吧
2016-01-01
el-tree限制選中個數(shù)的實例
這篇文章主要介紹了el-tree限制選中個數(shù),本文通過實例代碼給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友參考下吧
2024-08-08
uniapp微信小程序支付前端生成簽名并調起微信支付全部代碼
想要在uniapp中實現(xiàn)支付功能,通常需要使用第三方支付服務,如微信支付、支付寶支付,等這篇文章主要給大家介紹了關于uniapp微信小程序支付前端生成簽名并調起微信支付的相關資料,需要的朋友可以參考下
2024-07-07
小程序如何構建骨架屏
最近在移動端上面看到不同于菊花圖的加載方式，就是這篇文章需要分享的Skeleton Screen，中文稱之為"骨架屏"，下面我們來簡單了解一下吧
2019-05-05
JavaScript數(shù)組類型Array相關的屬性與方法詳解
這篇文章主要給大家介紹了關于JavaScript數(shù)組類型Array相關的屬性與方法的相關資料，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2020-09-09
通過掃小程序碼實現(xiàn)網(wǎng)站登陸功能
這篇文章主要介紹了通過掃小程序碼實現(xiàn)網(wǎng)站登陸功能,本文通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友可以參考下
2019-08-08
淺析javascript中的Event事件
本文主要對javascript中的（Event）事件進行介紹，文章篇尾舉了幾個案例：方塊隨著鼠標移動；輸入框文字提示；仿select控件；留言本；自定義右鍵菜單；鍵盤控制div運動。需要的朋友可以看下
2016-12-12
JS實現(xiàn)讀取xml內(nèi)容并輸出到div中的方法示例
這篇文章主要介紹了JS實現(xiàn)讀取xml內(nèi)容并輸出到div中的方法,涉及javascript針對xml格式數(shù)據(jù)的讀取、遍歷、輸出等相關操作技巧,需要的朋友可以參考下
2018-04-04