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

效果图

image.png
image.png

组件wxml

<view class="component-slider">
  <view class="slider-box">
    <view class="slider-btn" style="margin-left:{{(slider_value - slider_min)*(92 / (slider_max - slider_min)) - 3}}%"></view>
    <view class="slider-line "></view>
    <view class="slider-line-active " style="width: {{ (slider_value - slider_min)*(92 / (slider_max-slider_min)) - 3}}%"></view>
  </view>
  <slider block-size="28" bindchanging="sliderChanging" min="{{slider_min}}" max="{{slider_max}}" value="{{slider_value}}" />
</view>

组件样式wxss

.component-slider {
  width: 100%;
  position: relative;
  margin: 0rpx auto 0rpx;
}

/* 盒子 */
.slider-box {
  width: 100%;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

/* 未选中区线 */
.slider-line {
  width: 100%;
  height: 20rpx;
  background: rgba(91, 150, 246, 0.1);
  margin: 0 auto;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  border-radius: 12rpx;
  border-bottom-right-radius:8rpx;
  border-top-right-radius:8rpx;
}

/* 选中区线 */
.slider-line-active {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translate(0, -50%);
  height: 20rpx;
  background: #FD8DAA;
  border-bottom-left-radius:8rpx;
  border-top-left-radius:8rpx;
}

/* slider按钮 */
.slider-btn {
  width: 50rpx;
  height: 50rpx;
  background:url('https://6665-femetitedatabase-0fn9c2l9b5415f5-1312022440.tcb.qcloud.la/image/%E5%BA%B7%E5%A4%8D%E8%AE%AD%E7%BB%83%E5%9B%BE%E7%89%87/slider.png?sign=59ff5e941afe99b344a577848d1c261a&t=1652946799');
  background-size: 100% 100%;
}

/* 显示的数字 */
.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;
  margin: 0rpx auto 0rpx;
}

组件js

Component({
  properties: {
    slider_min: {//最小值
      type: Number,
      value: 0
    },
    slider_max: {//最大值
      type: Number,
      value: 100
    },
    slider_value: {//当前值
      type: Number,
      value: 10
    },
  },
  methods: {
    sliderChanging(e) {
      const value = e.detail.value;
      this.triggerEvent("sliderchange", value)
    },
  }
})

页面引用组件的配置

{
  "navigationBarTitleText": "自定义slider",
  "usingComponents": {
    "slider-component": "../../components/slider-component/slider-component"
  }
}

页面的wxml

  <slider-component id="slider" slider_min="0" slider_max="100" slider_value="{{slider_value}}"
    style="width: 100%; " bindsliderchange="sliderChange"></slider-component>

页面的js

Page({
  data: {
    slider_value: 0,
  },
  sliderChange(e){//滑动监听事件
    console.log('页面',e.detail);
    this.setData({
      slider_value: e.detail,
    });
  }
})