1，在首页获取数据方法中添加skip和limit方法
1.1，限制按5条数据一页显示：
db.collection(artTemp,userTemp).orderBy(this.navlist[this.navAction].type ,"desc")
.skip(this.dataList.length).limit(5).get()
1.2，uni-load-more组件
用于列表中，做滚动加载使用，展示 loading 的各种状态。参考网址链接
<!-- 加载更多 -->
<view>
<uni-load-more :status="uniLoad"></uni-load-more>
</view>
1.3，首页获取数据完整方法：
//获取首页列表数据
getData() {
//查询文章临时表
let artTemp = db.collection("quanzi_articles").where(`delState != true`).field(
"title,user_id,description,picurls,comment_count,like_count,view_count,publish_date").getTemp();
//查询用户临时表
let userTemp = db.collection("uni-id-users").field("_id,username,nickname,avatar_file").getTemp();
//联表查询 主表文章表 副表用户表 按照发布时间 阅读量数量进行排序
db.collection(artTemp, userTemp).orderBy(this.navlist[this.navAction].type, "desc").skip(this.dataList.length)
.limit(5).get()
.then(async res => {
// console.log(res)
let idArr = []
let oldArr = this.dataList;
//判断每次发送网络请求到的数据，如果长度为0，没有请求到数据
if (res.result.data.length == 0) {
this.noMore = true
}
let resDataArr = [...this.dataList, ...res.result.data]
//判断是否登录
if (store.hasLogin) {
//遍历文章数据，把所有文章id放到一个数组
resDataArr.forEach(item => {
idArr.push(item._id);
})
//查询点赞表，筛选条件是点赞表中的文章id必须包含在文章id数组中，另外用户id跟当前登录用户id一致
let likeRes = await db.collection("quanzi_like").where({
article_id: dbCmd.in(idArr),
user_id: uniCloud.getCurrentUserInfo().uid
}).get()
console.log(likeRes)
//遍历点赞表查询数据，所有点过赞的文章id 存为一个数组，与上述数组比对，找到当前用户点个赞的文章索引
likeRes.result.data.forEach(item => {
let findIndex = resDataArr.findIndex(find => {
return item.article_id == find._id
})
console.log(findIndex)
resDataArr[findIndex].isLike = true
})
}
this.dataList = resDataArr
// 骨架屏消失
this.loadState = false
})
},
2，首页中添加onReachBottom触底加载更多的生命周期函数
2.1，data中定义属性：
data() {
return {
uniLoad: "more",
noMore: false,
...省略其他代码
2.2，添加onReachBottom
//触底加载更多
onReachBottom(){
this.uniLoad='loading'
if(this.noMore) return this.uniLoad="noMore";
this.getData();
},
3，首页完整代码：
<template>
<view class="home">
<!-- 引入uview组件tabs标签 -->
<view class="topnav">
<u-tabs :list="navlist" :activeStyle="{
color: '#333',
fontWeight: 'bold',
transform: 'scale(1.08)'
}" :inactiveStyle="{
color: '#888',
transform: 'scale(1)'
}" @click="clickNav"></u-tabs>
</view>
<!-- 引入uview组件Skeleton 骨架屏 -->
<view class="loadingState" v-show="loadState">
<u-skeleton rows="4" title loading></u-skeleton>
</view>
<!-- 公共组件 博客内容 -->
<view class="content">
<view class="item" v-for="item in dataList">
<blog-item @delEvent="P_delEvent" :item="item" :isLike.sync="item.isLike" :like_count.sync="item.like_count">
</blog-item>
</view>
</view>
<!-- 加载更多 -->
<view>
<uni-load-more :status="uniLoad"></uni-load-more>
</view>
<view class="edit" @click="goAdd">
<text class="iconfont icon-a-21-xiugai"></text>
</view>
</view>
</template>
<script>
import {
store,
mutations
} from '@/uni_modules/uni-id-pages/common/store.js'
const db = uniCloud.database();
const dbCmd = db.command;
export default {
data() {
return {
uniLoad: "more",
noMore: false,
dataList: [],
navAction: 0,
navlist: [{
name: "最新",
type: "publish_date"
},
{
name: "热门",
type: "view_count",
badge: {
isDot: true
}
}
],
//默认显示骨架屏
loadState: true
};
},
onLoad() {
this.getData()
},
//触底加载更多
onReachBottom() {
this.uniLoad = 'loading'
if (this.noMore) return this.uniLoad = "noMore";
this.getData();
},
methods: {
//接收子组件定义的事件方法
P_delEvent() {
this.dataList = [];
this.getData();
},
//获取首页列表数据
getData() {
let artTemp = db.collection("quanzi_articles").where(`delState != true`).field(
"title,user_id,description,picurls,comment_count,like_count,view_count,publish_date").getTemp();
let userTemp = db.collection("uni-id-users").field("_id,username,nickname,avatar_file").getTemp();
db.collection(artTemp, userTemp).orderBy(this.navlist[this.navAction].type, "desc").skip(this.dataList.length)
.limit(5).get()
.then(async res => {
// console.log(res)
let idArr = []
let oldArr = this.dataList;
if (res.result.data.length == 0) {
this.noMore = true
}
let resDataArr = [...this.dataList, ...res.result.data]
if (store.hasLogin) {
resDataArr.forEach(item => {
idArr.push(item._id);
})
let likeRes = await db.collection("quanzi_like").where({
article_id: dbCmd.in(idArr),
user_id: uniCloud.getCurrentUserInfo().uid
}).get()
console.log(likeRes)
likeRes.result.data.forEach(item => {
let findIndex = resDataArr.findIndex(find => {
return item.article_id == find._id
})
console.log(findIndex)
resDataArr[findIndex].isLike = true
})
}
this.dataList = resDataArr
// 骨架屏消失
this.loadState = false
})
},
//切换导航标签
clickNav(e) {
this.loadState = true;
this.dataList = [];
this.navAction = e.index
this.getData()
},
//跳转至新建页面
goAdd() {
uni.navigateTo({
url: "/pages/add/add"
})
}
}
};
</script>
<style lang="scss" scoped>
.home {
.topnav {
margin-bottom: 30rpx;
}
.loadingState {
padding: 30rpx;
}
.content {
.item {
padding: 30rpx;
border-bottom: #F7F7F7 15rpx solid
}
}
.edit {
width: 120rpx;
height: 120rpx;
background: #0199FE;
border-radius: 50%;
color: #fff;
position: fixed;
z-index: 100;
bottom: 150rpx;
right: 50rpx;
display: flex;
justify-content: center;
align-items: center;
box-shadow: 0 0 20rpx rgba(1, 153, 254, 0.8);
.iconfont {
font-size: 50rpx;
}
}
}
</style>
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/135724.html
