Skip to content

U
uni-starter

萌新之路 / uni-starter
与 Fork 源项目一致

Fork自 DCloud / uni-starter

通知 1
Star 1
Fork 0
U
uni-starter

体验新版 GitCode，发现更多精彩内容 >>

提交 b2f5acdc 编写于 作者: DCloud_JSON's avatar DCloud_JSON
浏览文件
操作

新增uni-load-state组件，这是一个封装数据请求状态的组件。根据uniCloud-db组件提供的参数直接响应对应的效果。包括加载中、当前页面为空、... 

新增uni-load-state组件，这是一个封装数据请求状态的组件。根据uniCloud-db组件提供的参数直接响应对应的效果。包括加载中、当前页面为空、没有更多数据、上拉加载更多；加载错误判断，如果是断网就引导打开系统网络设置页面。恢复联网后自动触发networkResume方法。
上级 1c37373a
隐藏空白更改
内联 并排
Showing with 151 addition and 104 deletion
pages.json
浏览文件 @ b2f5acdc
......@@ -149,13 +149,12 @@
"navigationBarTitleText": "注册",
"enablePullDownRefresh": false
}
},
{
"path": "pages/ucenter/read-news-log/read-news-log",
"style": {
"navigationBarTitleText": "阅读记录",
"enablePullDownRefresh": false
"enablePullDownRefresh": true
}
}
],
......
pages/list/list.nvue
浏览文件 @ b2f5acdc
......@@ -7,51 +7,31 @@
<uni-search-bar @click="searchClick" class="uni-search-box" v-model="keyword" ref="searchBar" radius="100" cancelButton="none" disabled/>
<unicloud-db ref='udb' v-slot:default="{data,pagination,hasMore, loading, error, options}" @error="onqueryerror"
:where="where" collection="opendb-news-articles,uni-id-users" :page-size="10"
field="avatar,title,last_modify_date,user_id{username}">
field="avatar,title,last_modify_date,user_id{username}">
<!-- 基于 uni-list 的页面布局 -->
<uni-list class="uni-list" :border="false" :bounce="true" :alwaysScrollableVertical="true" :style="{height:listHight}">
<uni-list-item v-if="error">
<uni-list-item :to="'./detail?id='+item._id+'&title='+item.title"
v-for="(item,index) in data" :key="index">
<!-- 通过header插槽定义列表左侧图片 -->
<template v-slot:header>
<image class="avatar" :src="item.avatar" mode="aspectFill"></image>
</template>
<!-- 通过body插槽定义布局 -->
<view slot="body" class="main">
<text class="title">{{ item.title }}</text>
<view class="info">
<text class="author">{{item.user_id[0].username}}</text>
<uni-dateformat class="last_modify_date" :date="item.last_modify_date"
format="yyyy-MM-dd" :threshold="[60000, 2592000000]" />
</view>
</view>
</uni-list-item>
<uni-list-item>
<template slot="body">
<!-- 设置网络 -->
<uni-network @change="refresh" @retry="refresh"></uni-network>
<uni-load-state @networkResume="refresh" :state="{data,pagination,hasMore, loading, error}"></uni-load-state>
</template>
</uni-list-item>
<template v-else>
<uni-list-item class="get-data-state" v-if="data.length===0&&pagination.current===1">
<view class="f1" slot="body">
<!-- 数据为空 当前页码为1，且正在加载中;这里为了演示，更加直观的表达内部逻辑。商用项目建议将这部分封装为组件，更好的让业务逻辑与功能分离-->
<uni-load-more v-if="loading" status="loading"></uni-load-more>
<template v-else>
<text class="get-data-state-text">内容为空</text>
</template>
</view>
</uni-list-item>
<uni-list-item :to="'./detail?id='+item._id+'&title='+item.title"
v-for="(item,index) in data" :key="index">
<!-- 通过header插槽定义列表左侧图片 -->
<template v-slot:header>
<image class="avatar" :src="item.avatar" mode="aspectFill"></image>
</template>
<!-- 通过body插槽定义布局 -->
<view slot="body" class="main">
<text class="title">{{ item.title }}</text>
<view class="info">
<text class="author">{{item.user_id[0].username}}</text>
<uni-dateformat class="last_modify_date" :date="item.last_modify_date"
format="yyyy-MM-dd" :threshold="[60000, 2592000000]" />
</view>
</view>
</uni-list-item>
<!-- 存在下一页数据 && 不是正在加载中 && 已经满一页； 通过 loadMore 组件实现上拉加载效果，如需自定义显示内容，可参考：https://ext.dcloud.net.cn/plugin?id=29 -->
<uni-list-item v-if="!loading&&data.length>10">
<template slot="body">
<uni-load-more :status="hasMore ? 'more' : 'noMore'"></uni-load-more>
</template>
</uni-list-item>
</template>
</uni-list>
</uni-list-item>
</uni-list>
</unicloud-db>
</view>
</template>
......
pages/ucenter/read-news-log/read-news-log.vue
浏览文件 @ b2f5acdc
......@@ -3,22 +3,17 @@
<unicloud-db ref="udb" v-slot:default="{data, pagination, loading, hasMore, error}" :where="udbWhere"
collection="opendb-news-articles" @load="isLoading == false" @error="isLoading == false"
field="title,_id" :page-size="10">
<view v-if="data && data.length">
<uni-list>
<uni-list-item v-for="(item, index) in data" :key="index" :clickable="true"
@click="handleItemClick(item)">
<view slot="body">
<text>{{item.title}}</text>
<uni-dateformat class="article-date" :date="readNewsLog[index].last_time" format="yyyy-MM-dd hh:mm"
:threshold="[0, 0]" />
</view>
</uni-list-item>
</uni-list>
</view>
<view v-else>
<uni-load-more v-if="!loading" status="noMore"></uni-load-more>
</view>
<uni-load-more v-if="data.length>10" :status="loading?'loading':(hasMore ? 'more' : 'noMore')"></uni-load-more>
<uni-list>
<uni-list-item v-for="(item, index) in data" :key="index" :clickable="true"
@click="handleItemClick(item)">
<view slot="body">
<text>{{item.title}}</text>
<uni-dateformat class="article-date" :date="readNewsLog[index].last_time" format="yyyy-MM-dd hh:mm"
:threshold="[0, 0]" />
</view>
</uni-list-item>
</uni-list>
<uni-load-state @networkResume="refreshData" :state="{data,pagination,hasMore, loading, error}"></uni-load-state>
</unicloud-db>
</view>
</template>
......
uni_modules/read-news-log/js_sdk/validator/opendb-news-favorite.js 已删除 100644 → 0
浏览文件 @ 1c37373a
// 表单校验规则由 schema2code 生成，不建议直接修改校验规则，而建议通过 schema2code 生成, 详情: https://uniapp.dcloud.net.cn/uniCloud/schema
const validator = {
"article_id": {
"rules": [
{
"required": true
},
{
"format": "string"
}
]
},
"create_date": {
"rules": [
{
"format": "timestamp"
}
]
}
}
const enumConverter = {}
export { validator, enumConverter }
uni_modules/read-news-log/readme.md 已删除 100644 → 0
浏览文件 @ 1c37373a
# opendb-news-favorite
\ No newline at end of file
components/uni-network/uni-network.vue → uni_modules/uni-load-state/components/uni-load-state/uni-load-state.vue
浏览文件 @ b2f5acdc
<template>
<view class="box" v-if="networkType == 'none'">
<image class="icon-image" src="../../static/uni-network/disconnection.png" mode="widthFix"></image>
<text class="tip-text">网络异常</text>
<view class="btn btn-default" v-if="networkType!='none'" @click="retry">
<text class="btn-text">重试</text>
</view>
<view class="btn btn-default" v-if="networkType=='none'" @click="openSettings">
<text class="btn-text">前往设置</text>
<view style="flex:1">
<template v-if="!state.error">
<uni-load-more v-if="state.loading||state.pagination.current!=1||state.data.length!=0" :status="state.loading?'loading':(state.hasMore?'hasMore':'noMore')"></uni-load-more>
<text class="noData" v-else>暂无数据</text>
</template>
<view v-else>
<view class="box" v-if="networkType == 'none'">
<image class="icon-image" src="@/static/uni-load-state/disconnection.png" mode="widthFix"></image>
<text class="tip-text">网络异常</text>
<view class="btn btn-default" @click="openSettings">
<text class="btn-text">前往设置</text>
</view>
</view>
<view v-else>
错误：{{state.error}}
</view>
</view>
</view>
</template>
<script>
<script>
export default {
name: "uni-network",
name: "uni-load-state",
data() {
return {
"networkType": ""
};
},
props: {
state:{
type: Object,
default(){
return {
"loading":true,
"hasMore":false,
"pagination":{"pages":0},
"data":[],
"error":{}
}
}
}
},
mounted() {
mounted() {
uni.onNetworkStatusChange(({
networkType
}) => {
if(this.networkType == 'none' && networkType != 'none'){
this.change()
if(this.networkType == 'none' && networkType != 'none'){ //之前没网现在有了
this.$emit('networkResume')
}
this.networkType = networkType;
});
......@@ -54,9 +76,6 @@
var intent = new Intent(Settings.ACTION_SETTINGS);
mainActivity.startActivity(intent);
}
},
change(){
this.$emit('change')
}
}
}
......@@ -99,5 +118,11 @@
border-style: solid;
border-width: 1px;
border-radius: 3px;
}
.noData{
text-align: center;
padding: 30rpx;
flex-direction: 1;
}
</style>
uni_modules/read-news-log/package.json → uni_modules/uni-load-state/package.json
浏览文件 @ b2f5acdc
{
"id": "opendb-news-favorite",
"displayName": "opendb-news-favorite",
"id": "auni-load-state",
"displayName": "auni-load-state",
"version": "1.0.0",
"description": "",
"description": "auni-load-state",
"keywords": [
"opendb-news-favorite"
],
"auni-load-state"
],
"repository": "",
"engines": {
"HBuilderX": "^3.1.0"
},
"dcloudext": {
"category": [
"uniCloud",
"Admin插件"
"前端组件",
"通用组件"
],
"sale": {
"regular": {
......@@ -27,57 +27,44 @@
"qq": ""
},
"declaration": {
"ads": "无",
"data": "无",
"permissions": "无"
"ads": "",
"data": "",
"permissions": ""
},
"npmurl": ""
},
"uni_modules": {
"dependencies": [
"uni-dateformat",
"uni-badge",
"uni-icons",
"uni-link",
"uni-load-more",
"uni-forms",
"uni-group",
"uni-list",
"uni-fab",
"uni-datetime-picker",
"uni-file-picker",
"uni-easyinput"
],
"dependencies": [],
"encrypt": [],
"platforms": {
"cloud": {
"tcb": "y",
"aliyun": "y"
"tcb": "u",
"aliyun": "u"
},
"client": {
"App": {
"app-vue": "y",
"app-vue": "u",
"app-nvue": "u"
},
"H5-mobile": {
"Safari": "y",
"Android Browser": "y",
"微信浏览器(Android)": "y",
"QQ浏览器(Android)": "y"
"Safari": "u",
"Android Browser": "u",
"微信浏览器(Android)": "u",
"QQ浏览器(Android)": "u"
},
"H5-pc": {
"Chrome": "y",
"Chrome": "u",
"IE": "u",
"Edge": "y",
"Firefox": "y",
"Safari": "y"
"Edge": "u",
"Firefox": "u",
"Safari": "u"
},
"小程序": {
"微信": "y",
"阿里": "y",
"百度": "y",
"字节跳动": "y",
"QQ": "y"
"微信": "u",
"阿里": "u",
"百度": "u",
"字节跳动": "u",
"QQ": "u"
},
"快应用": {
"华为": "u",
......
uni_modules/uni-load-state/readme.md 0 → 100644
浏览文件 @ b2f5acdc
# auni-load-state
\ No newline at end of file
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或