uniapp slider添加一个气泡

默认的slider在最后显示值，而且不能自定义值，比如给值添加单位。

所以我自定了一个气泡显示要显示的数据.

先看效果：

下面是实现代码

1.先声明slider和气泡

<text :style="{marginLeft: sliderLeft +'px'}">{{sliderText}}</text>
<slider :value=sliderDefValue @change="sliderChange"
 min="1" :max=sliderMax 
block-size=12 @changing="sliderChanging"/>

2. 声明变量：

sliderMax: 500, //最大值
sliderRate: 0,  //组件和屏幕宽度的占比，相当于一个step要走的像素
sliderDefValue: 300,  //初始化slider值
sliderLeft: 0,   //气泡距离左边的位置
sliderText: ""   //气泡显示的字

3. 计算sliderRate比

//计算slider的step比例
//由于我这里是pandding左右了30个rpx，所以屏幕宽度要把这部分减掉
var px = uni.upx2px(30) * 2;
console.log(px)
that.sliderRate = (this.windowWidth - px)/this.sliderMax
			
//初始化滑块位置
that.sliderLeft = that.sliderDefValue * that.sliderRate
//初始气泡的文本数据
that.sliderText = that.sliderDefValue + "km"

4. 然后就在slider的两个change方法里计算气泡位置

sliderChange(e) {
console.log(e)
that.sliderLeft = e.detail.value * that.sliderRate
that.sliderText = e.detail.value + "km"
},
sliderChanging(e) {
console.log(that.sliderRate,  e.detail.value)
that.sliderText = e.detail.value + "km"
that.sliderLeft = e.detail.value * that.sliderRate
}

搞定啦。小程序测试通过。气泡样式和位置可以自己微调下，我偷懒了，只写了个大概

如果滑块拖到最后，气泡文本不能完整显示，就处理一下

that.sliderLeft = e.detail.value == that.sliderMax ? (e.detail.value-25) * that.sliderRate : e.detail.value * that.sliderRate