摘要: 與自帶的slider不同的是，它是通過手勢滑動標尺得到取值，而不是通過滑動滑塊本身。
效果圖
場景
當一屏顯示不下，例如年齡體重選擇，金額選擇等大區間需要的選擇器，相比自帶的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>
實現bindscroll方法
bindscroll: function (e) { // deltaX 水平位置偏移位，每次滑動一次觸發一次，所以需要記錄從第一次觸發滑動起，一共滑動了多少距離 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次，效果表現為頁面加載很卡，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參數，相當于iOS里了UIScrollView的contentOffset，手動讓偏移到默認初值對應的坐標位置。
適配最小值
當業務場景需要做數據驗證，例如金額要>0，年齡要大于18歲等，就得適配極值。
that.setData({ amount: Math.floor(- deltaX / 10 + minValue)});同時要修正刻度線的x軸坐標
// 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);
最終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 最小刻度值 // 已經定義在全局，便于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的位數就加高 context.lineTo(origion.x + (i - minValue) * ratio, origion.y - (i % ratio == 0 ? heightDecimal : heightDigit)); // 設置屬性 context.setLineWidth(2); // 10的位數就加深 context.setStrokeStyle(i % ratio == 0 ? 'gray' : 'darkgray'); // 描線 context.stroke(); // 2.3 描繪文本標簽 context.setFillStyle('gray'); if (i % ratio == 0) { context.setFontSize(fontSize); // 為零補一個空格，讓它看起來2位數，頁面更整齊 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 水平位置偏移位，每次滑動一次觸發一次，所以需要記錄從第一次觸發滑動起，一共滑動了多少距離 deltaX += e.detail.deltaX; // 數據綁定 that.setData({ value: Math.floor(- deltaX / 10 + minValue) }); console.log(deltaX) }});以上所述是小編給大家介紹的微信小程序實現帶刻度尺滑塊功能，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對武林網網站的支持！
新聞熱點
疑難解答
