nui-app 滑动条可修改背景图片跟滑动按钮图片

最新推荐文章于 2024-06-21 11:18:58 发布

葉幺

最新推荐文章于 2024-06-21 11:18:58 发布

阅读量999

点赞数

分类专栏： uni-app H5 前端文章标签： vue.js javascript css

本文链接：https://blog.csdn.net/weixin_42861240/article/details/121980332

版权

本文介绍了如何在Vue.js应用程序中使用JavaScript和CSS自定义滑动条，包括修改滑动条的背景图片和滑动按钮的图像，提升用户体验。

摘要由CSDN通过智能技术生成

<template>
	<view>
		<view>
			<view class="progress-bar" @click="slideClick" :style="{'background':'url('+bg1+')','background-size':'100% 1rem'}">
				<view class="pro-bar" :style="{'width':sliderNum+'%','background':'url('+bg2+')','background-size':NewWidth+'px 1rem'}"></view>
				<view class="block" @touchmove="slideTouchmove" :style="{'left':blockLeft+'px'}"></view>
			</view>
			<view>{
  {sliderNum}}%</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
                sliderNum:0,
				/* 滑动条宽度 */
				NewWidth:0,
				/* 滑动条按钮宽度 */
				blockWidth:0,
				startX:0,
				mousedownLeft:0,
				blockLeft:0,