微信小程序 - 自定義slider組件樣式

自定義slider組件樣式

* 實際上是另外寫了一個 view 與 slider組件重疊，再把 slider 透明。實現自定義它的樣式

 

JS

Page({ data: { min: 0,  // 最小限制 
        max:5,   // 最大限制
        value:0, // 當前value
 }, // 拖動過程中觸發的事件
 sliderchanging(e){ var value = e.detail.value; this.setData({ value: value }) }, // 完成一次拖動后觸發的事件
 sliderchange(e){ var value = e.detail.value; this.setData({ value: value }) } })

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>
        <!-- 未選中區線 -->
        <view class="slider-line"></view>
        <!-- 選中區線 -->
        <view class="slider-line-active" style="width: {{ (value-min)*(102/(max-min))-7 }}%;"></view>
        <!-- 顯示數字 -->
        <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>

按鈕每次移動的距離 百分比%：

（當前值-最小限制）*（102 /（最大限制-最小限制））- 7

102 和 7 根據需要調整，按鈕大小不同，對應的位置也不一樣

 

CSS

.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%);}
/* 未選中區線 */ .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%);}
/* 選中區線 */ .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;}
/* 顯示的數字 */ .slider-number { width: 100%;position: absolute;bottom: -10rpx;} .slider-number text{position: absolute; top: 0;font-size: 24rpx;color: #999999;transition: all 0.3s;}
/* 當前選中的數字 */ .slider-number text.active {font-size: 32rpx;color: #5B96F6;transition: all 0.3s;
}
/* slider組件設置透明 */ slider{opacity:0;}

 

最小限制大於0

最小限制為負數