97 lines
2.5 KiB
Vue
97 lines
2.5 KiB
Vue
|
<template>
|
|||
|
|
<view>
|
|||
|
|
<u-tabs-swiper ref="uTabs" :list="navList" :current="current" :is-scroll="false"
|
|||
|
|
@change="tabsChange" barWidth="120"></u-tabs-swiper>
|
|||
|
|
<swiper class="swiper" :current="current" @transition="transition" @animationfinish="animationfinish">
|
|||
|
|
<swiper-item class="swiper-item" v-for="(item, index) in 2" :key="index">
|
|||
|
|
<scroll-view class="scroll" scroll-y @scrolltolower="onreachBottom">
|
|||
|
|
<u-empty v-if="dataList[index]==null||dataList[index].length===0" mode="list"></u-empty>
|
|||
|
|
<view v-else>
|
|||
|
|
<Dynamics :list="dataList[index]" tip="HOT" />
|
|||
|
|
</view>
|
|||
|
|
</scroll-view>
|
|||
|
|
</swiper-item>
|
|||
|
|
</swiper>
|
|||
|
|
</view>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
import Dynamics from "@/pages/home/component/dynamics.vue";
|
|||
|
|
export default {
|
|||
|
|
components: {
|
|||
|
|
Dynamics
|
|||
|
|
},
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
navList: [{
|
|||
|
|
name: '全部'
|
|||
|
|
}, {
|
|||
|
|
name: '其它'
|
|||
|
|
}],
|
|||
|
|
dataList:[
|
|||
|
|
[{
|
|||
|
|
isTop: true,
|
|||
|
|
title: '本年度广州市积分制入户申请即将开放！你想知道的都在这里',
|
|||
|
|
content: '<p>2024年度广州市积分制入户工作正式启动今年的入户指标为1.6万个10月8日起接受积分制入户申请</p>',
|
|||
|
|
img: 'http://8.138.171.103/static/banner.png',
|
|||
|
|
readCount: 597,
|
|||
|
|
date: '2024-04-30'
|
|||
|
|
},{
|
|||
|
|
isTop: false,
|
|||
|
|
title: '本年度广州市积分制入户申请即将开放！你想知道的都在这里',
|
|||
|
|
content: '<p>2024年度广州市积分制入户工作正式启动今年的入户指标为1.6万个10月8日起接受积分制入户申请</p>',
|
|||
|
|
img: 'http://8.138.171.103/static/banner.png',
|
|||
|
|
readCount: 597,
|
|||
|
|
date: '2024-04-30'
|
|||
|
|
}],
|
|||
|
|
[]
|
|||
|
|
],
|
|||
|
|
current: 0
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
methods: {
|
|||
|
|
tabsChange(index) {
|
|||
|
|
this.current = index;
|
|||
|
|
},
|
|||
|
|
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.current = current;
|
|||
|
|
},
|
|||
|
|
// scroll-view到底部加载更多
|
|||
|
|
onreachBottom() {
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style>
|
|||
|
|
page{
|
|||
|
|
background-color: #F9F9F9F9;
|
|||
|
|
}
|
|||
|
|
</style>
|
|||
|
|
<style scoped lang="scss">
|
|||
|
|
.swiper{
|
|||
|
|
height: calc(100vh - 80rpx);
|
|||
|
|
.swiper-item{
|
|||
|
|
height: 100%;
|
|||
|
|
.scroll{
|
|||
|
|
height: 100%;
|
|||
|
|
margin-top: 20rpx;
|
|||
|
|
width: 100%;
|
|||
|
|
background-color: #FFFFFF;
|
|||
|
|
view{
|
|||
|
|
padding: 0 25rpx;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</style>
|