更新记录

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文件使用说明和参数说明

查看更多

平台兼容性

uni-app

Vue2 Vue3 Chrome Safari app-vue app-nvue Android iOS 鸿蒙
√ - √ √ × × - - -
微信小程序 支付宝小程序 抖音小程序 百度小程序 快手小程序 京东小程序 鸿蒙元服务 QQ小程序 飞书小程序 快应用-华为 快应用-联盟
√ - - - - - - - - - -

其他

多语言 暗黑模式 宽屏模式
× × √

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协议
评论列表 撰写评论 向官方投诉

暂无用户评论。