Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
DCloud
uni-app
提交
f334745d
U
uni-app
项目概览
DCloud
/
uni-app
3 个月 前同步成功
通知
719
Star
38705
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看板
体验新版 GitCode,发现更多精彩内容 >>
You need to sign in or sign up before continuing.
提交
f334745d
编写于
10月 19, 2020
作者:
inkwalk
浏览文件
操作
浏览文件
下载
差异文件
Merge branch 'master' of
https://github.com/dcloudio/uni-app
上级
82ae983a
35da174f
变更
2
显示空白变更内容
内联
并排
Showing
2 changed file
with
312 addition
and
2 deletion
+312
-2
docs/adapt.md
docs/adapt.md
+7
-2
docs/uniCloud/uni-clientdb-component.md
docs/uniCloud/uni-clientdb-component.md
+305
-0
未找到文件。
docs/adapt.md
浏览文件 @
f334745d
...
...
@@ -86,6 +86,8 @@ rightWindow对应的页面不需要重写一遍新闻详情的页面逻辑,只
<!--responsive/right-window.vue-->
<template>
<view>
<!-- 这里将 /pages/detail/detail.nvue 页面作为一个组件使用 -->
<!-- 路径 “/pages/detail/detail” 转为 “pages-detail-detail” 组件 -->
<pages-detail-detail
ref=
"detailPage"
></pages-detail-detail>
</view>
</template>
...
...
@@ -93,7 +95,9 @@ rightWindow对应的页面不需要重写一遍新闻详情的页面逻辑,只
<script>
export
default
{
created
(
e
)
{
//监听自定义事件,该事件由详情页列表的点击触发
uni
.
$on
(
'
updateDetail
'
,
(
e
)
=>
{
// 执行 detailPage组件,即:/pages/detail/detail.nvue 页面的load方法
this
.
$refs
.
detailPage
.
load
(
e
.
detail
);
})
},
...
...
@@ -104,14 +108,15 @@ rightWindow对应的页面不需要重写一遍新闻详情的页面逻辑,只
```
然后在新闻列表页面,处理点击列表后与rightWindow交互通信的逻辑。
```
js
// pages/news/news-page.nvue
goDetail
(
detail
)
{
if
(
this
.
_isWidescreen
)
{
//
宽屏时与rightWindow通信
if
(
this
.
_isWidescreen
)
{
//
若为宽屏,则触发右侧详情页的自定义事件,通知右侧窗体刷新新闻详情
uni
.
$emit
(
'
updateDetail
'
,
{
detail
:
encodeURIComponent
(
JSON
.
stringify
(
detail
))
})
}
else
{
//
窄屏时继续跳转
新窗体,在新窗体打开详情页面
}
else
{
//
若为窄评,则打开
新窗体,在新窗体打开详情页面
uni
.
navigateTo
({
url
:
'
/pages/detail/detail?query=
'
+
encodeURIComponent
(
JSON
.
stringify
(
detail
))
});
...
...
docs/uniCloud/uni-clientdb-component.md
0 → 100644
浏览文件 @
f334745d
# uni-clientdb
uni-clientdb是一个数据库查询组件
HBuilderX 2.9.5+ 支持
**平台差异说明**
|App|H5|微信小程序|支付宝小程序|百度小程序|字节跳动小程序|
|:-:|:-:|:-:|:-:|:-:|:-:|
|√|√|√|√|√|√|√|√|√|
#### 属性
|属性|类型|描述|
|:-|:-|:-|
|v-slot:default||查询状态及结果|
|collection|string|表名|
|orderby|string|排序|
|field|string|查询字段,多个字段用
`,`
分割|
|where|string|查询条件,
[
详情
](
https://uniapp.dcloud.net.cn/uniCloud/uni-clientDB?id=jsquery
)
|
|getone|Boolean|指定查询结果是否返回数组第一条数据,默认位 false,应用场景:详情页|
|action|string|调用数据库查询前后执行的操作,
[
详情
](
https://uniapp.dcloud.net.cn/uniCloud/uni-clientDB?id=%e4%ba%91%e7%ab%af%e9%83%a8%e5%88%86
)
|
|manual|Boolean|是否手动加载数据,默认位 false,自动加载数据|
|@load|EventHandle|成功回调|
|@error|EventHandle|失败回调|
**提示:目前仅支持单表查询**
#### v-slot:default
```
<uni-clientdb v-slot:default="{data, pagination, loading, error, options}"></uni-clientdb>
```
|属性|类型|描述|
|:-|:-|:-|
|data|Array
|
Object|查询结果,默认值为
`Array`
, 当
`getone`
指定为
`true`
时,值为数组中第一条数据,类型为
`Object`
|
|pagination|Object|分页属性|
|loading|Boolean|查询状态|
|error|Object|查询错误|
|options|Object|插槽不能访问外面的数据,通过此参数传递, 不支持传递函数|
**提示:如果不指定分页模式, `data` 为多次查询的集合**
#### orderby
格式为
`字段名`
空格
`asc`
(升序)/
`desc`
(降序)
`,多个字段用 `
,
` 分割,优先级为字段顺序
示例代码
```
<uni-clientdb orderby="createTime desc"></uni-clientdb>
```
#### pagination属性
|属性|类型|描述|
|:-|:-|:-|
|current|Number|当前页|
|size|Number|每页多少条数据|
|total|Boolean|分页模式,默认 `
false
`,需要分页模式时指定为 `
true
`|
#### 事件
```
@load
handleLoad(data, ended, pagination) {
// `data` 当前查询结果
// `ended` 是否有更多数据
// `pagination` 分页信息
}
```
```
@error
handleError(e) {
// {errorMessage}
}
```
#### 方法
```
// loadMore
// 使用ref方式访问组件方法加载更过数据,每加载成功一次,当前页 +1
this.$refs.dataQuery.loadMore()
```
#### 示例代码
**需要在 uniCloud 控制台增加 Schema 权限配置**,详情 [https://uniapp.dcloud.net.cn/uniCloud/schema](https://uniapp.dcloud.net.cn/uniCloud/schema)
滚动模式
```
<template>
<view class="content">
<uni-clientdb ref="dataQuery" v-slot:default="{data, pagination, loading, error, options}"
:options="options"
:collection="collection"
orderby="createTime desc"
field="name,subType,createTime"
:getone="false"
:action="action"
:where="where"
:pagination="pagination" @load="onqueryload" @error="onqueryerror">
<view>{{pagination}}</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.createTime }}
<!-- 使用日期格式化组件,详情见插件 https://ext.dcloud.net.cn/search?q=date-format -->
<!-- <uni-date-format :date="item.createTime" /> -->
</view>
</view>
<view class="loading" v-if="loading">加载中...</view>
</uni-clientdb>
</view>
</template>
<script>
export default {
data() {
return {
options: {}, // 插槽不能访问外面的数据,通过此参数传递, 不支持传递函数
collection: 'unicloud-test',
pagination: {
current: 1,
size: 10,
total: true
},
action: '',
where: {} // 类型为对象或字符串
}
},
onReady() {
// 当 uni-clientdb manual 属性设为为 true 时,手动加载数据
// this.$refs.dataQuery.loadData()
},
onPullDownRefresh() {
this.$refs.dataQuery.loadData({
clear: true
}, () => {
uni.stopPullDownRefresh()
})
},
onReachBottom() {
this.$refs.dataQuery.loadMore()
},
methods: {
onqueryload(data, ended) {
// 格式化数据
data.forEach((item) => {
item.createTime = new Date(item.createTime).toLocaleString()
})
if (ended) {
// 没有更多数据了
}
},
onqueryerror(e) {
// 加载数据失败
}
}
}
</script>
<style>
.content {
display: flex;
flex-direction: column;
background-color: #f0f0f0;
}
.list-item {
background-color: #fff;
margin-bottom: 1px;
padding: 30px 15px;
}
.loading {
padding: 20px;
text-align: center;
}
.error {
color: #DD524D;
}
</style>
```
分页模式
```
<template>
<view class="content">
<uni-clientdb ref="dataQuery" v-slot:default="{data, pagination, loading, error, options}"
:options="options"
:collection="collection"
orderby="createTime desc"
field="name,subType,createTime"
:getone="false"
:action="action"
:pagination="pagination" @load="onqueryload" @error="onqueryerror">
<view>{{pagination}}</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.createTime }}
</view>
</view>
<view class="loading" v-if="loading">加载中...</view>
<!-- 分页组件 -->
<uni-pagination show-icon :page-size="pagination.size" v-model="options.current" total="pagination.total" @change="onpagination" />
</uni-clientdb>
</view>
</template>
<script>
export default {
data() {
return {
options: {}, // 插槽不能访问外面的数据,通过此参数传递, 不支持传递函数
collection: 'unicloud-test',
pagination: {
current: 1,
size: 10,
total: true
},
action: '',
where: {} // 类型为对象或字符串
}
},
onPullDownRefresh() {
this.$refs.dataQuery.loadData({
clear: true
}, () => {
uni.stopPullDownRefresh()
})
},
methods: {
onqueryload(data, ended) {
data.forEach((item) => {
item.createTime = new Date(item.createTime).toLocaleString()
})
if (ended) {
// 没有更多数据了
}
},
onqueryerror(e) {
// 加载数据失败
},
onpagination(e) {
this.$refs.dataQuery.loadData({
current: e.current
})
}
}
}
</script>
<style>
.content {
display: flex;
flex-direction: column;
background-color: #f0f0f0;
}
.list-item {
background-color: #fff;
margin-bottom: 1px;
padding: 30px 15px;
}
.loading {
padding: 20px;
text-align: center;
}
.error {
color: #DD524D;
}
</style>
```
**调试小技巧**
- H5平台,开发模式下浏览器控制台输入 `
unidev.clientDB.data
`,可查看组件内部数据,多个组件通过索引查看 `
unidev.clientDB.data[0]
`
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录