小程式開發之刻度尺滑塊選擇打賞金額功能

巴扎黑
發布: 2017-08-17 15:06:18
原創
2590 人瀏覽過
摘要: 與自帶的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(&#39;canvas-ruler&#39;);// 移动到原点context.moveTo(origion.x, origion.y);// 画线到刻度高度context.lineTo(origion.x, origion.y - heightDecimal);// 设置属性context.setLineWidth(1);// 描线context.stroke();// 描绘文本标签context.setFontSize(fontSize);context.fillText(&#39;0&#39;, 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(&#39;canvas-cursor&#39;);
    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(&#39;#48c23d&#39;);
    context.fill();
    context.draw();  }
登入後複製

畫帶一個綠色的正三角形作為遊標,注意遊標是懸浮不動的,所以另一個cancas來裝它。當然它不是必須的,偷懶ps一張三角形的png代替也無妨,甚至刻度其實也可以用加絕對定位來生成的。
定義刻度預設初值
that.setData({
    scrollLeft: (currentValue - minValue) * ratio});<scroll-view scroll-x="true" bindscroll="bindscroll" scroll-left="pw_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 ? &#39; &#39; + 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(&#39;canvas-ruler&#39;);    // 遍历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 ? &#39;gray&#39; : &#39;darkgray&#39;);      // 描线
      context.stroke();      // 2.3 描绘文本标签
      context.setFillStyle(&#39;gray&#39;);      if (i % ratio == 0) {
        context.setFontSize(fontSize);        // 为零补一个空格,让它看起来2位数,页面更整齐
        context.fillText(i == 0 ? &#39; &#39; + 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(&#39;canvas-cursor&#39;);
    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(&#39;#48c23d&#39;);
    context.fill();
    context.draw();  },
  bindscroll: function (e) {    // deltaX 水平位置偏移位,每次滑动一次触发一次,所以需要记录从第一次触发滑动起,一共滑动了多少距离
    deltaX += e.detail.deltaX;    // 数据绑定
    that.setData({
      value: Math.floor(- deltaX / 10 + minValue)    });
    console.log(deltaX)  }});
登入後複製

以上是小程式開發之刻度尺滑塊選擇打賞金額功能的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
最新問題
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板