7.16

components/shop/list/index.vue

@@ -9,18 +9,59 @@
         <view class="item">
             <item v-for="item in goodsList" :key="item.goods_id" :info="item"></item>
         </view>
+		<!-- <view>
+			<u-tabs-swiper ref="uTabs" :list="tabList" :current="current" @change="tabsChange" :is-scroll="false"
+			 swiperWidth="750" height="60"></u-tabs-swiper>
+		</view>
+		<swiper :current="swiperCurrent" @transition="transition" @animationfinish="animationfinish" >
+			<swiper-item class="swiper-item" v-for="(_, index) in tabList" :key="index">
+				<scroll-view scroll-y style="height: 800rpx;width: 100%;">
+					<view class="item">
+						<item v-for="item in goodsList" :key="item.goods_id" :info="item"></item>
+					</view>
+				</scroll-view>
+			</swiper-item>
+		</swiper> -->
     </view>    
 </template>
 <script>
 import item from "./item"
 export default {
-    name:"list",
+	name:"list",
+	data() {
+		return {
+			tabList: [{name: '推荐'}, {name: '推荐'}, {name: '推荐'}],
+			tabList: [],
+			current: 0,
+			swiperCurrent: 0,
+
+		}
+	},
     components:{
         item
 	},
 	props: {
 		classifyList: Array,
 		goodsList: Array,
+	},
+	methods: {
+		// tabs通知swiper切换
+		tabsChange(index) {
+			this.swiperCurrent = index;
+		},
+		// swiper-item左右移动，通知tabs的滑块跟随移动
+		transition(e) {
+			let dx = e.detail.dx;
+			this.$refs.uTabs.setDx(dx);
+		},
+		// 由于swiper的内部机制问题，快速切换swiper不会触发dx的连续变化，需要在结束时重置状态
+		// swiper滑动结束，分别设置tabs和swiper的状态
+		animationfinish(e) {
+			let current = e.detail.current;
+			this.$refs.uTabs.setFinishCurrent(current);
+			this.swiperCurrent = current;
+			this.current = current;
+		},
 	}
 }
 </script>