82 lines
3.4 KiB
Vue
82 lines
3.4 KiB
Vue
|
<template>
|
||
|
|
<view>
|
||
|
|
<swiperTabSlide @scrollBottom="scrollBottomEv" :list="dataList" :ifloading="ifloading"></swiperTabSlide>
|
||
|
|
<!-- 底部tab -->
|
||
|
|
<foot-tab :current="3"></foot-tab>
|
||
|
|
</view>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
import swiperTabSlide from '@/components/swiper-tab/swiper-tab-slide.vue';
|
||
|
|
// 底部组件
|
||
|
|
import footTab from '@/components/foot-tabs/foot-tab.vue';
|
||
|
|
export default {
|
||
|
|
components:{
|
||
|
|
'foot-tab' :footTab,
|
||
|
|
swiperTabSlide
|
||
|
|
},
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
dataList:[
|
||
|
|
[
|
||
|
|
{title:'标题',content:'描述描述描述描述描述描述描述描述描述描述描述描述',price:199,xiaol:99},
|
||
|
|
{title:'标题',content:'描述描述描述描述描述描述描述描述描述描述描述描述',price:199,xiaol:99},
|
||
|
|
{title:'标题',content:'描述描述描述描述描述描述描述描述描述描述描述描述',price:199,xiaol:99},
|
||
|
|
{title:'标题',content:'描述描述描述描述描述描述描述描述描述描述描述描述',price:199,xiaol:99},
|
||
|
|
{title:'标题',content:'描述描述描述描述描述描述描述描述描述描述描述描述',price:199,xiaol:99},
|
||
|
|
{title:'标题',content:'描述描述描述描述描述描述描述描述描述描述描述描述',price:199,xiaol:99},
|
||
|
|
],
|
||
|
|
[
|
||
|
|
{title:'标题',content:'描述描述描述描述描述描述描述描述描述描述描述描述',price:199,xiaol:99},
|
||
|
|
],
|
||
|
|
[
|
||
|
|
{title:'标题',content:'描述描述描述描述描述描述描述描述描述描述描述描述',price:199,xiaol:99},
|
||
|
|
{title:'标题',content:'描述描述描述描述描述描述描述描述描述描述描述描述',price:199,xiaol:99},
|
||
|
|
{title:'标题',content:'描述描述描述描述描述描述描述描述描述描述描述描述',price:199,xiaol:99},
|
||
|
|
{title:'标题',content:'描述描述描述描述描述描述描述描述描述描述描述描述',price:199,xiaol:99},
|
||
|
|
{title:'标题',content:'描述描述描述描述描述描述描述描述描述描述描述描述',price:199,xiaol:99},
|
||
|
|
{title:'标题',content:'描述描述描述描述描述描述描述描述描述描述描述描述',price:199,xiaol:99},
|
||
|
|
{title:'标题',content:'描述描述描述描述描述描述描述描述描述描述描述描述',price:199,xiaol:99},
|
||
|
|
{title:'标题',content:'描述描述描述描述描述描述描述描述描述描述描述描述',price:199,xiaol:99},
|
||
|
|
],
|
||
|
|
[
|
||
|
|
{title:'标题',content:'描述描述描述描述描述描述描述描述描述描述描述描述',price:199,xiaol:99},
|
||
|
|
],
|
||
|
|
[
|
||
|
|
{title:'标题',content:'描述描述描述描述描述描述描述描述描述描述描述描述',price:199,xiaol:99},
|
||
|
|
],
|
||
|
|
[
|
||
|
|
{title:'标题',content:'描述描述描述描述描述描述描述描述描述描述描述描述',price:199,xiaol:99},
|
||
|
|
],
|
||
|
|
],
|
||
|
|
ifloading:false,
|
||
|
|
flag:true
|
||
|
|
}
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
scrollBottomEv(e){
|
||
|
|
if(this.flag){
|
||
|
|
this.flag = false;
|
||
|
|
this.ifloading = true;
|
||
|
|
setTimeout(()=>{
|
||
|
|
for (let i = 0; i < 2; i++) {
|
||
|
|
let obj = {
|
||
|
|
title:'标题',content:'描述描述描述描述描述描述描述描述描述描述描述描述',price:199,xiaol:99
|
||
|
|
}
|
||
|
|
this.dataList[e].push(obj);
|
||
|
|
}
|
||
|
|
this.ifloading = false;
|
||
|
|
this.flag = true;
|
||
|
|
},1000)
|
||
|
|
// 重新渲染组件
|
||
|
|
this.$forceUpdate();
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style>
|
||
|
|
|
||
|
|
</style>
|