官方关于unicloud-db分页的文档比较杂乱,这里直接放出直接实践的步骤(完整代码附后)
注意:实例使用的是列表分页模式2:使用分页控件,点击第二页则只显示第二页数据,第一页数据清空。data会重置为下一页的查询结果,上一页数据丢弃
第一步:在<unicloud-db> v-slot:default=”{data, pagination, loading, error, options}”> 中增加 pagination选项;(注意使用udb代码块自动生成的代码里没有 pagination ,如果需要分页显示,要自己添加)
<unicloud-db ref="udb" v-slot:default="{data,pagination,loading, error, options}">
第二步:在<unicloud-db> 组件属性中增加 page-data age-current page-size getcount 选项 :
page-data | String | 分页策略选择。值为 add 代表下一页的数据追加到之前的数据中,常用于滚动到底加载下一页;值为 replace 时则替换当前data数据,常用于PC式交互,列表底部有页码分页按钮,默认值为add |
page-current | Number | 当前显示的页码 |
page-size | Number | 每页数据数量 |
getcount | Boolean | 是否查询总数据条数,默认 false ,需要分页模式时指定为 true |
<unicloud-db ref="udb" v-slot:default="{data,pagination,loading, error, options}"
page-data="replace" :page-current="1" :page-size="2" getcount>
如果您的数据库有数据并连接正常,完成以上两步,就可以使用{{ pagination }}显示出基本的分页信息了。
{ "current": 1, "size": 20, "count": 4 }
第三步:增加显示分页的组件:此时可以在列表底部显示出分页控件了,但是还不能点击跳转。
<!-- 分页组件 -->
<uni-pagination show-icon :page-size="pagination.size" :total="pagination.count" @change="onpagination" />
第四步:在methods中添加点击跳转的方法。 @change=”onpagination” 此时大功告成@!
methods: {
onpagination(e) {
this.$refs.udb.loadData({
current: e.current
})
}
}
注意事项:此时,分页显示控件的颜色样式是uniappUI默认的蓝色,如果需要修改,需要在APP.vue中引入或者直接写入覆盖原样式。直接把覆盖的样式写在组件页面内是不能生效的。
//app.vue页面
<style>
/* 分页器组件中当前页的背景色重写 */
.page--active{
background-color: #228B22!important;
}
</style>
完整实例:
<template>
<view class="p-5">
<unicloud-db ref="songlist" v-slot:default="{data,pagination,loading, error, options}" page-data="replace"
:page-current="1" :page-size="2" getcount collection="my-music-style-list" @load="handleLoad"
field="create_date,description,listName,listPoster}"
orderby="create_date desc">
<view v-if="error">{{error.message}}</view>
<view v-else>
{{pagination}}
<view class="" v-for="(item,index) in data" :key="index">
<view class="">{{item.listName}}</view>
<view class="flex">
<t-btn color="error" @click="delList(item._id)" size="xs">删除</t-btn>
<navigator :url="`/pages/music/songList/edit?id=${item._id}`">
<t-btn color="base" size="xs">编辑</t-btn>
</navigator>
</view>
<t-divider />
</view>
<!-- 分页组件 -->
<uni-pagination show-icon :page-size="pagination.size" :total="pagination.count"
@change="onpagination" />
</view>
</unicloud-db>
</view>
</template>
<script>
export default {
methods: {
handleLoad(data, ended, pagination) {
// `data` 当前查询结果
// `ended` 是否有更多数据
// `pagination` 分页信息 HBuilderX 3.1.5+ 支持
console.log(data)
},
delList(id) {
console.log('list')
this.$refs.songlist.remove(id)
},
onpagination(e) {
this.$refs.songlist.loadData({
current: e.current
})
}
}
}
</script>
<style>
</style>