<!-- ------- ArticleList ------- -->
<template>
<swiper class="swiper-container" :current="activeIndex" @change="changeActiveIndex">
<swiper-item v-for="(item, index) in labelList" :key="item._id">
<view class="swiper-item">
<ListItem :loadData="loadData[index]" :articleList="articleData[index]" @loadMore="loadMoreData"></ListItem>
</view>
</swiper-item>
</swiper>
</template>
<script>
export default {
name:"ArticleList",
props: {
labelList: Array,
activeIndex: Number
},
created() {
// this._getArticleList()
},
watch: {
labelList(newValue, oldValue) {
this._getArticleList(this.activeIndex)
}
},
data() {
return {
articleData: {},
loadData: {},
page: 1,
pageSize: 7
};
},
methods: {
changeActiveIndex(e) {
const {current} = e.detail
this.$emit('changeActiveIndex', current)
if (!this.articleData[current] || this.articleData[current].length === 0) {
this._getArticleList(current)
}
},
/* 进行数据的请求获取 */
async _getArticleList(currentIndex) {
// 指定每一个分类里面的页数信息
if (!this.loadData[currentIndex]) {
this.loadData[currentIndex] = {
page: 1,
loading: 'loading',
total: 0
}
}
const {articleList, total} = await this.$http.get_article_list({
classify: this.labelList[currentIndex].name,
page: this.loadData[currentIndex].page,
pageSize: this.pageSize
})
let oldList = this.articleData[currentIndex] || [] // 追加每一次的请求数据结果
oldList.push(...articleList)
this.loadData[currentIndex].total = total
this.$set(this.articleData, currentIndex, oldList)
},
/* 到底加载更多内容事件 */
loadMoreData() {
if (this.loadData[this.activeIndex].total === this.articleData[this.activeIndex].length) {
this.loadData[this.activeIndex] = {
...this.loadData[this.activeIndex],
...{loading: 'noMore', page: this.loadData[this.activeIndex].page}
}
this.$forceUpdate()
return
}
this.loadData[this.activeIndex].page += 1
this._getArticleList(this.activeIndex)
}
}
}
</script>
<!-- ------- ListItem ------- -->
<template>
<view class="list-scroll-container">
<scroll-view scroll-y="true" class="list-scroll" @scrolltolower="loadMore">
<view>
<ListCard v-for="(item) in articleList" :key="item._id" :item="item"></ListCard>
</view>
<uLi-load-more
v-if="articleList.length === 0 || articleList.length > 7"
:status="loadData.loading || 'loading'"
>
</uLi-load-more>
</scroll-view>
</view>
</template>
<script>
export default {
name:"ListItem",
props: {
articleList: {
type: Array,
default() {
return []
}
},
loadData: {
type: Object,
default() {
return {
loading: 'loading'
}
}
}
},
data() {
return {
};
},
methods: {
loadMore() {
this.$emit('loadMore')
}
}
}
</script>
<!-- ------- ListCard ------- -->
<template>
<view>
<!-- 基础卡片 -->
<view class="list-card" v-if="item.mode === 'base'" @click="goAtricleDetail">
<view class="list-card-img">
<image class="image" :src="item.cover[0] ? item.cover[0] : '/static/img/logo.jpeg'" mode="aspectFill"></image>
</view>
<view class="list-card-content">
<view class="list-card-content-title">
<text class="text">{{item.title}}</text>
<SaveLikes :articleId="item._id"></SaveLikes>
</view>
<view class="list-card-content-desc">
<view class="article-type">
{{item.classify}}
</view>
<view class="browse-number">
{{item.browse_count}}浏览
</view>
</view>
</view>
</view>
<!-- 多图模式 -->
<view class="list-card mode-column" v-if="item.mode === 'column'" @click="goAtricleDetail">
<view class="list-card-top">
<text class="text">{{item.title}}</text>
<SaveLikes :articleId="item._id"></SaveLikes>
</view>
<view class="list-card-middle">
<view class="image-container" v-for="(img, index) in item.cover.slice(0, 3)" :key="index">
<image class="image" :src="img" mode="aspectFill"></image>
</view>
</view>
<view class="list-card-content-desc list-card-bottom">
<view class="article-type">
{{item.classify}}
</view>
<view class="browse-number">
{{item.browse_count}}浏览
</view>
</view>
</view>
<!-- 大图模式 -->
<view class="list-card mode-image" v-if="item.mode==='image'" @click="goAtricleDetail">
<view class="list-card-top">
<view class="image-container">
<image class="image" :src="item.cover[0]" mode="aspectFill"></image>
</view>
</view>
<view class="list-card-middle">
<text class="text">{{item.title}}</text>
<SaveLikes :articleId="item._id"></SaveLikes>
</view>
<view class="list-card-content-desc list-card-bottom">
<view class="article-type">
{{item.classify}}
</view>
<view class="browse-number">
{{item.browse_count}}浏览
</view>
</view>
</view>
</view>
</template>
<script>
export default {
name:"ListCard",
props: {
item: Object
},
data() {
return {
};
},
methods: {
goAtricleDetail() {
console.log('goAtricleDetail')
}
}
}
</script>
看下wxml有没有渲染出来
请问解决了吗,我也遇到这个问题了
吗的,类似的问题,ios,安卓页面渲染出错,出现两个相同标签,代码只写了一个,H5确实正常,难搞