【組件庫】自定義slider組件
效果展示
Demo代碼
index.wxml
<text>slider組件自定義</text> {{value}}
<view class="component-slider">
<!-- 覆蓋slider組件盒子 -->
<view class="slider-box">
<!-- 拖動按鈕 -->
<view class="slider-btn" style="margin-left: {{ (value-min)*(102/(max-min))-7 }}%;" ></view>
<!-- 未選中區(qū)線 -->
<view class="slider-line"></view>
<!-- 選中區(qū)線 -->
<view class="slider-line-active" style="width: {{ (value-min)*(102/(max-min))-7 }}%;"></view>
<!-- 顯示數(shù)字 -->
<view class="slider-number">
<!-- 最小限制大于等于0 -->
<block wx:if="{{min>=0}}" >
<block wx:for="{{max+1}}" wx:key="index" >
<text class="{{value==item?'active':''}}" style="left:{{ (item-min)*(100/(max-min))-2 }}%" >{{item}}</text>
</block>
</block>
<!-- 最小限制小于0 -->
<block wx:else>
<block wx:for="{{(max-min)+1}}" wx:key="index">
<text class="{{value==(item+min)?'active':''}}" style="left:{{ (item)*(102/(max-min))-2 }}%" >{{item+min}}</text>
</block>
</block>
</view>
</view>
<!-- slider組件 -->
<slider block-size="28" bindchange="sliderchange" bindchanging="sliderchanging" min="{{min}}" max="{{max}}" value="{{value}}" />
</view>
index.wxss
.component-slider {
width: 90%;
position: relative;
margin: 0rpx auto 0rpx;
padding: 70rpx 0 70rpx;
}
/* 盒子 */
.slider-box {
width: 88%;
margin: 0 auto;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
/* 未選中區(qū)線 */
.slider-line {
width: 100%;
height: 10rpx;
background: rgba(91, 150, 246, 0.1);
margin: 0 auto;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
/* 選中區(qū)線 */
.slider-line-active {
position: absolute;
left: 0;
top: 50%;
transform: translate(0, -50%);
height: 10rpx;
background: #5B96F6;
}
/* slider按鈕 */
.slider-btn {
width: 70rpx;
height: 35rpx;
background: #5B96F6;
border-radius: 20rpx;
}
/* 顯示的數(shù)字 */
.slider-number {
width: 100%;
position: absolute;
bottom: -10rpx;
}
.slider-number text {
position: absolute;
top: 0;
font-size: 24rpx;
color: #999999;
transition: all 0.3s;
}
/* 當(dāng)前選中的數(shù)字 */
.slider-number text.active {
font-size: 32rpx;
color: #5B96F6;
transition: all 0.3s;
}
/* slider組件設(shè)置透明 */
slider {
opacity: 0;
}
index.json
{
"usingComponents": {}
}
index.js
Page({
data: {
min: 0, // 最小限制
max:5, // 最大限制
value:0, // 當(dāng)前value
},
// 拖動過程中觸發(fā)的事件
sliderchanging(e){
var value = e.detail.value;
this.setData({ value: value })
},
// 完成一次拖動后觸發(fā)的事件
sliderchange(e){
var value = e.detail.value;
this.setData({ value: value })
}
})
思路
本質(zhì)上其實(shí)還是利用的是原生的slider，只是將其透明度設(shè)置為0，用戶看不到，然后再在其上面添加一個自定義按鈕，同時進(jìn)度條也是需要重新繪制
在代碼中可以看到：
<!-- 拖動按鈕 -->
<view class="slider-btn" style="margin-left: {{ (value-min)*(102/(max-min))-7 }}%;"></view>
其中margin-left: {{ (value-min)*(102/(max-min))-7 }}%;就是動態(tài)設(shè)置按鈕的位置
按照常理來說，應(yīng)該是 (value-min)*(100/(max-min))}}% 「【解釋：只需要算出當(dāng)前值占總長的幾分之幾就可以了，其實(shí)是(value-min)/(max-min) ??100】」
舉個例子：總范圍是0-10，此時的數(shù)值是7，那么已經(jīng)滑動距離占總長的：（7-0）/10=0.7，這里需要百分?jǐn)?shù)，所以乘了100
當(dāng)css樣式為margin-left:(value-min)*(100/(max-min))}}%時
可以發(fā)現(xiàn)，自定義滑塊并沒有與原生slider重合，所以需要稍微調(diào)整一下 得到：margin-left: {{ (value-min)*(102/(max-min))-7 }}%
而進(jìn)度條中的style就可以設(shè)置為："width: {{ (value-min)*(100/(max-min)) }}%;
具體看自定義滑塊、線條的定義，再進(jìn)行一定的微調(diào)即可
舉一反三
修改slider按鈕css樣式就可以了
/* slider按鈕 */
.slider-btn {
width: 70rpx;
height: 70rpx;
background: #5B96F6;
border-radius: 100%;
}
當(dāng)然，線條、按鈕的格式也可以自定義為其他樣式
修改部分：wxml
<view class="slider-btn" style="background: #ed5a65;margin-left: {{ (speed_left-min)*(102/(max-min))-7 }}%;">L
</view>
wxss
.slider-btn {
width: 80rpx;
height: 45rpx;
font-size: 18px;
color: white;
text-align: center;
padding: -1px;
border-radius: 20rpx;
}
最后
參考：
https://www.cnblogs.com/sanyekui/p/14069690.html 微信開放文檔
評論
圖片
表情