Skip to content

Commit 30f8ac8

Browse files
LsnshLsnsh
committed
update: display loading text when the page is initializing
1 parent 89dd950 commit 30f8ac8

File tree

7 files changed

+175
-143
lines changed

7 files changed

+175
-143
lines changed

‎src/pages/index/index.wxml‎

Lines changed: 29 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,33 @@
1-
<view class="home-page-container fadein-init {{bIsReady ? 'fadein' : ''}}">
2-
<!-- 主题分类tabBar -->
3-
<view class="topic-tabbar">
4-
<view
5-
class="topic-tabbar-item {{ nActiveTabIndex === index ? 'topic-tabbar-item-active' : '' }}"
6-
wx:for="{{aTabBarList}}"
7-
wx:key="{{index}}"
8-
data-index="{{index}}"
9-
data-tab="{{item.tab}}"
10-
bindtap="fnTapSwitchTab"
11-
>
12-
<text>{{item.text}}</text>
13-
</view>
1+
<view class="home-page-container">
2+
<!-- 页面首次加载时的loading -->
3+
<view wx:if="{{!bIsReady}}" class="h-vh100 vh-parent fs-28 color-grey">
4+
<text class="vh">加载中...</text>
145
</view>
15-
<view class="topic-list-wrap">
16-
<block wx:if="{{aTopicList.length}}">
17-
<topic-list data="{{aTopicList}}"></topic-list>
18-
<view class="topic-list-loading ta-c color-grey">加载中...</view>
19-
</block>
20-
<block wx:else>
21-
<view class="topic-list-no-data vh-parent color-grey">
22-
<text class="vh">暂无数据～</text>
6+
<!-- 话题列表 -->
7+
<view class="fadein-init {{bIsReady ? 'fadein' : ''}}">
8+
<!-- 主题分类tabBar -->
9+
<view class="topic-tabbar">
10+
<view
11+
class="topic-tabbar-item {{ nActiveTabIndex === index ? 'topic-tabbar-item-active' : '' }}"
12+
wx:for="{{aTabBarList}}"
13+
wx:key="{{index}}"
14+
data-index="{{index}}"
15+
data-tab="{{item.tab}}"
16+
bindtap="fnTapSwitchTab"
17+
>
18+
<text>{{item.text}}</text>
2319
</view>
24-
</block>
20+
</view>
21+
<view class="topic-list-wrap">
22+
<block wx:if="{{aTopicList.length}}">
23+
<topic-list data="{{aTopicList}}"></topic-list>
24+
<view class="topic-list-loading ta-c color-grey">加载中...</view>
25+
</block>
26+
<block wx:else>
27+
<view class="topic-list-no-data vh-parent color-grey">
28+
<text class="vh">暂无数据～</text>
29+
</view>
30+
</block>
31+
</view>
2532
</view>
2633
</view>

‎src/pages/message/message.wxml‎

Lines changed: 29 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,32 @@
1-
<view class="message-list-container fadein-init {{bIsReady ? 'fadein' : ''}}">
2-
<block wx:if="{{aHasNotReadMessageList.length || aHasReadMessageList.length}}">
3-
<!-- 未读消息列表 -->
4-
<view class="message-list has-not-read-message-list">
5-
<!-- 新消息 -->
6-
<view class="message-list-title">
7-
<text>新消息</text>
8-
<text>({{aHasNotReadMessageList.length}})</text>
1+
<view class="message-page-container">
2+
<!-- 页面首次加载时的loading -->
3+
<view wx:if="{{!bIsReady}}" class="h-vh100 vh-parent fs-28 color-grey">
4+
<text class="vh">加载中...</text>
5+
</view>
6+
<view class="fadein-init {{bIsReady ? 'fadein' : ''}}">
7+
<block wx:if="{{aHasNotReadMessageList.length || aHasReadMessageList.length}}">
8+
<!-- 未读消息列表 -->
9+
<view class="message-list has-not-read-message-list">
10+
<!-- 新消息 -->
11+
<view class="message-list-title">
12+
<text>新消息</text>
13+
<text>({{aHasNotReadMessageList.length}})</text>
14+
</view>
15+
<message-item wx:for="{{aHasNotReadMessageList}}" wx:key="{{item.id}}" data="{{item}}" bindread="fnHandleHasReadMessageEvent"></message-item>
916
</view>
10-
<message-item wx:for="{{aHasNotReadMessageList}}" wx:key="{{item.id}}" data="{{item}}" bindread="fnHandleHasReadMessageEvent"></message-item>
11-
</view>
12-
<!-- 已读消息列表 -->
13-
<view class="message-list">
14-
<view class="message-list-title">
15-
<text>已读消息</text>
16-
<text>({{aHasReadMessageList.length}})</text>
17+
<!-- 已读消息列表 -->
18+
<view class="message-list">
19+
<view class="message-list-title">
20+
<text>已读消息</text>
21+
<text>({{aHasReadMessageList.length}})</text>
22+
</view>
23+
<message-item wx:for="{{aHasReadMessageList}}" wx:key="{{item.id}}" data="{{item}}"></message-item>
1724
</view>
18-
<message-item wx:for="{{aHasReadMessageList}}" wx:key="{{item.id}}" data="{{item}}"></message-item>
19-
</view>
20-
</block>
21-
<block wx:else>
22-
<view class="message-list-no-data vh-parent color-grey">
23-
<text class="vh">暂无消息</text>
24-
</view>
25-
</block>
25+
</block>
26+
<block wx:else>
27+
<view class="message-list-no-data vh-parent color-grey">
28+
<text class="vh">暂无消息</text>
29+
</view>
30+
</block>
31+
</view>
2632
</view>

‎src/pages/message/message.wxss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
.message-list-container {
1+
.message-page-container {
22
padding: 20rpx;
33
}
44
.message-list {

‎src/pages/topic/topic.wxml‎

Lines changed: 62 additions & 56 deletions
Original file line numberDiff line numberDiff line change
@@ -1,66 +1,72 @@
1-
<view class="topic-container fadein-init {{bIsReady ? 'fadein' : ''}}">
2-
<view class="topic-main">
3-
<!-- 标题 -->
4-
<h3 class="fw-500">{{oTopicDetail.title}}</h3>
5-
<!-- 基本信息 -->
6-
<view class="topic-info vh-parent">
7-
<navigator class="topic-info-left fl-left rounded-p50" url="/pages/user/user?name={{oTopicDetail.loginname}}">
8-
<image class="w-p100 h-p100 rounded-p50" src="{{oTopicDetail.avatar_url}}" />
9-
</navigator>
10-
<view class="topic-info-center">
11-
<view style="margin-bottom: 15rpx;">
12-
<topic-tag type="{{oTopicDetail.tab}}" style="margin-right: 15rpx;"></topic-tag>
13-
<text>{{oTopicDetail.loginname}}</text>
14-
</view>
15-
<view class="color-grey" style="font-size: 28rpx;">
16-
<text>{{oTopicDetail.create_at}}创建</text>
17-
<text style="padding: 0 5rpx;">·</text>
18-
<text>{{oTopicDetail.visit_count}}次浏览</text>
19-
</view>
20-
</view>
21-
<i
22-
class="v icon icon-collect {{oTopicDetail.is_collect ? 'color-green' : 'color-grey'}}"
23-
style="right: 10rpx;font-size: 50rpx;"
24-
bindtap="fnTapSwitchTopicCollectStatus">
25-
</i>
26-
</view>
27-
<!-- 内容 -->
28-
<view class="topic-content">
29-
<wemark type="wemark" md="{{oTopicDetail.content}}" highlight link></wemark>
30-
</view>
1+
<view class="topic-page-container">
2+
<!-- 页面首次加载时的loading -->
3+
<view wx:if="{{!bIsReady}}" class="h-vh100 vh-parent fs-28 color-grey">
4+
<text class="vh">加载中...</text>
315
</view>
32-
<!-- 评论列表 -->
33-
<view class="topic-comment-list">
34-
<view class="topic-comment-list-header">{{oTopicDetail.replies.length}}条评论</view>
35-
<view class="topic-comment-item" wx:for="{{oTopicDetail.replies}}" wx:key="{{index}}">
36-
<view class="vh-parent clf">
37-
<!-- 评论者信息 -->
38-
<navigator class="topic-comment-left fl-left rounded-p50" url="/pages/user/user?name={{item.loginname}}">
39-
<image class="w-p100 h-p100 rounded-p50" src="{{item.avatar_url}}" />
6+
<view class="fadein-init {{bIsReady ? 'fadein' : ''}}">
7+
<view class="topic-main">
8+
<!-- 标题 -->
9+
<h3 class="fw-500">{{oTopicDetail.title}}</h3>
10+
<!-- 基本信息 -->
11+
<view class="topic-info vh-parent">
12+
<navigator class="topic-info-left fl-left rounded-p50" url="/pages/user/user?name={{oTopicDetail.loginname}}">
13+
<image class="w-p100 h-p100 rounded-p50" src="{{oTopicDetail.avatar_url}}" />
4014
</navigator>
41-
<view class="topic-comment-center">
42-
<view style="margin-bottom: 15rpx;">{{item.loginname}}</view>
15+
<view class="topic-info-center">
16+
<view style="margin-bottom: 15rpx;">
17+
<topic-tag type="{{oTopicDetail.tab}}" style="margin-right: 15rpx;"></topic-tag>
18+
<text>{{oTopicDetail.loginname}}</text>
19+
</view>
4320
<view class="color-grey" style="font-size: 28rpx;">
44-
<text class="color-green">{{index + 1}}楼</text>
21+
<text>{{oTopicDetail.create_at}}创建</text>
4522
<text style="padding: 0 5rpx;">·</text>
46-
<text>{{item.create_at}}</text>
23+
<text>{{oTopicDetail.visit_count}}次浏览</text>
4724
</view>
4825
</view>
49-
<!-- 点赞icon和点赞数 -->
50-
<view
51-
class="v"
52-
style="color: #757575;right: 10rpx;font-size: 24rpx;"
53-
data-id="{{item.id}}"
54-
data-index="{{index}}"
55-
bindtap="fnTapLikeCommentOrDislike"
56-
>
57-
<i class="icon icon-up {{item.is_uped ? 'color-green' : ''}}" style="font-size: 50rpx;margin-right: 10rpx;"></i>
58-
<text class="inbl vtal-top" style="height: 50rpx;line-height: 60rpx;">{{item.ups.length}}</text>
59-
</view>
26+
<i
27+
class="v icon icon-collect {{oTopicDetail.is_collect ? 'color-green' : 'color-grey'}}"
28+
style="right: 10rpx;font-size: 50rpx;"
29+
bindtap="fnTapSwitchTopicCollectStatus">
30+
</i>
6031
</view>
61-
<!-- 评论内容 -->
62-
<view class="topic-comment-content">
63-
<wemark type="wemark" md="{{item.content}}" highlight link></wemark>
32+
<!-- 内容 -->
33+
<view class="topic-content">
34+
<wemark type="wemark" md="{{oTopicDetail.content}}" highlight link></wemark>
35+
</view>
36+
</view>
37+
<!-- 评论列表 -->
38+
<view class="topic-comment-list">
39+
<view class="topic-comment-list-header">{{oTopicDetail.replies.length}}条评论</view>
40+
<view class="topic-comment-item" wx:for="{{oTopicDetail.replies}}" wx:key="{{index}}">
41+
<view class="vh-parent clf">
42+
<!-- 评论者信息 -->
43+
<navigator class="topic-comment-left fl-left rounded-p50" url="/pages/user/user?name={{item.loginname}}">
44+
<image class="w-p100 h-p100 rounded-p50" src="{{item.avatar_url}}" />
45+
</navigator>
46+
<view class="topic-comment-center">
47+
<view style="margin-bottom: 15rpx;">{{item.loginname}}</view>
48+
<view class="color-grey" style="font-size: 28rpx;">
49+
<text class="color-green">{{index + 1}}楼</text>
50+
<text style="padding: 0 5rpx;">·</text>
51+
<text>{{item.create_at}}</text>
52+
</view>
53+
</view>
54+
<!-- 点赞icon和点赞数 -->
55+
<view
56+
class="v"
57+
style="color: #757575;right: 10rpx;font-size: 24rpx;"
58+
data-id="{{item.id}}"
59+
data-index="{{index}}"
60+
bindtap="fnTapLikeCommentOrDislike"
61+
>
62+
<i class="icon icon-up {{item.is_uped ? 'color-green' : ''}}" style="font-size: 50rpx;margin-right: 10rpx;"></i>
63+
<text class="inbl vtal-top" style="height: 50rpx;line-height: 60rpx;">{{item.ups.length}}</text>
64+
</view>
65+
</view>
66+
<!-- 评论内容 -->
67+
<view class="topic-comment-content">
68+
<wemark type="wemark" md="{{item.content}}" highlight link></wemark>
69+
</view>
6470
</view>
6571
</view>
6672
</view>

‎src/pages/topic/topic.wxss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
.topic-container {
1+
.topic-page-container {
22
padding: 20rpx;
33
}
44
.topic-main {

‎src/pages/user/user.wxml‎

Lines changed: 46 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -1,46 +1,52 @@
1-
<view class="fadein-init {{bIsReady ? 'fadein' : ''}}">
2-
<!-- 用户资料 -->
3-
<view class="user-profile-wrap ta-c">
4-
<image class="user-avatrl mlr-auto rounded-p50" src="{{oUserProfile.avatar_url}}"></image>
5-
<view class="user-name color-white">{{oUserProfile.loginname}}</view>
6-
<view class="user-github-link">{{oUserProfile.githubUsername}}@github.com</view>
7-
<view class="clf" style="font-size: 24rpx;">
8-
<view class="fl-left color-white">注册时间：{{oUserProfile.create_at}}</view>
9-
<view class="fl-right color-green">积分：{{oUserProfile.score}}</view>
10-
</view>
1+
<view class="user-page-container">
2+
<!-- 页面首次加载时的loading -->
3+
<view wx:if="{{!bIsReady}}" class="h-vh100 vh-parent fs-28 color-grey">
4+
<text class="vh">加载中...</text>
115
</view>
12-
<!-- 用户动态 -->
13-
<view class="user-activity-wrap">
14-
<!-- tabbar -->
15-
<view class="tabbar-wrap ta-c">
16-
<view
17-
class="tab {{index === nActiveTabIndex ? 'tab-active color-white' : 'color-grey'}}"
18-
wx:for="{{aTabBar}}"
19-
wx:key="{{index}}"
20-
data-index="{{index}}"
21-
bindtap="fnClickSwitchTab"
22-
>
23-
<view>{{item.text}}</view>
6+
<view class="fadein-init {{bIsReady ? 'fadein' : ''}}">
7+
<!-- 用户资料 -->
8+
<view class="user-profile-wrap ta-c">
9+
<image class="user-avatrl mlr-auto rounded-p50" src="{{oUserProfile.avatar_url}}"></image>
10+
<view class="user-name color-white">{{oUserProfile.loginname}}</view>
11+
<view class="user-github-link">{{oUserProfile.githubUsername}}@github.com</view>
12+
<view class="clf" style="font-size: 24rpx;">
13+
<view class="fl-left color-white">注册时间：{{oUserProfile.create_at}}</view>
14+
<view class="fl-right color-green">积分：{{oUserProfile.score}}</view>
2415
</view>
2516
</view>
26-
<scroll-view class="topic-list-scroll-wrap" scroll-y="{{bAllowScrollY}}">
27-
<view class="topic-list-wrap">
28-
<!-- 最近回复列表 -->
29-
<block wx:if="{{nActiveTabIndex === 0}}">
30-
<topic-list list="{{oUserProfile.recent_replies}}" name="{{oUserProfile.loginname}}"></topic-list>
31-
</block>
32-
<!-- 最新发布话题列表 -->
33-
<block wx:elif="{{nActiveTabIndex === 1}}">
34-
<topic-list list="{{oUserProfile.recent_topics}}" name="{{oUserProfile.loginname}}"></topic-list>
35-
</block>
36-
<!-- 话题收藏列表 -->
37-
<block wx:elif="{{nActiveTabIndex === 2}}">
38-
<topic-list wx:if="{{!bIsFetchingUserCollectTopicList}}" list="{{aUserCollectTopicList}}" name="{{oUserProfile.loginname}}"></topic-list>
39-
<view wx:else class="topic-collection-list ta-c">
40-
<view>正在加载...</view>
41-
</view>
42-
</block>
17+
<!-- 用户动态 -->
18+
<view class="user-activity-wrap">
19+
<!-- tabbar -->
20+
<view class="tabbar-wrap ta-c">
21+
<view
22+
class="tab {{index === nActiveTabIndex ? 'tab-active color-white' : 'color-grey'}}"
23+
wx:for="{{aTabBar}}"
24+
wx:key="{{index}}"
25+
data-index="{{index}}"
26+
bindtap="fnClickSwitchTab"
27+
>
28+
<view>{{item.text}}</view>
29+
</view>
4330
</view>
44-
</scroll-view>
31+
<scroll-view class="topic-list-scroll-wrap" scroll-y="{{bAllowScrollY}}">
32+
<view class="topic-list-wrap">
33+
<!-- 最近回复列表 -->
34+
<block wx:if="{{nActiveTabIndex === 0}}">
35+
<topic-list list="{{oUserProfile.recent_replies}}" name="{{oUserProfile.loginname}}"></topic-list>
36+
</block>
37+
<!-- 最新发布话题列表 -->
38+
<block wx:elif="{{nActiveTabIndex === 1}}">
39+
<topic-list list="{{oUserProfile.recent_topics}}" name="{{oUserProfile.loginname}}"></topic-list>
40+
</block>
41+
<!-- 话题收藏列表 -->
42+
<block wx:elif="{{nActiveTabIndex === 2}}">
43+
<topic-list wx:if="{{!bIsFetchingUserCollectTopicList}}" list="{{aUserCollectTopicList}}" name="{{oUserProfile.loginname}}"></topic-list>
44+
<view wx:else class="topic-collection-list ta-c">
45+
<view>正在加载...</view>
46+
</view>
47+
</block>
48+
</view>
49+
</scroll-view>
50+
</view>
4551
</view>
4652
</view>

‎src/style/base.wxss‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -44,6 +44,9 @@
4444
.h-p100 {
4545
height: 100%;
4646
}
47+
.h-vh100 {
48+
height: 100vh;
49+
}
4750
/* 浮动 */
4851
.clf::after {
4952
content: '';
@@ -60,6 +63,10 @@
6063
.rounded-p50 {
6164
border-radius: 50%;
6265
}
66+
/* 字号 */
67+
.fs-28 {
68+
font-size: 28rpx;
69+
}
6370
/* 字体 */
6471
.fw-300 {
6572
font-weight: 300;

0 commit comments

Comments
 (0)