使用unicloud-db组件简介进行分页显示

<unicloud-db> 组件是一个数据库查询组件，它是对clientDB的js库的再封装。

前端通过组件方式直接获取uniCloud的云端数据库中的数据，并绑定在界面上进行渲染。

在传统开发中，开发者需要在前端定义data、通过request联网获取接口数据、然后赋值给data。同时后端还需要写接口来查库和反馈数据。

有了<unicloud-db> 组件，上述工作只需要1行代码！写组件，设组件的属性，在属性中指定要查什么表、哪些字段、以及查询条件，就OK了！

HBuilderX中敲下udb代码块，得到如下代码，然后通过collection属性指定要查询表“table1”，通过field属性指定要查询字段“field1”，并且在where属性中指定查询id为1的数据。查询结果data就可以直接渲染在界面上。

<unicloud-db v-slot:default="{data, loading, error, options}" collection="table1" field="field1" :getone="true" where="id=='1'">
  <view>
    {{ data}}
  </view>
</unicloud-db>

<unicloud-db> 组件尤其适用于列表、详情等展示类页面。开发效率可以大幅度的提升。

<unicloud-db> 组件的查询语法是jql，这是一种比sql语句和nosql语法更简洁、更符合js开发者习惯的查询语法。没学过sql或nosql的前端，也可以轻松掌握。

<unicloud-db> 组件不仅支持查询。还自带了add、remove、update方法。

属性	类型	描述
v-slot:default		查询状态（失败、联网中）及结果（data）
ref	string	vue组件引用标记
spaceInfo	Object	服务空间信息，新增于HBuilderX 3.2.11。同uniCloud.init参数，参考：uniCloud.init
collection	string	表名。支持输入多个表名，用 , 分割，自HBuilderX 3.2.6起也支持传入tempCollection组成的数组
field	string	指定要查询的字段，多个字段用 , 分割。不写本属性，即表示查询所有字段。支持用 oldname as newname方式对返回字段重命名
where	string	查询条件，对记录进行过滤。见下
orderby	string	排序字段及正序倒序设置
foreign-key	String	手动指定使用的关联关系，HBuilderX 3.1.10+ 详情
page-data	String	分页策略选择。值为 add 代表下一页的数据追加到之前的数据中，常用于滚动到底加载下一页；值为 replace 时则替换当前data数据，常用于PC式交互，列表底部有页码分页按钮，默认值为add
page-current	Number	当前页
page-size	Number	每页数据数量
getcount	Boolean	是否查询总数据条数，默认 false，需要分页模式时指定为 true
getone	Boolean	指定查询结果是否仅返回数组第一条数据，默认 false。在false情况下返回的是数组，即便只有一条结果，也需要[0]的方式获取。在值为 true 时，直接返回结果数据，少一层数组，一般用于非列表页，比如详情页
action	string	云端执行数据库查询的前或后，触发某个action函数操作，进行预处理或后处理，详情。场景：前端无权操作的数据，比如阅读数+1
manual	Boolean	已过时，使用 loadtime 替代 是否手动加载数据，默认为 false，页面onready时自动联网加载数据。如果设为 true，则需要自行指定时机通过方法this.$refs.udb.loadData()来触发联网，其中的udb指组件的ref值。一般onLoad因时机太早取不到this.$refs.udb，在onReady里可以取到
gettree	Boolean	是否查询树状结构数据，HBuilderX 3.0.5+ 详情
startwith	String	gettree的第一层级条件，此初始条件可以省略，不传startWith时默认从最顶级开始查询，HBuilderX 3.0.5+
limitlevel	Number	gettree查询返回的树的最大层级。超过设定层级的节点不会返回。默认10级，最大15，最小1，HBuilderX 3.0.5+
groupby	String	对数据进行分组，HBuilderX 3.1.0+
group-field	String	对数据进行分组统计
distinct	Boolean	是否对数据查询结果中重复的记录进行去重，默认值false，HBuilderX 3.1.0+
loadtime	String	加载数据时机，默认auto，可选值 auto|onready|manual,详情 HBuilderX3.1.10+
ssr-key	String	详情 HBuilderX 3.4.11+
@load	EventHandle	成功回调。联网返回结果后，若希望先修改下数据再渲染界面，则在本方法里对data进行修改
@error	EventHandle	失败回调

如何进行分页，需要加入pagination。

v-slot:default

<unicloud-db v-slot:default="{data, pagination, loading, hasMore, error, options}"></unicloud-db>

复制代码

属性	类型	描述
data	Array|Object	查询结果，默认值为Array, 当 getone 指定为 true 时，值为数组中第一条数据，类型为 Object，减少了一层
pagination	Object	分页属性
loading	Boolean	查询中的状态。可根据此状态，在template中通过v-if显示等待内容，如<view v-if="loading">加载中...</view>
hasMore	Boolean	是否有更多数据。可根据此状态，在template中通过v-if显示没有更多数据了，如<uni-load-more v-if="!hasMore" status="noMore"></uni-load-more>, <uni-load-more>详情 uni-load-more 加载更多 - DCloud 插件市场

error	Object	查询错误。可根据此状态，在template中通过v-if显示等待内容，如<view v-if="error">加载错误</view>
options	Object	在小程序中，插槽不能访问外面的数据，需通过此参数传递, 不支持传递函数

提示：如果不指定分页模式， data 为多次查询的集合

<view v-if="searchValue==''">请输入要查询题目中的汉字或者拼音首字母(oﾟ▽ﾟ)o</view>
			<view v-else>
				<unicloud-db ref="udb" v-slot:default="{data, loading, pagination, hasMore, error, options}" collection="questionlib" page-data="add" :page-size="10" :getcount="true"
					field="type,question,xxa,xxb,xxc,xxd,xxe,xxf,xxg,answer" :where="where">
					<view v-if="error">{{error.message}}</view>
					<view v-else-if="loading">玩命加载中...</view>
					<view v-else>
						<view v-if="data.length==0">没有查询到该数据，我也无能为力o(︶︿︶)o</view>
						<view v-else>
							<view class="resultcount">
								<u-icon name="search" size="23" color="#0199fe"></u-icon>
								<text class="resultcount-text">共查询到{{ pagination.count }}条数据</text>
							</view>
							<view class="question" v-for="(item,index) in data" :key="index">
								<view class="question-type">
									<u--text type="primary" :text="item.type" size="35rpx" margin="10rpx"></u--text>
								</view>
								<view class="question-content">
									<u--text size="35rpx" :text="item.question"></u--text>
									<u-parse :content="highLightKey(item.question,searchValue)"></u-parse>
								</view>
								<view class="question-option">
									<u--text v-if="item.xxa" :type="indexof(item.answer,'A') ?'success':''" size="35rpx"
										:text="'A：'+item.xxa"></u--text>
									<u--text v-if="item.xxb" :type="indexof(item.answer,'B') ?'success':''" size="35rpx"
										:text="'B：'+item.xxb"></u--text>
									<u--text v-if="item.xxc" :type="indexof(item.answer,'C') ?'success':''" size="35rpx"
										:text="'C：'+item.xxc"></u--text>
									<u--text v-if="item.xxd" :type="indexof(item.answer,'D') ?'success':''" size="35rpx"
										:text="'D：'+item.xxd"></u--text>
									<u--text v-if="item.xxe" :type="indexof(item.answer,'E') ?'success':''" size="35rpx"
										:text="'E：'+item.xxe"></u--text>
									<u--text v-if="item.xxf" :type="indexof(item.answer,'F') ?'success':''" size="35rpx"
										:text="'F：'+item.xxf"></u--text>
									<u--text v-if="item.xxg" :type="indexof(item.answer,'G') ?'success':''" size="35rpx"
										:text="'G：'+item.xxg"></u--text>
								</view>
								<view class="question-answer">
									<u--text type="success" size="35rpx" align="right" :text="'答案：'+item.answer">
									</u--text>
								</view>
							</view>
							<uni-load-more v-if="!hasMore" status="noMore"></uni-load-more>
						</view>
					</view>
				</unicloud-db>
			</view>

 运行效果

 微信小程序“法务手册”“智慧助手”，欢迎大家品鉴。