feat: 为多个页面添加底部tabBar适配布局
为文章列表、公告列表、品牌页、优惠券页、案例页、文件列表、商品搜索、积分商品列表、分销相关页面以及订单列表页添加了动态底部内边距样式,根据tabBar是否存在适配页面底部空间,同时统一添加自定义底部导航组件
This commit is contained in:
@@ -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();
|
||||
},
|
||||
|
||||
@@ -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();
|
||||
},
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -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;
|
||||
},
|
||||
|
||||
@@ -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) {
|
||||
|
||||
@@ -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', []);
|
||||
|
||||
@@ -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();
|
||||
},
|
||||
|
||||
Reference in New Issue
Block a user