# slide-choose-uniapp

**Repository Path**: youc-project/slide-choose-uniapp

## Basic Information

- **Project Name**: slide-choose-uniapp
- **Description**: uniapp滑动刻度选择组件
- **Primary Language**: JavaScript
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 1
- **Created**: 2022-06-18
- **Last Updated**: 2022-06-18

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# slide-choose-uniapp

uniapp滑动刻度选择组件
=======

#### 介绍

uniapp滑动刻度选择组件

#### 软件架构

基于uniapp

已测试的适配端：微信小程序，安卓app-vue, h5网页。  
已测试不适合的端：app-nvue。  
其它未测试。



#### 使用说明

提取components里的文件。

```
// template

		<slide-choose :width="100" :bigItemWidth="5" :littleItemWidth="5" @change="chooseChange" v-model="value" height="300rpx"
		 :cellWidth="20" :cells="5" :cellNum="0.5" :startNum="10" :endNum="30" bgColor="linear-gradient(to right, #b0a4e3, #801dae)"
		 color="#fff" :bigItemHeight="40" :littleItemHeight="20" selColor="#0ff" align="center" numPos="top" ref="slide"></slide-choose>

```

```
    // script
	
<script>
	import slideChoose from '@/components/dlm-slide-choose/dlm-slide-choose.vue';
	export default {
		components: {
			slideChoose
		},
		data() {
			return {
				value: 18
			}
		},
		onLoad() {

		},
		methods: {
			chooseChange(e) {
				console.log(e)
			}
		}
	}
</script>
```

目前已支持v-model双向绑定，修改v-model值即可自动滑动刻度。如果需要修改startNum、endNum等其它属性值，请修改后通过ref调用初始化方法重新渲染：this.$refs.slide.initSlide()


#### props 列表

所有props属性均非必填。  


 | 属性  | 名称 | 类型  | 默认值 | 备注 |
 | ---- | ---- | ----  | ---- | ---- |
 | width  | 总宽度 | Number | 100 | <= 100时为屏幕宽度的百分比，>100时单位为px |
| height | 总高度 | String | ''  | 总高度，可取所有常用值，例如 200rpx,300px 等 |
| bigItemWidth | 大刻度线的宽度 | Number | 2 | 大刻度线宽度,单位px |
| littleItemWidth | 小刻度线宽度 | Number | 2 | 建议跟大刻度线宽度相等 |
| cellWidth | 每小格宽度 | Number | 20 | 单位px |
| cells | 每个大格分为几个小格 | Number | 5 | 整数 |
| cellNum | 每个小格子代表的数值 | Number | 1 | 可以为小数、整数 |
| startNum | 开始数值 | Number | 0 | 刻度起始值，建议取整数 |
| endNum | 结束数值 | Number | 20 | 刻度结束值，建议取整数 |
| bgColor | 背景颜色 | String | 'transparent' | 可取所有常用值 |
| color | 刻度线颜色 | String | '#666' | 可取所有常用值 |
| selColor| 当前选中的刻度线和文字颜色 | String | '#f00' | 可取所有常用值 |
| align| 刻度线对齐方式 | String | 'center' | 可取值: flex-start 上边对齐，center 中间对齐，flex-end 下边对齐 |
| bigItemHeight | 大刻度线的高度 | String, Number | 30 | 值为字符串时，是字符串所代表高度，值为数字时，单位为px |
| littleItemHeight| 小刻度线高度 | String, Number | 15 | 值为字符串时，是字符串所代表高度，值为数字时，单位为px |
| v-model | 双向绑定 | Number | 0 | 该值必须在有刻度线的值上，如果大于endNum或小于startNum，则会自动改成endNum或startNum，如果还匹配不到，则会改为startNum |
| numPos | 数值的位置 | String | 'bottom' | 可取值：top 在刻度线上方， bottom 在刻度线下方 |



#### event 事件


 | 事件  | 名称 | 类型 | 备注 |
 | ---- | ---- | ----  | ---- |
 | change | 改变事件 | function(value) | 选填，返回的参数为当前选中的值，经四舍五入保留两位小数。也可以通过v-model双向绑定获取当前值 |


#### 寄语

兴趣使然的程序员。  
如有错误，请指教提出。  
如能帮到你，请点击右上角⭐star。谢谢