update posts page

add showing tags
Cha0s0000 · Apr 14, 2018 · f642ca2 · f642ca2
1 parent f0fd615
commit f642ca2
Show file tree

Hide file tree

Showing 2 changed files with 88 additions and 5 deletions.
diff --git a/pages/post/post.wxml b/pages/post/post.wxml
@@ -1,10 +1,10 @@
 <view class = "posts">
   <loading hidden="{{loading}}">
   Loading...
-  </loading>
-
+  </loading> 
   <scroll-view scroll-y="true" style="height:100%;" bindscrolltolower="loadMore" bindscrolltoupper="refesh" bindscroll="scroll" enable-back-to-top="true" scroll-top="{{scrollTop}}">
       <view class="header">
+        <image bindtap='showTags' class="tagsIcon" src="../../images/icon/tags.png"></image>
         <scroll-view class="header__container" scroll-x="true" >
           <block wx:for="{{categoryTabs}}" wx:key="lanmu_id" wx:if="1">
               <view 
@@ -14,10 +14,12 @@
               >
                   {{ item }}
               </view>
+
           </block>
         </scroll-view>
     </view>
-    <view class="content">
+    <view class="content {{open ? 'page-move' : ''}}">
+      <view class="page-mask {{open ? '' : 'page-mask-hide'}}" bindtap="off_canvas"></view>
       <block wx:for="{{postsData}}" wx:for-item="item">
         <view class="post-container" bindtap='click' data-block='{{item}}'>
           <view class="post-author-data">     
@@ -55,4 +57,13 @@
       </block>
     </view>
   </scroll-view>
-</view>
+</view>
+<view class="page-top {{open ? 'page-top-show' : ''}}">
+  <view class="tags">
+    <view  wx:for="{{tagsList}}" wx:for-item="tag" wx:key="tag">
+      <view class="tag1"> 
+        <text decode="true" class="tag-text">&nbsp;{{tag.tag}}&nbsp;</text>
+      </view>
+    </view>
+  </view>
+</view>
diff --git a/pages/post/post.wxss b/pages/post/post.wxss
@@ -17,12 +17,19 @@
 }
 .content{
   margin-top:80rpx;
+  transition: all 0.4s ease; 
 }
 .header__container{
-    width: 18rem;
+    position: absolute;
+    left:80rpx;
+    width: 100%;
     height: 64rpx;
     white-space: nowrap;
 }
+.categoryTabs{
+  position: absolute;
+  right:100rpx;
+}
 .header__item{
     padding: 14rpx;
     display: inline-block;
@@ -169,4 +176,69 @@ swiper,swiper image {
   vertical-align: middle;
   margin-right: 20px;
   margin-left:5px;
+}
+.tagsIcon{
+  position: absolute;
+  left:15rpx;
+  width: 55rpx;
+  height: 55rpx;
+  vertical-align: cernter;
+}
+.page-top{
+  position: fixed;
+  width: 50%;
+  height: 100%;
+  top: 0;
+  left: 0;
+  background-color:#fff;
+  transform: rotate(0deg) scale(1) translate(-100%,80rpx); 
+  -webkit-transform: rotate(0deg) scale(1) translate(-100%,80rpx); 
+  transition: all 0.4s ease;
+  z-index: 998;
+  overflow:scroll;
+}
+.page-top-show{
+  transform: rotate(0deg) scale(1) translate(0%,80rpx); 
+  -webkit-transform: rotate(0deg) scale(1) translate(0%,80rpx); 
+}
+.page-move{
+  transform: rotate(0deg) scale(1) translate(50%,0%);  
+ -webkit-transform: rotate(0deg) scale(1) translate(50%,0%);  
+  /* overflow:hidden; */
+  overflow-y:hidden;
+}
+.page-mask{
+  width: 100%;
+  height: 100%;
+  background-color:rgba(0,0,0,0.5); 
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 10;
+}
+.page-mask-hide{
+  display: none;
+}
+.tags{
+  display: flex;
+  flex-wrap:wrap; 
+  flex-direction: column;
+  word-break: break-all;
+}
+
+.tag{
+  word-break: break-all;
+  margin-top: 4px;
+  margin-left: 10px;
+  border-width: medium;
+  border-style: solid;
+  border-color: gray;
+  border-top-left-radius: 30rpx;
+  border-top-right-radius: 30rpx;
+  border-bottom-left-radius: 30rpx;
+  border-bottom-right-radius: 30rpx;
+}
+.tag-text{
+  font-size: 13px;
+  space:nbsp;
 }