Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
DCloud
uni-app
提交
0137bc7a
U
uni-app
项目概览
DCloud
/
uni-app
4 个月 前同步成功
通知
730
Star
38706
Fork
3642
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
7
列表
看板
标记
里程碑
合并请求
1
DevOps
流水线
流水线任务
计划
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
U
uni-app
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
7
Issue
7
列表
看板
标记
里程碑
合并请求
1
合并请求
1
Pages
DevOps
DevOps
流水线
流水线任务
计划
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
流水线任务
提交
Issue看板
提交
0137bc7a
编写于
10月 20, 2020
作者:
d-u-a
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
docs: uni-clientdb-component
上级
cf893dda
变更
1
隐藏空白更改
内联
并排
Showing
1 changed file
with
35 addition
and
35 deletion
+35
-35
docs/uniCloud/uni-clientdb-component.md
docs/uniCloud/uni-clientdb-component.md
+35
-35
未找到文件。
docs/uniCloud/uni-clientdb-component.md
浏览文件 @
0137bc7a
...
...
@@ -14,7 +14,9 @@ uni-clientdb组件是一个数据库查询组件,它是对uni-clientdb的js库
**平台差异及版本说明**
HBuilderX 2.9.5+ 暂不支持快应用
|App|H5|微信小程序|支付宝小程序|百度小程序|字节跳动小程序|QQ小程序|快应用|360小程序|
|:-:|:-:|:-:|:-:|:-:|:-:|:-:|:-:|:-:|
|√(2.9.5+)|√|√|√|√|√|√|x|√|
#### 属性
...
...
@@ -29,7 +31,8 @@ HBuilderX 2.9.5+ 暂不支持快应用
|orderby|string|排序字段及正序倒叙设置|
|page-current|Number|当前页|
|page-size|Number|每页数据数量|
|need-total|Boolan|是否查询总数据条数,默认
`false`
,需要分页模式时指定为
`true`
|
|page-data|String|
`add`
多次查询的集合,
`replace`
当前查询的集合|
|getcount|Boolan|是否查询总数据条数,默认
`false`
,需要分页模式时指定为
`true`
|
|getone|Boolean|指定查询结果是否返回数组第一条数据,默认 false。在false情况下返回的是数组,即便只有一条结果,也需要[0]的方式获取。在true下,直接返回结果数据,少一层数组。应用场景:详情页|
|action|string|云端执行数据库查询的前或后,触发某个action函数操作,进行预处理或后处理,
[
详情
](
https://uniapp.dcloud.net.cn/uniCloud/uni-clientDB?id=%e4%ba%91%e7%ab%af%e9%83%a8%e5%88%86
)
。场景:前端无权操作的数据,比如阅读数+1|
|manual|Boolean|是否手动加载数据,默认为 false,页面onready时自动联网加载数据。如果设为 true,则需要自行指定时机通过方法
`this.$refs.udb.loadData()`
来触发联网,其中的
`udb`
指组件的ref值|
...
...
@@ -71,8 +74,11 @@ HBuilderX 2.9.5+ 暂不支持快应用
load事件在查询执行后、渲染前触发,一般用于查询数据的二次加工。比如查库结果不能直接渲染时,可以在load事件里先对data进行预处理。
```
@load
``` html
...
<uni-clientdb @load="handleLoad" />
...
handleLoad(data, ended, pagination) {
// `data` 当前查询结果
// `ended` 是否有更多数据
...
...
@@ -82,10 +88,13 @@ handleLoad(data, ended, pagination) {
error事件在查询报错时触发
```
@error
``` html
...
<uni-clientdb @error="handleError" />
...
handleError(e) {
// {
errorM
essage}
// {
m
essage}
}
```
...
...
@@ -128,19 +137,18 @@ this.$refs.udb.loadMore() //udb为uni-clientdb组件的ref属性值
模式1:上拉加载上一页。下一页的查询结果会追加合并到data里
```html
<template>
<view class="content">
<uni-clientdb ref="udb" v-slot:default="{data, pagination, loading, error, options}"
:options="options"
:collection="collection
"
collection="table1
"
orderby="createTime desc"
field="name,subType,createTime"
:getone="false"
:action="action"
:where="where"
@load="onqueryload" @error="onqueryerror">
<view v-if="error" class="error">{{error.
errMsg
}}</view>
<view v-if="error" class="error">{{error.
message
}}</view>
<view v-else class="list">
<view v-for="(item, index) in data" :key="index" class="list-item">
{{ item.createTime }}
...
...
@@ -158,12 +166,6 @@ this.$refs.udb.loadMore() //udb为uni-clientdb组件的ref属性值
data() {
return {
options: {}, // 插槽不能访问外面的数据,通过此参数传递, 不支持传递函数
collection: 'table1',
pagination: {
current: 1,
size: 20,
total: true
},
action: '',
where: {} // 类型为对象或字符串
}
...
...
@@ -235,10 +237,10 @@ this.$refs.udb.loadMore() //udb为uni-clientdb组件的ref属性值
<view class="content">
<uni-clientdb ref="udb" v-slot:default="{data, pagination, loading, error, options}"
:options="options"
collection="
unicloud-test
"
collection="
table1
"
orderby="createTime desc"
field="name,subType,createTime"
:
need-total
="true"
:
getcount
="true"
@load="onqueryload" @error="onqueryerror">
<view>{{pagination}}</view>
<view v-if="error" class="error">{{error.errMsg}}</view>
...
...
@@ -319,29 +321,27 @@ this.$refs.udb.loadMore() //udb为uni-clientdb组件的ref属性值
组件嵌套示例,访问父组件 data
```
<uni-clientdb ref="dataQuery" v-slot:default="{data, pagination, loading, error, options}" :options="options" collection="unicloud-test"
orderby="createTime desc" field="name,createTime"
:where="where" @load="onqueryload" @error="onqueryerror">
<view>{{pagination}}</view>
``` html
<uni-clientdb v-slot:default="{data, loading, error, options}" :options="options" collection="table1"
orderby="createTime desc" field="name,createTime">
<view v-if="error" class="error">{{error.errMsg}}</view>
<view v-else class="list">
<view v-for="(item, index) in data" :key="index" class="list-item">
<!-- table1 返回的数据 -->
<view v-for="(item, index) in options" :key="index" class="list-item">
{{ item.name }}
{{ item.createTime }}
</view>
</view>
<view class="loading" v-if="loading">加载中...</view>
<!-- 嵌套测试 -->
<!-- :options="data",将 父组件返回的 data 通过 options 传递到组件,子组件通过 options 访问 -->
<uni-clientdb ref="dataQuery1" v-slot:default="{loading, data, error, options}" :options="data" collection="unicloud-test"
<!-- 嵌套 -->
<!-- :options="data",将 父组件返回的 data 通过 options 传递到组件,子组件通过 options 访问 -->
<uni-clientdb ref="dataQuery1" v-slot:default="{loading, data, error, options}" :options="data" collection="table2"
orderby="createTime desc" field="name,createTime" @load="onqueryload" @error="onqueryerror">
<view v-if="options" class="error">{{options}}</view>
<view v-if="error" class="error">{{error.errMsg}}</view>
<view v-else class="list">
<view v-for="(item, index) in data" :key="index" class="list-item">
{{ item.name }}
</view>
<!-- 父组件 table1 返回的数据 -->
<view v-for="(item, index) in options" :key="index" class="list-item">
{{ item.name }}
</view>
<!-- 子组件 table2 返回的数据 -->
<view v-for="(item, index) in data" :key="index" class="list-item">
{{ item.name }}
</view>
</uni-clientdb>
</uni-clientdb>
...
...
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录