feat: 为多个页面添加底部tabBar适配布局
为文章列表、公告列表、品牌页、优惠券页、案例页、文件列表、商品搜索、积分商品列表、分销相关页面以及订单列表页添加了动态底部内边距样式,根据tabBar是否存在适配页面底部空间,同时统一添加自定义底部导航组件
This commit is contained in:
@@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<view class="content" :style="themeColor">
|
||||
<mescroll-uni ref="mescroll" @getData="getGoodsList">
|
||||
<mescroll-uni ref="mescroll" @getData="getGoodsList" :style="fenxiaoGoodsListPageStyle">
|
||||
<block slot="list">
|
||||
<view class="goods-list"
|
||||
:style="{ backgroundImage: 'url(' + $util.img('public/uniapp/fenxiao/promote/promote_bg.png') + ')' }">
|
||||
@@ -126,6 +126,11 @@
|
||||
|
||||
<!-- 隐私弹窗 -->
|
||||
<privacy-popup ref="privacyPopup"></privacy-popup>
|
||||
|
||||
<!-- 底部tabBar -->
|
||||
<view id="tab-bar">
|
||||
<diy-bottom-nav></diy-bottom-nav>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
@@ -134,7 +139,14 @@ import list from './public/js/goods_list.js';
|
||||
import fenxiaoWords from 'common/js/fenxiao-words.js';
|
||||
|
||||
export default {
|
||||
mixins: [list, fenxiaoWords]
|
||||
mixins: [list, fenxiaoWords],
|
||||
computed: {
|
||||
fenxiaoGoodsListPageStyle() {
|
||||
return this.$util.objToStyle({
|
||||
paddingBottom: this.tabBarList && this.tabBarList.list ? '112rpx' : '0'
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<view :style="themeColor">
|
||||
<view class="fenxiao-index"
|
||||
:style="{ background: 'url(' + $util.img('public/uniapp/fenxiao/index/commissionFission-background.png') + ')', backgroundRepeat: 'no-repeat', backgroundSize: '100%' }">
|
||||
:style="fenxiaoIndexPageStyle">
|
||||
<block v-if="info.fenxiao_id > 0">
|
||||
<!-- 头部 -->
|
||||
<view class="fenxiao-index-header" :class="{ 'not-level': !levelList.length }">
|
||||
@@ -256,6 +256,11 @@
|
||||
</view>
|
||||
</uni-popup>
|
||||
</view>
|
||||
|
||||
<!-- 底部tabBar -->
|
||||
<view id="tab-bar">
|
||||
<diy-bottom-nav></diy-bottom-nav>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
@@ -573,6 +578,17 @@ export default {
|
||||
level.task_num = level.upgrade_type == 1 ? 1 : level.task.length;
|
||||
return level;
|
||||
}
|
||||
},
|
||||
fenxiaoIndexPageStyle() {
|
||||
const style = {
|
||||
paddingBottom: this.tabBarList && this.tabBarList.list ? '112rpx' : '0'
|
||||
};
|
||||
if (this.$util && this.$util.img) {
|
||||
style.background = 'url(' + this.$util.img('public/uniapp/fenxiao/index/commissionFission-background.png') + ')';
|
||||
style.backgroundRepeat = 'no-repeat';
|
||||
style.backgroundSize = '100%';
|
||||
}
|
||||
return this.$util.objToStyle(style);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
@@ -7,7 +7,7 @@
|
||||
</view>
|
||||
</block>
|
||||
</view>
|
||||
<mescroll-uni ref="mescroll" @getData="getData" top="90" class="member-point" :size="8" v-if="storeToken">
|
||||
<mescroll-uni ref="mescroll" @getData="getData" top="90" class="member-point" :size="8" v-if="storeToken" :style="fenxiaoOrderPageStyle">
|
||||
<view class="goods_list" slot="list">
|
||||
<view class="order-list">
|
||||
<view class="order-item" v-for="(orderItem, orderIndex) in orderList" :key="orderIndex"
|
||||
@@ -92,6 +92,11 @@
|
||||
|
||||
<ns-login ref="login"></ns-login>
|
||||
<loading-cover ref="loadingCover"></loading-cover>
|
||||
|
||||
<!-- 底部tabBar -->
|
||||
<view id="tab-bar">
|
||||
<diy-bottom-nav></diy-bottom-nav>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
@@ -129,6 +134,13 @@ export default {
|
||||
subMemberId: ''
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
fenxiaoOrderPageStyle() {
|
||||
return this.$util.objToStyle({
|
||||
paddingBottom: this.tabBarList && this.tabBarList.list ? '112rpx' : '0'
|
||||
});
|
||||
}
|
||||
},
|
||||
mixins: [fenxiaoWords],
|
||||
onLoad(option) {
|
||||
if (option.type != undefined) this.selectId = option.type;
|
||||
|
||||
Reference in New Issue
Block a user