解决scroll-view点击滑动到下一张位置

pages/index/diy/components/latestGroupBuying.vue

@@ -9,14 +9,16 @@
 			<view class="content">
 				<view class="home">
 					<view class="count ">共{{ e.goodsTotal }}个</view>
-					<scroll-view scroll-x class="navscroll" :scroll-into-view="scrollIndex"> <!-- 设置滚动条方向为横向 -->
-							<view :id="'scroll'+index" class="item goods_item_img "  v-for="(item,index) in e.goodsImage" :key="index">
-								<!-- 通过for循环生成view -->
-								<image style="width: 108rpx;height: 108rpx;" :src="item" mode="scaleToFill" />
-							</view>
+					<scroll-view id="scrollView" scroll-x class="navscroll" :scroll-into-view="scrollIndex"
+						:scroll-with-animation="true" onScroll :scroll-left="scrollLeft" @scroll="scroll">
+						<view :id="'scroll' + index" class="item goods_item_img" v-for="(item, index) in e.goodsImage"
+							:key="index">
+							<image style="width: 108rpx;height: 108rpx;" :src="item" mode="scaleToFill" />
+						</view>
 					</scroll-view>
-					<view class="" @click="moveImg(e.goodsImage.length)">
-						<image class="nextimg" src="http://www.gzzzyd.com/groupon/home_slices/进入箭头2小@2x.png" mode="scaleToFill" />
+					<view class="" @click="moveImg()">
+						<image class="nextimg" src="http://www.gzzzyd.com/groupon/home_slices/进入箭头2小@2x.png"
+							mode="scaleToFill" />
 					</view>
 				</view>
 			</view>
@@ -151,9 +153,10 @@ export default {
 	},
 	data() {
 		return {
-			index:4,
-			scrollIndex:'scroll4',
-			timeData:{},
+			scrollLeft: 0,
+			scrollLeftOld: 0,
+			index: 4,
+			timeData: {},
 			timestamp: 86400,
 			navigationList2: [],
 			ProductNavindex: 0,
@@ -178,20 +181,15 @@ export default {
 
 	},
 	methods: {
-
-		moveImg(length){
-			this.scrollIndex= 'scroll' +this.index
-			if (this.index>length){
-				this.index = 4
-			}else {
-				this.index +=5;
-			}
-
+		scroll(e) {
+			this.scrollLeftOld = e.detail.scrollLeft
+		},
+		moveImg() {
+			this.scrollLeft = this.scrollLeftOld + 54
 		},
 		timechange(e) {
 			this.timeData = e
 		},
-
 		goToDetail(item) {
 			uni.navigateTo({
 				url: `/pages/groupbuying_details/index?id=${item.id}&selfTakeId=${item.selfTake.id}&organizerUserId=${item.organizerUserId}`
@@ -278,6 +276,7 @@ export default {
 		.navscroll {
 			white-space: nowrap;
 			width: 570rpx;
+			height: auto;
 			overflow: hidden;
 		}
 	}
@@ -564,7 +563,7 @@ export default {
 
 
 
-.goods_item_img{
+.goods_item_img {
 	display: inline-block;
 	line-height: 108rpx;
 	width: 108rpx;