보상 금액 기능을 선택하는 미니 프로그램 개발용 스케일 슬라이더

요약: 내장 슬라이더와 달리 슬라이더 자체를 슬라이드하는 것이 아니라 제스처를 통해 눈금자를 슬라이드하여 값을 얻습니다.
Rendering

사진: 1.gif

Scene
나이, 체중 선택, 양 선택, 기타 선택기가 넓은 범위에 필요한 등 한 화면이 들어갈 수 없는 경우에 비해 내장 Picker가 더 직관적입니다.
아이디어:
먼저 scrollView 2를 그려 캔버스에 로드합니다.
lineTo는 크기 조절 세그먼트를 그리고 lineTo+fill은 삼각형 커서를 그리고 fillText는 텍스트 레이블을 그립니다.
bindscroll을 통해 크기 조절 터치 이벤트를 수신합니다.
Render 페이지에 값
기본 레이아웃

<scroll-view scroll-x="true" bindscroll="bindscroll">  <canvas canvas-id="canvas" id="canvas"></canvas></scroll-view>

바인드스크롤 메소드 구현

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() 호출 기억하세요;
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();  }

커서로 녹색 정삼각형을 그립니다. 커서가 정지되어 있으므로 다른 칸카스를 만들어 설치하세요. 물론 꼭 필요한 것은 아닙니다. 대신에 삼각형 png를 느리게 Photoshop하는 것도 나쁘지 않습니다. d2a82a0a93fcd94ab3723223d118c0ac
스케일의 기본 초기값을 정의합니다

that.setData({
    scrollLeft: (currentValue - minValue) * ratio});<scroll-view scroll-x="true" bindscroll="bindscroll" scroll-left="pw_scrollLeft">

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(&#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 중국어 웹사이트의 기타 관련 기사를 참조하세요!