unicloud-db组件分页查询显示实战步骤

官方关于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>