微信小程序滑动标尺/刻度尺

项目需要，开发了一个滑动标尺的组件，炒鸡好用的哦~~~

本来是想用touchmove,touchend来通过translate位移实现效果，事实证明，这种方式也是可行的。但是别忘了小程序中还有一个好用的组件 scroll-view ，利用属性bindscroll 轻轻松松获取滚动信息。下面直接上代码吧。

组件

组建目录：

组件目录.png

<!-- 标尺 -->
<view id="ruler" class="{{type}}">
    <view class="cur_val">
        <text>{{curVal}}</text>
        <text class="unit">{{unit}}</text>
    </view>

    <view class="box">
        <text class="cursor"></text>
        <scroll-view scroll-x="true" scroll-left="{{salNum}}" scroll-with-animation='true' catchscroll="bindscroll" throttle="{{false}}">
            <view class="scroller" style="width:{{scaleWidth}};" >
                <text wx:for="{{count}}" wx:key="{{index}}" class="{{((item+min)*step) % bigStep == 0 ? 'big':((item+min)*step) % middleStep == 0 ? 'middle' : ''}}">
                    <text wx:if="{{(item+min)%10==0}}" class="scale_txt">{{item + min}}</text>

                </text>
            </view>
        </scroll-view>
    </view>
</view>

如上，scroll-view为滑动区域，利用catchscroll监听滚动事件获取移动距离e.detail.scrollLeft；bigStep和middleStep是控制刻度尺样式 10个小格最长，5个小格中等长。

properties: {
        min:{
            type: Number,
            value: 0
        },
        max:{
            type: Number,
            value: 100
        },
        def:{
            type: Number,
            value: 30
        },
        unit:{
            type: String,
            value: ''
        }
    },

    /**
    * 组件的初始数据
    */
    data: {
        curVal: 0,//当前值
        step: 1,//步长 每格代表的值
        middleStep: 5,
        bigStep: 10,
        cellW: 10
    },
    created: function(){
        //组件实例被创建，此时不能使用setData

    },
    ready: function(){
        //初始化
        var _this = this;
        var _this_ = this.data;
        //一共有多少格
        var count = Math.ceil((_this_.max - _this_.min) / _this_.step) + 1;
        _this.setData({
            count: count,
            scaleWidth: (count * _this_.cellW) + 'px', //尺子总长度
            salNum: (_this_.def - _this_.min) / _this_.step *  _this_.cellW
        });

        //初始值
        _this.setVal(_this_.salNum);
    },
 methods:{
        bindscroll: function(e){
            // 移动距离
            let left = e.detail.scrollLeft;

            this.setVal(left);

        },
        setVal: function(left){

            let curVal = Math.round(  left / this.data.cellW / this.data.step ) + this.data.min;
            this.setData({
                curVal: curVal > this.data.max ? this.data.max : (curVal < this.data.min ? this.data.min : curVal),
                // salNum: left
            });

            this.triggerEvent('slide',{"curVal":this.data.curVal});
        },
        setDefVal: function(){
            //初始值
            var _this = this;
            this.setData({
                salNum: (_this.data.curVal - this.data.min) * this.data.cellW * this.data.step
            });
        }
    }

如上，data中cellW为小格子宽度(wxss里面宽度+边框的值)；methods中通过 this.triggerEvent('slide',{"curVal":this.data.curVal}) 触发slide自定义事件把值传递。

.scroller>text{
    font-size: 20rpx;
    color: #333;
    display: inline-block;
    width: 9px;                      /*刻度尺宽度用px*/
    border-left: 1px solid #333;
    border-bottom: 1px solid #333;
    height: 20rpx;
    vertical-align: bottom;
    position: relative;
}

wxss里面主要强调一点，刻度尺的宽度需要用px来设置，因为不同手机分辨率不一样，如果用rpx的话，再换算成px移动距离精度不准确。
组件大致构成就是这了，那怎么用呢？看下面

具体使用

index.wxml : 传入最大值max，最小值min，默认值def

<view>
    <slide id="rule" min="0" max="100" def="30" bind:slide="slideTrigger"></slide>
</view>

<view>当前滑动值：{{val}}</view>

index.json : 根据你自己的目录引入

{
    "navigationStyle":"default",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "刻度尺",
    "navigationBarTextStyle": "black",
    "disableScroll": true,
    "usingComponents": {
         "slide": "../components/slide/slide"
    }
}

index.js : 方法slideTrigger返回值为当前选择的值

Page({
    data: {

    },
    onLoad: function (options) {

    },
    slideTrigger: function(e){
        var that = this;
        that.setData({
            val: e.detail.curVal
        });
        console.log('当前选择的值',e.detail.curVal);
    }
})

好了，最后呈现出来的效果就是这样纸啦~

演示.gif

这是第一次写文章，如果有不明白的随时问我，我们一起进步学习！
具体的详细代码在这里哦~