Commit dce67cb7d1d499002bc4e7ad28b9d3efa74c8987
1 parent
c18ee79a
tabbar样式调整
Showing
2 changed files
with
41 additions
and
29 deletions
custom-tab-bar/index.wxml
| 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 | <block wx:for="{{list}}" wx:for-index="idx"> | 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 | <view class="nav_imgage" style="background-image: url({{active==idx?item.src_sele:item.src}});"></view> | 12 | <view class="nav_imgage" style="background-image: url({{active==idx?item.src_sele:item.src}});"></view> |
| 10 | </view> | 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 | </view> | 15 | </view> |
| 15 | </block> | 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 | <view class="nav_imgage" style="background-image: url({{active==idx?item.src_sele:item.src}});"></view> | 24 | <view class="nav_imgage" style="background-image: url({{active==idx?item.src_sele:item.src}});"></view> |
| 22 | </view> | 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 | </view> | 27 | </view> |
| 27 | </block> | 28 | </block> |
| 28 | </block> | 29 | </block> |
custom-tab-bar/index.wxss
| @@ -7,40 +7,51 @@ | @@ -7,40 +7,51 @@ | ||
| 7 | z-index: 10000; | 7 | z-index: 10000; |
| 8 | display: flex; | 8 | display: flex; |
| 9 | justify-content: space-around; | 9 | justify-content: space-around; |
| 10 | + height: 100rpx; | ||
| 11 | +} | ||
| 12 | +.main_bar.custom { | ||
| 13 | + border-top: none; | ||
| 10 | } | 14 | } |
| 11 | 15 | ||
| 12 | .tabbar_item { | 16 | .tabbar_item { |
| 13 | position: relative; | 17 | position: relative; |
| 14 | - height: 100%; | ||
| 15 | - float: left; | 18 | + /* height: 100%; */ |
| 19 | + /* float: left; */ | ||
| 16 | text-align: center; | 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 | .tab_img { | 28 | .tab_img { |
| 21 | display: flex; | 29 | display: flex; |
| 22 | justify-content: center; | 30 | justify-content: center; |
| 23 | - align-items: center | 31 | + position: relative; |
| 24 | } | 32 | } |
| 25 | 33 | ||
| 26 | .nav_imgage { | 34 | .nav_imgage { |
| 27 | - height: 52rpx; | ||
| 28 | - width: 52rpx; | ||
| 29 | - background-position: center; | 35 | + display: block; |
| 36 | + height: 48rpx; | ||
| 37 | + width: 48rpx; | ||
| 30 | background-repeat: no-repeat; | 38 | background-repeat: no-repeat; |
| 39 | + /* background-position: center; | ||
| 40 | + background-repeat: no-repeat; */ | ||
| 31 | background-size: 100%; | 41 | background-size: 100%; |
| 32 | } | 42 | } |
| 33 | 43 | ||
| 34 | .cart_num { | 44 | .cart_num { |
| 35 | - top: 0; | 45 | + /* top: 8rpx; */ |
| 36 | background-color: red; | 46 | background-color: red; |
| 37 | color: #fff; | 47 | color: #fff; |
| 38 | font-size: 20rpx; | 48 | font-size: 20rpx; |
| 39 | border-radius: 50%; | 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 | position: absolute; | 53 | position: absolute; |
| 44 | z-index: 100; | 54 | z-index: 100; |
| 45 | - right: 30rpx; | 55 | + right: 34rpx; |
| 56 | + /* margin-right: -70rpx; */ | ||
| 46 | } | 57 | } |