deming/components/shop/list/index.vue

<template>
    <view class="list">
        <view class="top">
            商品推荐
        </view>
        <view class="label">
            <text v-for="item in classifyList" :key="item.gc_id">{{ item.gc_name }}</text>
        </view>
        <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",
	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>
<style lang="scss" scoped>
.list{
    .top{
        font-size: 30rpx;
        height: 90rpx;
        line-height: 90rpx;
        text-align: center;
        color: #333;
    }
    .label{
        display: flex;
        color: #999;
		flex-wrap: wrap;
        >text{
            margin-right: 34rpx;
			margin-bottom: 10rpx;
        }
    }
    .item{
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        margin-top: 20rpx;

    }
}
</style>