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

html 复制代码
    //左按钮
		<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>
		
javascript 复制代码
			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)
			}
相关推荐
疯狂的沙粒1 小时前
在uni-app中如何从Options API迁移到Composition API?
javascript·vue.js·uni-app
anyup5 小时前
快崩溃了!华为应用商店已经 4 次驳回我的应用上线
前端·华为·uni-app
alphaair12 小时前
【一步步开发AI运动APP】十、微调优化内置运动分析器,灵活适配不同的应用场景
uni-app·ai运动·ai运动识别·ai健身·ai体测·ai运动app·ai运动检测·工会云上运动会·ai人体检测·ai姿态识别
moxiaoran575313 小时前
uni-app学习笔记二十三--交互反馈showToast用法
笔记·学习·uni-app
Angindem1 天前
从零搭建uniapp项目
前端·vue.js·uni-app
Bug从此不上门1 天前
【无标题】
前端·javascript·uni-app·vue
耶啵奶膘1 天前
uniapp+vue2解构赋值和直接赋值的优缺点
uni-app
疯狂的沙粒1 天前
uni-app 项目支持 vue 3.0 详解及版本升级方案?
前端·vue.js·uni-app
Jiaberrr1 天前
uniapp Vue2 获取电量的独家方法:绕过官方插件限制
前端·javascript·uni-app·plus·电量
^Rocky1 天前
uniapp 对接腾讯云IM群公告功能
uni-app·腾讯云