微信小程序-自定义slider组件样式

OGeek|极客世界-中国程序员成长平台 › 门户 › 编程› 移动开发›小程序云开发高级教程

原作者: [db:作者] 来自: [db:来源] 收藏邀请

自定义slider组件样式

* 实际上是另外写了一个 view 与 slider组件重叠，再把 slider 透明。实现自定义它的样式

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;}