uniapp实现简单的slider

一、简介

        由于官方的silder样式太过于单一，故选择自己写一个样式可根据自己定义的silder。

二、样式图

  三、代码

<template>
	<view class="page">
		<view style="height: 111px;font-size: 20px;">{{slider.percent}}</view>
		<movable-area class="test" style="width: 100%;height: 30px;border-radius: 10px;background-color: aliceblue;position: relative;">
			<view style="position: absolute;height: 16px;width: 100%;border-radius: 8px;background-color: beige;top: 7px;">
				<view style="height: 100%;position: absolute;background-color: #1681ff;top: 0;left: 0;border-radius: 8px;" :style="{width: slider.x+slider.height/2+'px'}"></view>
			</view>
			<movable-view :x="slider.x" :y="slider.y" direction="horizontal" @change="onChange"  style="border-radius: 50%;background-color: aqua;height: 30px;width: 30px;display: flex;align-items: center;justify-content: center;">
				<view style="width: 16px;height: 16px;border-radius: 50%;background-color: #fff;"></view>
			</movable-view>
		</movable-area>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				slider:{
					x:0,
					y:0,
					width:0,
					height:0,
					percent:0
				}
			}
		},
		
		mounted() {
			this.getCanvasPosition();
		},
		methods: {
			getCanvasPosition() {
				let th =this;
			    uni.createSelectorQuery().in(this).select(".test").boundingClientRect((rect) => {
					th.slider.width = rect.width ;
					th.slider.height = rect.height;
			    }).exec();
			},
			onChange(e){
				let x = e.detail.x;
				this.slider.x = x;
				// console.log(e.detail.x,e.detail.y)
				let width = this.slider.width-this.slider.height;
				let sum = parseFloat((x/width).toFixed(2))
				this.slider.percent = Math.round(sum*100)
			},
		}
	}
</script>

<style>
	.page{
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 100%;
		height: 100vh;
		background-color: #f6f7fb;
	}
</style>

        使用movable-view实现，当然要是movable-view的存在会影响你的UI导致部分UI出问题，也可以采用纯view的方式实现，逻辑上的实现差不多。

四、优缺点

        优点：样式可自定义，实现简单。

        缺点：性能相较官方slider较差，一些平台上会出现数据处理与视图变化不同步。