更新记录
1.0.3(2025-01-13) 下载此版本
更新calculateSizes说明
1.0.2(2025-01-13) 下载此版本
- 优化部分机型或者环境使用宽度100%导致初始化滑块初始化宽度异常问题(测试中滑块的父级使用flex:1遇见的)
- 添加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有时候不准确