uniapp vue2 微信小程序项目基于uview封装的Slider滑块选择器

Akil_

于 2024-04-14 15:51:14 发布

阅读量514

点赞数 3

文章标签： uni-app 微信小程序 notepad++

本文链接：https://blog.csdn.net/Akil_/article/details/137746859

版权

本文介绍了如何在UViewUI框架中创建名为MySlider.vue的自定义滑块组件，包括组件结构、props属性、事件处理和样式设置，旨在帮助开发者理解和实现滑块组件的使用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在components中创建一个MySlider.vue组件

<template>
	<view class="u-slider" @tap="onClick" :class="[disabled ? 'u-slider--disabled' : '']" :style="{
		backgroundColor: inactiveColor
	}">
		<view class="u-slider__gap" :style="[
				barStyle,
				{
					height: height + 'rpx',
					backgroundColor: activeColor
				}
			]">
			<view class="u-slider__button-wrap" @touchstart="onTouchStart" @touchmove="onTouchMove"
				@touchend="onTouchEnd" @touchcancel="onTouchEnd">
				<slot v-if="$slots.default  || $slots.$default" />
				<view v-else class="u-slider__button" :style="[blockStyle, {
								height: blockWidth + 'rpx',
								width: blockWidth + 'rpx',
								backgroundColor: blockColor
							}]"></view>
			</view>
			<view class="u-slider__button-wrap" @touchstart="onTouchStart" @touchmove="onTouchMove"
				@touchend="onTouchEnd" @touchcancel="onTouchEnd">
				<slot />
			</view>
		</view>
	</view>
</template>

<script>
	/**
	 * slider 滑块选择器
	 * @tutorial https://uviewui.com/components/slider.html
	 * @property {Number | String} value 滑块默认值（默认0&