feat: 为多个页面添加底部tabBar适配布局

为文章列表、公告列表、品牌页、优惠券页、案例页、文件列表、商品搜索、积分商品列表、分销相关页面以及订单列表页添加了动态底部内边距样式,根据tabBar是否存在适配页面底部空间,同时统一添加自定义底部导航组件
This commit is contained in:
2026-06-16 09:14:39 +08:00
parent b86e8e7fa6
commit 6c6822ca16
13 changed files with 174 additions and 17 deletions

View File

@@ -1,6 +1,6 @@
<template>
<view :style="themeColor">
<mescroll-uni @getData="getData" ref="mescroll">
<mescroll-uni @getData="getData" ref="mescroll" :style="articleListPageStyle">
<block slot="list">
<view class="article-wrap" v-if="list.length">
<ns-adv keyword="NS_ARTICLE" class-name="adv-wrap"></ns-adv>
@@ -28,6 +28,11 @@
<!-- 隐私弹窗 -->
<privacy-popup ref="privacyPopup"></privacy-popup>
<!-- 底部tabBar -->
<view id="tab-bar">
<diy-bottom-nav></diy-bottom-nav>
</view>
</view>
</template>
@@ -38,6 +43,13 @@ export default {
list: []
};
},
computed: {
articleListPageStyle() {
return this.$util.objToStyle({
paddingBottom: this.tabBarList && this.tabBarList.list ? '112rpx' : '0'
});
}
},
onShow() {
this.setPublicShare();
},

View File

@@ -1,6 +1,6 @@
<template>
<view>
<view class="about w100">
<view class="about w100" :style="casesPageStyle">
<view class="list_cotact padding-top">
<view class="container">
<block v-for="(item, index) in dataList" :key="index">
@@ -82,6 +82,11 @@
<video class="adaptive-video" autoPauseIfNavigate="true" autoPauseIfOpenNative="true" autoplay="false" enableAutoRotation="true" id="myVideo" :src="video_url" controls="true"></video>
</view>
</uni-popup>
<!-- 底部tabBar -->
<view id="tab-bar">
<diy-bottom-nav></diy-bottom-nav>
</view>
</view>
</template>
@@ -104,6 +109,13 @@ export default {
video_url: ""
};
},
computed: {
casesPageStyle() {
return this.$util.objToStyle({
paddingBottom: this.tabBarList && this.tabBarList.list ? '112rpx' : '0'
});
}
},
onLoad() {
this.init();
},

View File

@@ -7,7 +7,7 @@
<text class="iconfont icon-sousuo3" @tap="search"></text>
</view>
</view>
<mescroll-uni ref="mescroll" top="100" @getData="getData">
<mescroll-uni ref="mescroll" top="100" @getData="getData" :style="fileListPageStyle">
<view slot="list">
<block v-if="list.length > 0">
<view class="article-wrap">
@@ -36,6 +36,11 @@
</view>
</mescroll-uni>
<privacy-popup ref="privacyPopup"></privacy-popup>
<!-- 底部tabBar -->
<view id="tab-bar">
<diy-bottom-nav></diy-bottom-nav>
</view>
</view>
</template>
@@ -49,6 +54,13 @@ export default {
keyword: ''
}
},
computed: {
fileListPageStyle() {
return this.$util.objToStyle({
paddingBottom: this.tabBarList && this.tabBarList.list ? '112rpx' : '0'
});
}
},
onLoad(options) {
if (options.category_id > 0) {
this.category_id = options.category_id

View File

@@ -1,6 +1,6 @@
<template>
<view :data-theme="themeStyle">
<mescroll-uni @getData="getBrandList" ref="mescroll" size="20">
<mescroll-uni @getData="getBrandList" ref="mescroll" size="20" :style="brandPageStyle">
<block slot="list">
<ns-adv keyword="NS_BRAND" class-name="adv-wrap"></ns-adv>
<view class="brand-content" v-if="brandList.length > 0">
@@ -18,6 +18,11 @@
<!-- 隐私弹窗 -->
<privacy-popup ref="privacyPopup"></privacy-popup>
<!-- 底部tabBar -->
<view id="tab-bar">
<diy-bottom-nav></diy-bottom-nav>
</view>
</view>
</template>
@@ -29,6 +34,13 @@ export default {
siteId: 0
};
},
computed: {
brandPageStyle() {
return this.$util.objToStyle({
paddingBottom: this.tabBarList && this.tabBarList.list ? '112rpx' : '0'
});
}
},
onLoad(options) {
if (options.site_id) this.siteId = options.site_id;
},

View File

@@ -12,7 +12,7 @@
</view>
</view>
<mescroll-uni ref="mescroll" top="100" @getData="getMemberCouponList">
<mescroll-uni ref="mescroll" top="100" @getData="getMemberCouponList" :style="couponListPageStyle">
<block slot="list">
<view class="coupon-listone">
<view class="item" v-for="(item, index) in list" :key="index" @click="liClick(item, index)"
@@ -75,6 +75,11 @@
<!-- 隐私弹窗 -->
<privacy-popup ref="privacyPopup"></privacy-popup>
<!-- 底部tabBar -->
<view id="tab-bar">
<diy-bottom-nav></diy-bottom-nav>
</view>
</view>
</template>
@@ -90,6 +95,13 @@ export default {
mpShareData: null //小程序分享数据
};
},
computed: {
couponListPageStyle() {
return this.$util.objToStyle({
paddingBottom: this.tabBarList && this.tabBarList.list ? '112rpx' : '0'
});
}
},
onLoad(option) {
setTimeout(() => {
if (!this.addonIsExist.coupon) {

View File

@@ -1,6 +1,6 @@
<template>
<view :style="themeColor">
<view class="content">
<view class="content" :style="searchPageStyle">
<view class="cate-search">
<view class="search-box" @click="search()" @tap.stop="search()">
<input class="uni-input" maxlength="50" v-model="inputValue" confirm-type="search" @focus="inputFocus" focus @confirm="search()" @click="search()" @tap="search()" :placeholder="searchWords ? searchWords : ''" />
@@ -41,6 +41,10 @@
</view>
</view>
</view>
<!-- 底部tabBar -->
<view id="tab-bar">
<diy-bottom-nav></diy-bottom-nav>
</view>
</view>
</template>
@@ -58,6 +62,13 @@
isAllHistory: false
};
},
computed: {
searchPageStyle() {
return this.$util.objToStyle({
paddingBottom: this.tabBarList && this.tabBarList.list ? '112rpx' : '0'
});
}
},
onLoad(options) {
if (options.keyword) this.inputValue = options.keyword;
uni.getStorageSync('search') ? '' : uni.setStorageSync('search', []);

View File

@@ -1,6 +1,6 @@
<template>
<view :style="themeColor">
<mescroll-uni @getData="getData" ref="mescroll">
<mescroll-uni @getData="getData" ref="mescroll" :style="noticeListPageStyle">
<block slot="list">
<view class="notice-list" v-if="dataList.length">
<view class="notice-item" @click="jumpDetail(item.id)" v-for="(item, index) in dataList"
@@ -22,6 +22,11 @@
<!-- 隐私弹窗 -->
<privacy-popup ref="privacyPopup"></privacy-popup>
<!-- 底部tabBar -->
<view id="tab-bar">
<diy-bottom-nav></diy-bottom-nav>
</view>
</view>
</template>
@@ -32,6 +37,13 @@ export default {
dataList: []
};
},
computed: {
noticeListPageStyle() {
return this.$util.objToStyle({
paddingBottom: this.tabBarList && this.tabBarList.list ? '112rpx' : '0'
});
}
},
onShow() {
this.setPublicShare();
},