更新记录

1.0.0（2025-01-23） 下载此版本

新增组件

平台兼容性

hbxw-slider滑动选择器组件

介绍

支持刻度显示和自定义UI的高度可定制滑动选择器组件

使用示例

推荐先直接复制示例代码到工程中看效果了解下使用方法再投入项目使用。

<template>
  <view class="hbxw-slider-example">
    <text class="hbxw-slider-title">基础使用</text>
    <hbxw-slider @change="hbxwsliderchange"></hbxw-slider>
    <text class="hbxw-slider-title">自定义配置</text>
    <hbxw-slider @changing="hbxwsliderchanging" :max="24" :min="2">
      <template #tag="{value}">
        <view class="hbxw-slider-tag">第{{value}}期</view>
      </template>
      <template #handle>
        <view class="hbxw-slider-handle"></view>
      </template>
    </hbxw-slider>
  </view>
</template>

<script>
export default {
  data() {
    return {

    }
  },
  methods: {
    hbxwsliderchange(e) {
      console.log('---- hbxwsliderchange ----:',  e.detail);
    },
    hbxwsliderchanging(e) {
      console.log('---- hbxwsliderchanging ----:',  e.detail);
    }
  }
}
</script>

<style lang="scss">
  .hbxw-slider-example{
    display: flex;
    flex-direction: column;
    padding: 30rpx;
  }
  .hbxw-slider-title{
    font-size: 32rpx;
    line-height: 64rpx;
    color: green;
  }
  .hbxw-slider-tag{
    width:100%;
    text-align: center;
    font-size: 24rpx;
    color: white;
  }
  .hbxw-slider-handle{
    width: 108rpx;
    height: 56rpx;
    border-radius: 10rpx;
    background-color: rgba(0,255,0,.8);
  }
</style>

API

Props

Events