liweichun
/
my-bookmark
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

查看文章给一个loading的假象

This commit is contained in:
luchenqun 2019-08-08 17:24:52 +08:00
parent 0ad1506f5c
commit 4211e2181a
2 changed files with 12 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
public/scripts/controllers/weixin-article-controller.js
View File

@ -98,10 +98,13 @@ app.controller('weixinArticleCtr', ['$scope', '$state', '$sce', '$stateParams',
$scope.jumpToUrl(b.url); $scope.jumpToUrl(b.url);
return; return;
} }
// 假装等待一下。。。。。。
$scope.loadBusy = true;
$scope.bookmark = b; $scope.bookmark = b;
setTimeout(function() { $timeout(function() {
$('body,html').animate({scrollTop:0},100); $('body,html').animate({scrollTop:0},100);
}, 100); $scope.loadBusy = false;
}, 200)
} }
// 快捷键r随机推荐 // 快捷键r随机推荐

14
public/views/weixin-article.html
View File

@ -12,7 +12,7 @@
正在加载中...</div> 正在加载中...</div>
<div class="ui divider" style="margin: 3px 0px 8px 0px;"></div> <div class="ui divider" style="margin: 3px 0px 8px 0px;"></div>
<div class="ui five stackable cards" ng-if="!bookmark.content"> <div class="ui five stackable cards" ng-if="!bookmark.content && !loadBusy">
<div class="card" ng-repeat="bookmark in bookmarks" ng-mouseover="setHoverBookmark(bookmark)" ng-mouseleave="setHoverBookmark(null)"> <div class="card" ng-repeat="bookmark in bookmarks" ng-mouseover="setHoverBookmark(bookmark)" ng-mouseleave="setHoverBookmark(null)">
<div class="content" style="max-height:70px;cursor:pointer" ng-click="detailBookmark(bookmark)"> <div class="content" style="max-height:70px;cursor:pointer" ng-click="detailBookmark(bookmark)">
<div class="description bookmarkTitle" title="{{bookmark.title}}"> <div class="description bookmarkTitle" title="{{bookmark.title}}">
@ -39,7 +39,7 @@
</div> </div>
</div> </div>
</div> </div>
<div class="ui container" ng-if="bookmark.content"> <div class="ui container" ng-if="bookmark.content && !loadBusy">
<div class="ui center aligned container" style="font-size:30px;"> <div class="ui center aligned container" style="font-size:30px;">
{{bookmark.title}} {{bookmark.title}}
</div> </div>
@ -64,8 +64,8 @@
</span> </span>
</div> </div>
</div> </div>
<div class="ui divider"></div> <div class="ui divider" ng-if="!loadBusy"></div>
<div class="ui grid" ng-if="bookmark.content"> <div class="ui grid" ng-if="bookmark.content && !loadBusy">
<div class="eight wide column"> <div class="eight wide column">
<div style="float: left;cursor: pointer" ng-click="detailBookmark(bookmarks[bookmark.index-1])" ng-if="bookmarks[bookmark.index-1]"><i class="chevron left icon"></i> <div style="float: left;cursor: pointer" ng-click="detailBookmark(bookmarks[bookmark.index-1])" ng-if="bookmarks[bookmark.index-1]"><i class="chevron left icon"></i>
{{ bookmarks[bookmark.index-1].title }}</div> {{ bookmarks[bookmark.index-1].title }}</div>
@ -75,12 +75,12 @@
{{ bookmarks[bookmark.index+1].title }} <i class="chevron right icon"></i></div> {{ bookmarks[bookmark.index+1].title }} <i class="chevron right icon"></i></div>
</div> </div>
</div> </div>
<div class="ui divider" ng-if="bookmark.content"></div> <div class="ui divider" ng-if="bookmark.content && !loadBusy"></div>
<div class="ui grid"> <div class="ui grid">
<div class="one wide column"> <div class="four wide column">
<i title="返回文章列表。按 ESC 键亦可返回" class="reply icon black big" style="padding-top:10px;" ng-click="bookmark.content=''" ng-show="bookmark.content"></i> <i title="返回文章列表。按 ESC 键亦可返回" class="reply icon black big" style="padding-top:10px;" ng-click="bookmark.content=''" ng-show="bookmark.content"></i>
</div> </div>
<div class="fifteen wide column"> <div class="twelve wide column">
<pagination></pagination> <pagination></pagination>
</div> </div>
</div> </div>