更新记录

1.0.3(2025-01-13) 下载此版本

更新calculateSizes说明

1.0.2(2025-01-13) 下载此版本

  1. 优化部分机型或者环境使用宽度100%导致初始化滑块初始化宽度异常问题(测试中滑块的父级使用flex:1遇见的)
  2. 添加progressBarHeight字段修改(进度条高度)

1.0.1(2025-01-06) 下载此版本

更新md文件使用说明和参数说明

查看更多

平台兼容性

Vue2 Vue3
×
App 快应用 微信小程序 支付宝小程序 百度小程序 字节小程序 QQ小程序
HBuilderX 3.1.0 × × × × ×
钉钉小程序 快手小程序 飞书小程序 京东小程序 鸿蒙元服务
× × × × ×
H5-Safari Android Browser 微信浏览器(Android) QQ浏览器(Android) Chrome IE Edge Firefox PC-Safari

bySlider

组件说明

自己的项目有个功能是旋转页面实现横屏观看视频,然后需要自定义视频的菜单栏,如果使用原生的slider旋转会导致异常,需要横向滑动才能改变竖向的位置,经确认是原生的slider就有当前问题,不支持通过旋转transform: rotate然后正常滑动,插件市场找了也没找到满意的所以自己写了一个,预览图分为三个模式:正常竖向滑动,正常横向滑动,父级通过旋转90度然后使用竖向滑动

使用方法:

script 中引用组件

import bySlider from "@/uni_modules/by-slider/components/by-slider/by-slider.vue"
export default {
    components: {bySlider }
}

template 中引用组件

<bySlider ref="bySlider" direction="vertical" @change="change"></bySlider>

属性说明

属性名 类型 默认值 说明
direction String horizontal 滑块方向(horizontal=横屏,vertical=竖屏)
width String 100% 滑块整体宽度(竖向则为高度)
height String 40px 滑块整体高度(竖向则为宽度)
progressBarHeight String 6px 进度条高度(竖向则为宽度)
blockSize String 24px 滑块的大小
activeColor String #ffffff 进度条的激活部分颜色
inactiveColor String rgba(0,0,0,0.24) 进度条的背景颜色
blockColor String #ffffff 滑块背景颜色

事件说明

事件名称 说明 返回值
change 滑块位置变更回调 type:touchMove(滑动中)/touchEnd(滑动结束)/trigger(手动点击或者ref调用修改)

PS:手动修改可用 this.$refs.bySlider.setSliderPosition( 50,true )。//百分百位置,是否禁止回传(true不会触发change事件上报) PS:滑块宽度变化后务必调用当前方法更新 this.$refs.bySlider.calculateSizes()//如果未生效请添加定时器延迟大概200毫秒因为使用createSelectorQuery有时候不准确


End

目前只在H5和微信小程序测试正常,其它端理应是同样兼容的,需要自测

隐私、权限声明

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

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

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

许可协议

MIT协议

暂无用户评论。

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