94 lines
2.3 KiB
Vue
94 lines
2.3 KiB
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> |