“my”页面添加未读计数提示

yangjy · Sep 27, 2016 · 88a51a4 · 88a51a4
1 parent 8486860
commit 88a51a4
Show file tree

Hide file tree

Showing 4 changed files with 22 additions and 3 deletions.
diff --git a/images/screenshots/screenshorts-04.png b/images/screenshots/screenshorts-04.png
diff --git a/pages/my/index.js b/pages/my/index.js
@@ -6,13 +6,19 @@ Page( {
     projectSource: 'https://github.com/liuxuanqiang/wechat-weapp-mall',
     userListInfo: [ {
       icon: '../../images/iconfont-dingdan.png',
-      text: '我的订单'
+      text: '我的订单',
+      isunread: true,
+      unreadNum: 2
     }, {
         icon: '../../images/iconfont-card.png',
-        text: '我的代金券'
+        text: '我的代金券',
+        isunread: false,
+        unreadNum: 2
       }, {
         icon: '../../images/iconfont-icontuan.png',
-        text: '我的拼团'
+        text: '我的拼团',
+        isunread: true,
+        unreadNum: 1
       }, {
         icon: '../../images/iconfont-shouhuodizhi.png',
         text: '收货地址管理'

diff --git a/pages/my/index.wxml b/pages/my/index.wxml
@@ -11,6 +11,7 @@
             <view class="weui_cell_bd">
                 <view class="weui_cell_bd_p"> {{item.text}} </view>
             </view>
+            <view wx:if="{{item.isunread}}" class="badge">{{item.unreadNum}}</view>
             <view class="with_arrow"></view>
         </view>
     </block>

diff --git a/pages/my/index.wxss b/pages/my/index.wxss
@@ -44,6 +44,18 @@
   font-size: 14px;
   color: #939393;
 }
+.badge{
+  position: absolute;
+  top: 18px;
+  right: 40px;
+  width: 15px;
+  height: 15px;
+  background: #ff0000;
+  color: #fff;
+  border-radius: 50%;
+  text-align: center;
+  font-size: 8px;
+}
 .with_arrow{
   position: absolute;
   top: 18px;