更新记录

1.0.0(2023-09-13) 下载此版本

v1.0.0


平台兼容性

Vue2 Vue3
×
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释放触发,获取返回值
事件可以根据自己的业务需求随便定义

隐私、权限声明

1. 本插件需要申请的系统权限列表:

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明:

3. 本插件是否包含广告,如包含需详细说明广告表达方式、展示频率:

许可协议

MIT协议

暂无用户评论。

使用中有什么不明白的地方,就向插件作者提问吧~ 我要提问