更新记录
1.0.0(2023-09-13)
下载此版本
v1.0.0
平台兼容性
App |
快应用 |
微信小程序 |
支付宝小程序 |
百度小程序 |
字节小程序 |
QQ小程序 |
HBuilderX 3.1.0 app-vue |
× |
× |
× |
× |
× |
× |
钉钉小程序 |
快手小程序 |
飞书小程序 |
京东小程序 |
× |
× |
× |
× |
H5-Safari |
Android Browser |
微信浏览器(Android) |
QQ浏览器(Android) |
Chrome |
IE |
Edge |
Firefox |
PC-Safari |
√ |
√ |
√ |
√ |
√ |
× |
× |
× |
× |
double-slider
双滑块滑动
平台兼容
H5 |
微信小程序 |
支付宝小程序 |
百度小程序 |
头条小程序 |
QQ 小程序 |
App |
√ |
√ |
√ |
√ |
√ |
√ |
√ |
使用
<view>
<view class="text">双滑块</view>
<double-slider
:pageBg="dData.pageBg"
:width="dData.width"
:border="dData.border"
:process="dData.process"
:colorSatrt="dData.colorSatrt"
:colorEnd="dData.colorEnd"
:sliderColor="dData.sliderColor"
:sliderSize="dData.sliderSize"
:startDeg="dData.startDeg"
:endDeg="dData.endDeg"
:differVal="dData.differVal"
:indoorTempVal="dData.indoorTempVal"
:stepVal="dData.stepVal"
:max2="dData.max2"
:min2="dData.min2"
:heatProVal="dData.heatProVal"
:coolProVal="dData.coolProVal"
@getDoubleSilderVal="getDoubleSilderVal"
></double-slider>
</view>
<script>
export default {
....
data(){
dData: {
pageBg: '#f7f9fb', //背景色
width: uni.getSystemInfoSync().windowWidth, //宽度
border: 11,//轨道宽度
process: 8, //进度条宽度
colorSatrt: '#e7efd9', //圆弧背景色
colorEnd: ['#7dc04c', '#C4E178'], //进度颜色 []/string
sliderColor: '#FFFFFF',//滑块颜色
sliderSize: 20, //滑块大小
startDeg: 8 / 9, //开始角度
endDeg: 2 + 1 / 9, //结束角度
differVal: 5, //差值 【4-9】默认是5F
indoorTempVal: 24.5, //室内温度
stepVal: 1, //摄氏度0.5,华氏度1
max2: 50,//最大范围值
min2: 0,//最小范围值
heatProVal: 10, //制热进度
coolProVal: 20 //制冷进度
}
}
...
}
</script>
事件
@getDoubleSilderVal :touchEnd释放触发,获取返回值
事件可以根据自己的业务需求随便定义