wxd / MShopWeApp

Commit dce67cb7d1d499002bc4e7ad28b9d3efa74c8987

Authored by taiyuan
1 parent c18ee79a

tabbar样式调整

Inline Side-by-side
Showing 2 changed files with 41 additions and 29 deletions
custom-tab-bar/index.wxml
  View file @dce67cb
1 1 <!-- 如果是自定义的话 -->
2   -<view class="main_bar" style=" background: {{backgroundColor}}; font-size: 23rpx;">
  2 +<view class="main_bar {{is_custum?'custom':''}}" style=" background: {{backgroundColor}}; font-size: 22rpx;">
3 3 <block wx:for="{{list}}" wx:for-index="idx">
4   - <block wx:if="{{item.nav_name!='分销' || is_custum}}">
5   - <view data-url="{{item.weappurl}}" bindtap="nav_goto" class="tabbar_item" data-act="{{active==idx?1:0}}"
6   - style="width:{{100 / list.length}}%;color: {{active==idx?fontcolor_sele:fontcolor}};">
7   - <view wx:if="{{item.nav_name=='购物车'}}" class="cart_num" >{{cartGoodsNum}} </view>
8   - <view class="tab_img" style="margin-top: 6rpx;">
  4 + <block wx:if="{{item.nav_name !== '分销' || is_custum}}">
  5 + <view data-url="{{item.weappurl}}" bindtap="nav_goto" class="tabbar_item" data-act="{{active==idx?1:0}}"
  6 + style="color: {{active==idx?fontcolor_sele:fontcolor}};">
  7 + <!-- <view data-url="{{item.weappurl}}" bindtap="nav_goto" class="tabbar_item" data-act="{{active==idx?1:0}}"
  8 + style="width:{{100 / list.length}}%;color: {{active==idx?fontcolor_sele:fontcolor}};"> -->
  9 +
  10 + <view class="tab_img">
  11 + <view wx:if="{{item.nav_name=='购物车' && cartGoodsNum != 0}}" class="cart_num" >{{cartGoodsNum}}</view>
9 12 <view class="nav_imgage" style="background-image: url({{active==idx?item.src_sele:item.src}});"></view>
10 13 </view>
11   - <view style="height:20px;line-height:15px; margin-top: 2rpx;">
12   - {{item.nav_name}}
13   - </view>
  14 + <view>{{item.nav_name}}</view>
14 15 </view>
15 16 </block>
16   - <!-- 是分销商，且不是自定义，且可以显示 -->
17   - <block wx:if="{{item.nav_name=='分销' && !is_custum && !is_no_distri}}">
18   - <view data-url="{{item.weappurl}}" bindtap="nav_goto" class="tabbar_item" data-act="{{active==idx?1:0}}"
19   - style="width:{{100 / list.length}}%;color: {{active==idx?fontcolor_sele:fontcolor}};">
20   - <view class="tab_img" style="margin-top: 6rpx;">
  17 + <!-- 是分销商且没有关闭，可以显示 -->
  18 + <block wx:if="{{((item.nav_name === '分销') && (item.weappurl === '/pages/distribution/distribution')) && (is_no_distri == 0)}}">
  19 + <view data-url="{{item.weappurl}}" bindtap="nav_goto" class="tabbar_item" data-act="{{active==idx?1:0}}"
  20 + style="color: {{active==idx?fontcolor_sele:fontcolor}};">
  21 + <!-- <view data-url="{{item.weappurl}}" bindtap="nav_goto" class="tabbar_item" data-act="{{active==idx?1:0}}"
  22 + style="width:{{100 / list.length}}%;color: {{active==idx?fontcolor_sele:fontcolor}};"> -->
  23 + <view class="tab_img">
21 24 <view class="nav_imgage" style="background-image: url({{active==idx?item.src_sele:item.src}});"></view>
22 25 </view>
23   - <view style="height:20px;line-height:15px; margin-top: 2rpx;">
24   - {{item.nav_name}}
25   - </view>
  26 + <view>{{item.nav_name}}</view>
26 27 </view>
27 28 </block>
28 29 </block>
... ...
custom-tab-bar/index.wxss
  View file @dce67cb
... ... @@ -7,40 +7,51 @@
7 7 z-index: 10000;
8 8 display: flex;
9 9 justify-content: space-around;
  10 + height: 100rpx;
  11 +}
  12 +.main_bar.custom {
  13 + border-top: none;
10 14 }
11 15  
12 16 .tabbar_item {
13 17 position: relative;
14   - height: 100%;
15   - float: left;
  18 + /* height: 100%; */
  19 + /* float: left; */
16 20 text-align: center;
17   - padding: 0px 0;
  21 + padding: 0;
  22 + display: flex;
  23 + flex: 1;
  24 + flex-direction: column;
  25 + justify-content: center;
18 26 }
19 27  
20 28 .tab_img {
21 29 display: flex;
22 30 justify-content: center;
23   - align-items: center
  31 + position: relative;
24 32 }
25 33  
26 34 .nav_imgage {
27   - height: 52rpx;
28   - width: 52rpx;
29   - background-position: center;
  35 + display: block;
  36 + height: 48rpx;
  37 + width: 48rpx;
30 38 background-repeat: no-repeat;
  39 + /* background-position: center;
  40 + background-repeat: no-repeat; */
31 41 background-size: 100%;
32 42 }
33 43  
34 44 .cart_num {
35   - top: 0;
  45 + /* top: 8rpx; */
36 46 background-color: red;
37 47 color: #fff;
38 48 font-size: 20rpx;
39 49 border-radius: 50%;
40   - width: 40rpx;
41   - line-height: 40rpx;
42   - height: 40rpx;
  50 + width: 36rpx;
  51 + line-height: 36rpx;
  52 + height: 36rpx;
43 53 position: absolute;
44 54 z-index: 100;
45   - right: 30rpx;
  55 + right: 34rpx;
  56 + /* margin-right: -70rpx; */
46 57 }
... ...