項目需要欢伏，開發(fā)了一個滑動標(biāo)尺的組件逾礁，炒雞好用的哦~~~
本來是想用touchmove,touchend來通過translate位移實(shí)現(xiàn)效果递惋，事實(shí)證明霹购，這種方式也是可行的佑惠。但是別忘了小程序中還有一個好用的組件 scroll-view ，利用屬性bindscroll 輕輕松松獲取滾動信息齐疙。下面直接上代碼吧膜楷。
組件
組建目錄：
組件目錄.png
<!-- 標(biāo)尺 -->
<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為滑動區(qū)域贞奋，利用catchscroll監(jiān)聽滾動事件獲取移動距離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: ''
}
},
/**
* 組件的初始數(shù)據(jù)
*/
data: {
curVal: 0,//當(dāng)前值
step: 1,//步長 每格代表的值
middleStep: 5,
bigStep: 10,
cellW: 10
},
created: function(){
//組件實(shí)例被創(chuàng)建察蹲，此時不能使用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}) 觸發(fā)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里面主要強(qiáng)調(diào)一點(diǎn)，刻度尺的寬度需要用px來設(shè)置漫拭，因?yàn)椴煌謾C(jī)分辨率不一樣亚兄，如果用rpx的話，再換算成px移動距離精度不準(zhǔn)確采驻。
組件大致構(gòu)成就是這了审胚，那怎么用呢？看下面
具體使用
index.wxml : 傳入最大值max礼旅，最小值min膳叨，默認(rèn)值def
<view>
<slide id="rule" min="0" max="100" def="30" bind:slide="slideTrigger"></slide>
</view>
<view>當(dāng)前滑動值：{{val}}</view>
index.json : 根據(jù)你自己的目錄引入
{
"navigationStyle":"default",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "刻度尺",
"navigationBarTextStyle": "black",
"disableScroll": true,
"usingComponents": {
"slide": "../components/slide/slide"
}
}
index.js : 方法slideTrigger返回值為當(dāng)前選擇的值
Page({
data: {
},
onLoad: function (options) {
},
slideTrigger: function(e){
var that = this;
that.setData({
val: e.detail.curVal
});
console.log('當(dāng)前選擇的值',e.detail.curVal);
}
})
好了，最后呈現(xiàn)出來的效果就是這樣紙啦~
演示.gif
這是第一次寫文章痘系，如果有不明白的隨時問我菲嘴，我們一起進(jìn)步學(xué)習(xí)！
具體的詳細(xì)代碼在這里哦~
