摘要: 與自帶的slider不同的是，它是通過(guò)手勢(shì)滑動(dòng)標(biāo)尺得到取值，而不是通過(guò)滑動(dòng)滑塊本身。
創(chuàng)新互聯(lián)建站成立與2013年，是專業(yè)互聯(lián)網(wǎng)技術(shù)服務(wù)公司，擁有項(xiàng)目成都網(wǎng)站設(shè)計(jì)、成都做網(wǎng)站網(wǎng)站策劃，項(xiàng)目實(shí)施與項(xiàng)目整合能力。我們以讓每一個(gè)夢(mèng)想脫穎而出為使命，1280元中陽(yáng)做網(wǎng)站,已為上家服務(wù),為中陽(yáng)各地企業(yè)和個(gè)人服務(wù),聯(lián)系電話:18982081108
效果圖
場(chǎng)景
當(dāng)一屏顯示不下，例如年齡體重選擇，金額選擇等大區(qū)間需要的選擇器，相比自帶的picker要直觀一些。
思路：
先畫一個(gè)scrollView 2 裝進(jìn)canvas
lineTo畫刻度線段，lineTo+fill畫出三角形游標(biāo)，fillText描繪文本標(biāo)簽
通過(guò)bindscroll監(jiān)聽刻度尺觸摸事件
渲染取值到頁(yè)面
基本布局
實(shí)現(xiàn)bindscroll方法
重慶分公司
重慶分公司
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)為頁(yè)面加載很卡，lineWidth得到的線很粗
context.beginPath();
// 繪制同上，不再贅述
...
// 關(guān)閉一個(gè)路徑，它是可選的，調(diào)用過(guò)了beginPath，不關(guān)閉也沒有影響，保險(xiǎn)起見，加上它
context.closePath();
}切記要調(diào)用context.beginPath();
描繪游標(biāo)
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();
}畫帶一個(gè)綠色的正三角形作為游標(biāo)，注意游標(biāo)是懸浮不動(dòng)的，所以另起一個(gè)cancas來(lái)裝它。當(dāng)然它不是必須的，偷個(gè)懶ps一張三角形的png代替也無(wú)妨，甚至刻度其實(shí)也可以用
定義刻度默認(rèn)初值
that.setData({
scrollLeft: (currentValue - minValue) * ratio
});
綁定scroll-left參數(shù)，相當(dāng)于iOS里了UIScrollView的contentOffset，手動(dòng)讓偏移到默認(rèn)初值對(duì)應(yīng)的坐標(biāo)位置。
適配最小值
當(dāng)業(yè)務(wù)場(chǎng)景需要做數(shù)據(jù)驗(yàn)證，例如金額要>0，年齡要大于18歲等，就得適配極值。
that.setData({
amount: Math.floor(- deltaX / 10 + minValue)
});同時(shí)要修正刻度線的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 定義原點(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訪問(wèn)
// 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è)空格，讓它看起來(lái)2位數(shù)，頁(yè)面更整齊
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)
}
});以上所述是小編給大家介紹的微信小程序?qū)崿F(xiàn)帶刻度尺滑塊功能，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)創(chuàng)新互聯(lián)網(wǎng)站的支持！
