[更新]修复tabbar页面内容被遮挡的问题

This commit is contained in:
唐明明
2020-12-30 17:05:52 +08:00
parent 26bdcb6ffb
commit 6df09b6f82
9 changed files with 152 additions and 142 deletions

View File

@@ -10,8 +10,8 @@ page{
font-size: 30rpx; font-size: 30rpx;
} }
.tabBar{ .tabBarContent{
margin-bottom: calc(48px + env(safe-area-inset-bottom)); border-bottom: solid calc(48px + env(safe-area-inset-bottom)) transparent;
} }
/* /*

View File

@@ -6,6 +6,7 @@
*/ */
.tab-bar { .tab-bar {
z-index: 999999;
position: fixed; position: fixed;
bottom: 0; bottom: 0;
left: 0; left: 0;

View File

@@ -8,5 +8,6 @@
}, },
"navigationBarTitleText": "商城", "navigationBarTitleText": "商城",
"enablePullDownRefresh" : true, "enablePullDownRefresh" : true,
"navigationBarBackgroundColor": "#ea4e2f" "navigationBarTextStyle": "white",
"navigationBarBackgroundColor": "#2d6bf6"
} }

View File

@@ -1,6 +1,7 @@
<!-- 企获客商城 --> <!-- 企获客商城 -->
<view class="mallBox"> <view class="mallBox">
<view class="mallCont"> <view class="mallCont">
<view class="tabBarContent">
<!-- 搜索 --> <!-- 搜索 -->
<navigator hover-class="none" url="/pages/mall/mall_search/mall_search" class="mallCont-search"> <navigator hover-class="none" url="/pages/mall/mall_search/mall_search" class="mallCont-search">
<image class="mallCont-search-icon" src="/static/mall_icon/mall_search.png"></image> <image class="mallCont-search-icon" src="/static/mall_icon/mall_search.png"></image>
@@ -38,6 +39,6 @@
<mallIndex_list push-list="{{pushList}}" loding-stats="{{lodingStats}}" has-more="{{page.has_more}}"></mallIndex_list> <mallIndex_list push-list="{{pushList}}" loding-stats="{{lodingStats}}" has-more="{{page.has_more}}"></mallIndex_list>
</block> </block>
</view> </view>
</view>
</view> </view>
<storeTabBar pages-url="pages/mall/index"></storeTabBar> <storeTabBar pages-url="pages/mall/index"></storeTabBar>

View File

@@ -16,7 +16,7 @@ page {
.mallBox::after { .mallBox::after {
position: absolute; position: absolute;
content: ''; content: '';
background-color: #ea4e2f; background-color: #2d6bf6;
border-radius: 0 0 10% 10%; border-radius: 0 0 10% 10%;
width: 100%; width: 100%;
height: 38vh; height: 38vh;

View File

@@ -41,8 +41,8 @@ Page({
/** /**
* 生命周期函数--监听页面显示 * 生命周期函数--监听页面显示
*/ */
onShow: function () { onShow() {
wx.hideHomeButton()
this.couponInfo(); this.couponInfo();
}, },
couponInfo() { couponInfo() {

View File

@@ -1,5 +1,5 @@
<!-- 优惠券 --> <!-- 优惠券 -->
<view class="coupon"> <view class="coupon tabBarContent">
<!-- 轮播图 --> <!-- 轮播图 -->
<view class="banner"> <view class="banner">
<swiper class="banner-swiper" indicator-dots autoplay circular interval="3500" indicator-color="#ebebeb" <swiper class="banner-swiper" indicator-dots autoplay circular interval="3500" indicator-color="#ebebeb"
@@ -87,3 +87,5 @@
</view> </view>
</view> </view>
</view> </view>
<storeTabBar pages-url="pages/ticket/index"></storeTabBar>

View File

@@ -3,8 +3,12 @@
* 企获客商城 * 企获客商城
*/ */
page{
background: white;
}
.coupon { .coupon {
margin: 0 20rpx; padding: 0 30rpx;
} }
/* 轮播图 */ /* 轮播图 */

View File

@@ -1,5 +1,6 @@
<!-- 个人中心 --> <view class="tabBarContent">
<view class="userTop"> <!-- 个人中心 -->
<view class="userTop">
<view class="userTop-head"> <view class="userTop-head">
<view class="userTop-name"> 艾米家的傻钢^ <text>游客</text> </view> <view class="userTop-name"> 艾米家的傻钢^ <text>游客</text> </view>
<image class="userTop-img" src="/static/images/goods_text.png"></image> <image class="userTop-img" src="/static/images/goods_text.png"></image>
@@ -19,8 +20,8 @@
<image src="/static/user_iocn/user_vip.png"></image>立即开通 <image src="/static/user_iocn/user_vip.png"></image>立即开通
</view> </view>
</view> </view>
</view> </view>
<view class="userNav"> <view class="userNav">
<navigator hover-class="none" url="/pages/user/user_coupon/user_coupon" class="userNav-label"> <navigator hover-class="none" url="/pages/user/user_coupon/user_coupon" class="userNav-label">
<view class="userNav-label-img"> <view class="userNav-label-img">
<image src="/static/user_iocn/userNav_00.png"></image> <image src="/static/user_iocn/userNav_00.png"></image>
@@ -39,9 +40,9 @@
</view> </view>
<text>分享海报</text> <text>分享海报</text>
</view> </view>
</view> </view>
<view class="userTool"> <view class="userTool">
<view class="userTool-title"> <view class="userTool-title">
更多服务 更多服务
</view> </view>
@@ -104,6 +105,6 @@
<text>设置</text> <text>设置</text>
</navigator> </navigator>
</view> </view>
</view>
</view> </view>
<storeTabBar pages-url="pages/user/index"></storeTabBar> <storeTabBar pages-url="pages/user/index"></storeTabBar>