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 @@ ...@@ -149,13 +149,12 @@
"navigationBarTitleText": "注册", "navigationBarTitleText": "注册",
"enablePullDownRefresh": false "enablePullDownRefresh": false
} }
}, },
{ {
"path": "pages/ucenter/read-news-log/read-news-log", "path": "pages/ucenter/read-news-log/read-news-log",
"style": { "style": {
"navigationBarTitleText": "阅读记录", "navigationBarTitleText": "阅读记录",
"enablePullDownRefresh": false "enablePullDownRefresh": true
} }
} }
], ],
......
pages/list/list.nvue
浏览文件 @ b2f5acdc
...@@ -7,51 +7,31 @@ ...@@ -7,51 +7,31 @@
<uni-search-bar @click="searchClick" class="uni-search-box" v-model="keyword" ref="searchBar" radius="100" cancelButton="none" disabled/> <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" <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" :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 的页面布局 -->
<uni-list class="uni-list" :border="false" :bounce="true" :alwaysScrollableVertical="true" :style="{height:listHight}"> <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"> <template slot="body">
<!-- 设置网络 --> <uni-load-state @networkResume="refresh" :state="{data,pagination,hasMore, loading, error}"></uni-load-state>
<uni-network @change="refresh" @retry="refresh"></uni-network>
</template> </template>
</uni-list-item> </uni-list-item>
</uni-list>
<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>
</unicloud-db> </unicloud-db>
</view> </view>
</template> </template>
......
pages/ucenter/read-news-log/read-news-log.vue
浏览文件 @ b2f5acdc
...@@ -3,22 +3,17 @@ ...@@ -3,22 +3,17 @@
<unicloud-db ref="udb" v-slot:default="{data, pagination, loading, hasMore, error}" :where="udbWhere" <unicloud-db ref="udb" v-slot:default="{data, pagination, loading, hasMore, error}" :where="udbWhere"
collection="opendb-news-articles" @load="isLoading == false" @error="isLoading == false" collection="opendb-news-articles" @load="isLoading == false" @error="isLoading == false"
field="title,_id" :page-size="10"> field="title,_id" :page-size="10">
<view v-if="data && data.length"> <uni-list>
<uni-list> <uni-list-item v-for="(item, index) in data" :key="index" :clickable="true"
<uni-list-item v-for="(item, index) in data" :key="index" :clickable="true" @click="handleItemClick(item)">
@click="handleItemClick(item)"> <view slot="body">
<view slot="body"> <text>{{item.title}}</text>
<text>{{item.title}}</text> <uni-dateformat class="article-date" :date="readNewsLog[index].last_time" format="yyyy-MM-dd hh:mm"
<uni-dateformat class="article-date" :date="readNewsLog[index].last_time" format="yyyy-MM-dd hh:mm" :threshold="[0, 0]" />
:threshold="[0, 0]" /> </view>
</view> </uni-list-item>
</uni-list-item> </uni-list>
</uni-list> <uni-load-state @networkResume="refreshData" :state="{data,pagination,hasMore, loading, error}"></uni-load-state>
</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>
</unicloud-db> </unicloud-db>
</view> </view>
</template> </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> <template>
<view class="box" v-if="networkType == 'none'"> <view style="flex:1">
<image class="icon-image" src="../../static/uni-network/disconnection.png" mode="widthFix"></image> <template v-if="!state.error">
<text class="tip-text">网络异常</text> <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>
<view class="btn btn-default" v-if="networkType!='none'" @click="retry"> <text class="noData" v-else>暂无数据</text>
<text class="btn-text">重试</text> </template>
</view> <view v-else>
<view class="btn btn-default" v-if="networkType=='none'" @click="openSettings"> <view class="box" v-if="networkType == 'none'">
<text class="btn-text">前往设置</text> <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>
</view> </view>
</template> </template>
<script> <script>
export default { export default {
name: "uni-network", name: "uni-load-state",
data() { data() {
return { return {
"networkType": "" "networkType": ""
}; };
},
props: {
state:{
type: Object,
default(){
return {
"loading":true,
"hasMore":false,
"pagination":{"pages":0},
"data":[],
"error":{}
}
}
}
}, },
mounted() { mounted() {
uni.onNetworkStatusChange(({ uni.onNetworkStatusChange(({
networkType networkType
}) => { }) => {
if(this.networkType == 'none' && networkType != 'none'){ if(this.networkType == 'none' && networkType != 'none'){ //之前没网现在有了
this.change() this.$emit('networkResume')
} }
this.networkType = networkType; this.networkType = networkType;
}); });
...@@ -54,9 +76,6 @@ ...@@ -54,9 +76,6 @@
var intent = new Intent(Settings.ACTION_SETTINGS); var intent = new Intent(Settings.ACTION_SETTINGS);
mainActivity.startActivity(intent); mainActivity.startActivity(intent);
} }
},
change(){
this.$emit('change')
} }
} }
} }
...@@ -99,5 +118,11 @@ ...@@ -99,5 +118,11 @@
border-style: solid; border-style: solid;
border-width: 1px; border-width: 1px;
border-radius: 3px; border-radius: 3px;
}
.noData{
text-align: center;
padding: 30rpx;
flex-direction: 1;
} }
</style> </style>
uni_modules/read-news-log/package.json → uni_modules/uni-load-state/package.json
浏览文件 @ b2f5acdc
{ {
"id": "opendb-news-favorite", "id": "auni-load-state",
"displayName": "opendb-news-favorite", "displayName": "auni-load-state",
"version": "1.0.0", "version": "1.0.0",
"description": "", "description": "auni-load-state",
"keywords": [ "keywords": [
"opendb-news-favorite" "auni-load-state"
], ],
"repository": "", "repository": "",
"engines": { "engines": {
"HBuilderX": "^3.1.0" "HBuilderX": "^3.1.0"
}, },
"dcloudext": { "dcloudext": {
"category": [ "category": [
"uniCloud", "前端组件",
"Admin插件" "通用组件"
], ],
"sale": { "sale": {
"regular": { "regular": {
...@@ -27,57 +27,44 @@ ...@@ -27,57 +27,44 @@
"qq": "" "qq": ""
}, },
"declaration": { "declaration": {
"ads": "无", "ads": "",
"data": "无", "data": "",
"permissions": "无" "permissions": ""
}, },
"npmurl": "" "npmurl": ""
}, },
"uni_modules": { "uni_modules": {
"dependencies": [ "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"
],
"encrypt": [], "encrypt": [],
"platforms": { "platforms": {
"cloud": { "cloud": {
"tcb": "y", "tcb": "u",
"aliyun": "y" "aliyun": "u"
}, },
"client": { "client": {
"App": { "App": {
"app-vue": "y", "app-vue": "u",
"app-nvue": "u" "app-nvue": "u"
}, },
"H5-mobile": { "H5-mobile": {
"Safari": "y", "Safari": "u",
"Android Browser": "y", "Android Browser": "u",
"微信浏览器(Android)": "y", "微信浏览器(Android)": "u",
"QQ浏览器(Android)": "y" "QQ浏览器(Android)": "u"
}, },
"H5-pc": { "H5-pc": {
"Chrome": "y", "Chrome": "u",
"IE": "u", "IE": "u",
"Edge": "y", "Edge": "u",
"Firefox": "y", "Firefox": "u",
"Safari": "y" "Safari": "u"
}, },
"小程序": { "小程序": {
"微信": "y", "微信": "u",
"阿里": "y", "阿里": "u",
"百度": "y", "百度": "u",
"字节跳动": "y", "字节跳动": "u",
"QQ": "y" "QQ": "u"
}, },
"快应用": { "快应用": {
"华为": "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.
先完成此消息的编辑！
想要评论请 注册 或