微信小程序?qū)崿F(xiàn)帶刻度尺滑塊

效果圖

輸入圖片說明
輸入圖片說明

場景

當(dāng)一屏顯示不下，例如年齡體重選擇，金額選擇等大區(qū)間需要的選擇器，相比自帶的picker要直觀一些。

思路：

  1. 先畫一個scrollView
    2 裝進canvas
  2. lineTo畫刻度線段，lineTo+fill畫出三角形游標(biāo)，fillText描繪文本標(biāo)簽
  3. 通過bindscroll監(jiān)聽刻度尺觸摸事件
  4. 渲染取值到頁面

基本布局

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

切記要調(diào)用context.beginPath();

描繪游標(biāo)

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

畫帶一個綠色的正三角形作為游標(biāo)，注意游標(biāo)是懸浮不動的，所以另起一個cancas來裝它。當(dāng)然它不是必須的，偷個懶ps一張三角形的png代替也無妨，甚至刻度其實也可以用<view style="background: gray; width: 2px;">加絕對定位來生成的。

定義刻度默認(rèn)初值

that.setData({
        scrollLeft: (currentValue - minValue) * ratio
});

<scroll-view scroll-x="true" bindscroll="bindscroll" scroll-left="{{scrollLeft}}">

綁定scroll-left參數(shù)，相當(dāng)于iOS里了UIScrollView的contentOffset，手動讓偏移到默認(rèn)初值對應(yīng)的坐標(biāo)位置。

適配最小值

當(dāng)業(yè)務(wù)場景需要做數(shù)據(jù)驗證，例如金額要>0，年齡要大于18歲等，就得適配極值。

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

同時要修正?刻度線的x軸坐標(biāo)

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

最終js代碼

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 定義原點與終點，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 定義文本標(biāo)簽字體大小
        var fontSize = 20;
        // 1.4 最小刻度值
        // 已經(jīng)定義在全局，便于bindscroll訪問
        // 1.5 總刻度值
        var maxValue = 200;
        // 1.6 當(dāng)前刻度值
        var currentValue = 20;
        // 1.7 每個刻度所占位的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);
                // 為零補一個空格，讓它看起來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)
    }
});

源碼下載：http://git.oschina.net/dotton/lendoo-wx，本文涉及代碼存于/pages/member/donate文件夾中。

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容