113 lines
5.1 KiB
Vue
113 lines
5.1 KiB
Vue
<template>
|
|
<view class="pad-x160">
|
|
<notice-one direction="row"></notice-one>
|
|
<swiper-adaptive ref="tabsSwiper" :tabs="tabsData" @currentEv="obtainCurrent">
|
|
<template v-slot="{listData}">
|
|
<view class="disjbac mar-zy20 pad-sx20 bbot" v-for="(item,index) in listData" :key="index">
|
|
<view class="posir">
|
|
<image class="flexs mar-y20 radius10" src="/static/del/500478055.png" mode="" style="width: 200rpx;height: 200rpx;"></image>
|
|
</view>
|
|
<view class="width100 disjb fc" style="height: 200rpx;">
|
|
<view class="line-h40">
|
|
<view class="fon30 clips2">{{item.title}}{{currentIndex}}</view>
|
|
<view class="fon24 col9 clips2">{{index}}{{item.content}}</view>
|
|
</view>
|
|
<view class="disjbac fon26">
|
|
<view @tap="chooseImg" class="colf8 bold">￥{{item.price}}</view>
|
|
<view class="col5b">销量：{{item.salesVolume}}</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
</swiper-adaptive>
|
|
<!-- 底部tab -->
|
|
<foot-tab :current="1"></foot-tab>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import noticeOne from '@/components/notices/notice-one/notice-one.vue';
|
|
// 底部组件
|
|
import footTabOne from '@/components/foot-tabs/foot-tab-one.vue';
|
|
import swiperAdaptive from '@/components/swiper-tab/swiper-adaptive.vue';
|
|
export default {
|
|
components:{
|
|
'foot-tab' :footTabOne,
|
|
noticeOne,
|
|
swiperAdaptive
|
|
},
|
|
data() {
|
|
return {
|
|
tabsData: [
|
|
{
|
|
title: '标题1',
|
|
des: "描述",
|
|
data: [
|
|
{id:1,title:'2022年oppo最新款2022年oppo最新款2022年oppo最新款',content:'描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述',price:199,salesVolume:99},
|
|
{id:2,title:'2022年oppo最新款',content:'描述描述描述描述描述描述',price:199,salesVolume:99},
|
|
{id:3,title:'2022年oppo最新款',content:'描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述',price:199,salesVolume:99},
|
|
{id:4,title:'2022年oppo最新款',content:'描述描述描述描述描述描述',price:199,salesVolume:99},
|
|
{id:5,title:'2022年oppo最新款',content:'描述描述描述描述描述描述',price:199,salesVolume:99},
|
|
{id:5,title:'2022年oppo最新款',content:'描述描述描述描述描述描述',price:199,salesVolume:99},
|
|
{id:5,title:'2022年oppo最新款',content:'描述描述描述描述描述描述',price:199,salesVolume:99},
|
|
]
|
|
}, {
|
|
title: '标题2',
|
|
des: "描述",
|
|
data: [
|
|
{id:1,title:'2022年oppo最新款',content:'描述描述描述描述描述描述',price:199,salesVolume:99},
|
|
{id:2,title:'2022年oppo最新款',content:'描述描述描述描述描述描述',price:199,salesVolume:99},
|
|
{id:3,title:'2022年oppo最新款',content:'描述描述描述描述描述描述',price:199,salesVolume:99},
|
|
{id:4,title:'2022年oppo最新款',content:'描述描述描述描述描述描述',price:199,salesVolume:99},
|
|
{id:5,title:'2022年oppo最新款',content:'描述描述描述描述描述描述',price:199,salesVolume:99},
|
|
]
|
|
}, {
|
|
title: '标题3',
|
|
des: "描述",
|
|
data: [
|
|
{id:1,title:'2022年oppo最新款',content:'描述描述描述描述描述描述',price:199,salesVolume:99},
|
|
{id:2,title:'2022年oppo最新款',content:'描述描述描述描述描述描述',price:199,salesVolume:99},
|
|
{id:3,title:'2022年oppo最新款',content:'描述描述描述描述描述描述',price:199,salesVolume:99},
|
|
{id:4,title:'2022年oppo最新款',content:'描述描述描述描述描述描述',price:199,salesVolume:99},
|
|
{id:5,title:'2022年oppo最新款',content:'描述描述描述描述描述描述',price:199,salesVolume:99},
|
|
{id:1,title:'2022年oppo最新款',content:'描述描述描述描述描述描述',price:199,salesVolume:99},
|
|
{id:2,title:'2022年oppo最新款',content:'描述描述描述描述描述描述',price:199,salesVolume:99},
|
|
{id:3,title:'2022年oppo最新款',content:'描述描述描述描述描述描述',price:199,salesVolume:99},
|
|
{id:4,title:'2022年oppo最新款',content:'描述描述描述描述描述描述',price:199,salesVolume:99},
|
|
{id:5,title:'2022年oppo最新款',content:'描述描述描述描述描述描述',price:199,salesVolume:99},
|
|
]
|
|
}],
|
|
currentIndex:0
|
|
}
|
|
},
|
|
onReachBottom() {
|
|
// if(this.currentIndex==0) {
|
|
for (let i = 0; i < 2; i++) {
|
|
let obj = {
|
|
id:1,
|
|
title:'2022年oppo最新款',
|
|
content:'描述描述描述描述描述描述',
|
|
price:199,
|
|
salesVolume:99,
|
|
}
|
|
this.tabsData[this.currentIndex].data.push(obj);
|
|
}
|
|
this.$forceUpdate()
|
|
this.$refs.tabsSwiper.initSwiperHeight(`.list${this.currentIndex}`)
|
|
console.log(this.tabsData[this.currentIndex].data.length);
|
|
// }
|
|
},
|
|
methods: {
|
|
obtainCurrent(e){
|
|
console.log(e);
|
|
this.currentIndex = e;
|
|
},
|
|
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
|
|
</style>
|