• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

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

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

自定义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

最小限制为负数


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
c#叫号小程序发布时间:2022-07-18
下一篇:
钉钉小程序封装请求地址发布时间:2022-07-18
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap