7.16

pageC/groupBuy/index.vue

@@ -0,0 +1,63 @@
+<template>
+	<view class="group">
+		<view>
+			<u-tabs-swiper ref="uTabs" :list="tabList" :current="current" @change="tabsChange" :is-scroll="false"
+			 swiperWidth="750"></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%;" @scrolltolower="onreachBottom">
+					{{ index }}
+				</scroll-view>
+			</swiper-item>
+		</swiper>
+	</view>
+</template>
+<script>
+import SpecialGoods from "../../components/shop/special-shop/index"
+export default {
+	data() {
+		return {
+			tabList: [{name: '推荐'}, {name: '推荐'}, {name: '推荐'}],
+			current: 0,
+			swiperCurrent: 0,
+		}
+	},
+	components: {
+		SpecialGoods
+	},
+	onShow() {
+		this.getPinTuanList();
+	},
+	methods: {
+		getPinTuanList() {
+			this.$u.api.getPinTuanList().then(res => {
+
+			})
+		},
+		// 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;
+		},
+		// scroll-view到底部加载更多
+		onreachBottom() {
+			
+		}
+	}
+};
+</script>
+<style lang="scss" scoped>
+</style>