项目需要，开发了一个滑动标尺的组件，炒鸡好用的哦~~~
本来是想用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
这是第一次写文章，如果有不明白的随时问我，我们一起进步学习！
具体的详细代码在这里哦~
