TalentService-mobile/pages/article/articleList.vue
2024-11-12 17:34:05 +08:00

124 lines
3.2 KiB
Vue
Raw Permalink Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<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: '其它'
}],
form:{
moduleName: '',
labelName: '',
size: 10,
current: 1
},
// 动态列表
dataList:[
[
// {
// top: 0,
// title: '本年度广州市积分制入户申请即将开放!你想知道的都在这里',
// text: '<p>2024年度广州市积分制入户工作正式启动今年的入户指标为1.6万个10月8日起接受积分制入户申请</p>',
// photo: 'static/banner.png',
// view: 597,
// createtime: 1729935783000
// },{
// top: 0,
// title: '本年度广州市积分制入户申请即将开放!你想知道的都在这里',
// text: '<p>2024年度广州市积分制入户工作正式启动今年的入户指标为1.6万个10月8日起接受积分制入户申请</p>',
// photo: 'static/banner.png',
// view: 597,
// createtime: 1729935783000
// }
],
[]
],
current: 0,
isFinish:false
}
},
onLoad(options) {
this.form.moduleName = options.moduleName;
this.form.labelName = options.labelName;
this.getDate();
},
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到底部加载更多-这里没有要在index导航包下的才行
onreachBottom() {
if(this.isFinish) return;
this.form.current++;
this.getDate();
},
// 获取文章列表
async getDate(){
let articleRes = await this.$api.getArticleList(this.form);
if(articleRes?.success){
const { size, current, total, records } = articleRes.data;
if(current === 1) this.dataList[0] = records;
else this.dataList[0].push(...records);
this.isFinish = current*size >= total;
}
}
}
}
</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>