uniapp scroll-view 点击左右方向按键自动滚动到设置位置

最新推荐文章于 2024-06-04 20:07:55 发布

php技师

最新推荐文章于 2024-06-04 20:07:55 发布

阅读量944

点赞数 11

文章标签： uni-app

本文链接：https://blog.csdn.net/qq_34716929/article/details/135824463

版权

在这里插入图片描述


    //左按钮
		<image  src="" @click="slideLeft">
		</image>


		<scroll-view class="uni-swiper-tab" scroll-x ref="scrollView"  :scroll-left="scrollLeft">
			
			<view class="scrollx_items" v-for="(img,index) in scrollimg" :key="index" :class="scrollxIndex==index?'':'mengbu'" @click="previewImgClick(index)">

				<image style="z-index:-1;" class="scrollx_items_img" :src="img"   :class="scrollxIndex==index?'jinbian':''"></image>

			</view>
			
		</scroll-view>
		
    //右按钮
		<image  @click="slideRight">
		</image>

			slideLeft(event) {
				this.scrollLeft = event.detail.x-100; 
				

			},
			slideRight(event) {
				this.scrollLeft = event.detail.x+ 100; // 获取点击位置的x坐标
		
				// setTimeout(() => {
				// 	this.$refs.scrollView.scrollLeft= this.targetX ; // 根据点击位置计算滚动目标位置
				// }, 300); // 设定滚动动画持续时间（单位ms）
			}