更新记录

1.0.0（2021-10-28）

1. 新增可横向和竖向放置的slider前端通用组件

平台兼容性

目录

• 背景
• 平台支持度
• 效果图
• 属性说明
• 使用示例
• Tips
• 更多前端知识

背景

1. 在做小程序的时候，遇到需要竖向放置的slider滑动组件，原以为将官方提供的slider旋转90度就可以用了，后面发现没法那样使用，于是我自己写了该插件，支持竖向放置和滑动。
2. 此插件功能与官方提供的slider功能类似，但是官方的不支持竖向滑动，所以该插件支持两个方向：横向、竖向。

平台支持度

目前支持小程序（除开字节跳动小程序、飞书小程序）、app-vue、h5，其他平台暂不支持。

效果图

属性说明

使用示例

<template>
    <view class="slider-wraper">
        <pp-slider 
        :vertical="true" 
        :show-value="true" 
        :value="2" 
        :block-size="20" 
        :disabled="false"
        @changing="changing" />
    </view>
</template>
<script>
    export default {
        methods: {
            changing(val){
                console.log(val)
            }
        }
    }
</script>
<style>
    .slider-wraper {
        width: 500rpx;
        margin: 100rpx;
        height: 600rpx;
    }
</style>

Tips

1. 组件的父级，如示例代码中的slider-wraper层，如果是横向需要给宽度，竖向需要给高度，否则可能无法正常显示。
2. 该插件使用movable-area与movable-view可拖动组件简单实现，暂不支持step参数。
3. 如需要区间滑块，即一根横条上使用2个滑块选择一段范围，可见插件市场
4. 不满足要求的开发者，也可以根据自己的需求改动源码。

如果对此插件有任何疑问，更多相关技术可以加QQ群交流：568984539

更多前端、uniapp、nodejs等相关知识可关注我个人博客：https://blog.csdn.net/qq_42961150?spm=1011.2124.3001.5343