1 利用 scroll-view 标签将要渲染的组件包裹起来，动态设置style属性的height
2 在生命周期 onReady中获取系统信息，将高度获取出来，赋值给需要设置的高度的变量
3 在methods中对设备做高度的兼容方法，并在第二步的onReady后面调用
完整代码：
<template>
<view class="index">
<!-- 顶部导航栏部分 -->
<!-- #ifdef MP-WEIXIN -->
<view class="wx-nav">
<view class="iconfont icon-fangdajing">
</view>
<text>百年奥莱</text>
<view class="iconfont icon-xiaoxi">
</view>
</view>
<!-- #endif -->
<!-- topBar -->
<scroll-view scroll-x="true" class="scroll-content" :scroll-into-view="scrollTop">
<view :id="'top'+index" class="scroll-item" v-for="(item,index) in topBar" :key="index"
@tap="changeTap(index)">
<text :class="currentIndex === index ? 'f-active-color':'f-color'">{{item.name}}</text>
</view>
</scroll-view>
<!-- swriper :style="{height:clentHeight+'px'}" -->
<swiper @change="changeSwiper" :current="currentIndex" :style="{height:clentHeight+'px'}">
<swiper-item v-for="(item,index) in newTopBar" :key="index">
<scroll-view scroll-y="true" :style="{height:clentHeight+'px'}">
<block v-if="item.data.length > 0">
<block v-for="(i,n) in item.data" :key="n">
<indexSwiper v-if="i.type === 'swiperList'" :indexSwiperList='i.swiperList'>
</indexSwiper>
<template v-if="i.type === 'recommendedList'">
<recommended :recommendedList='i.recommendedList'>
</recommended>
<card name="展示"></card>
</template>
<commodity-list v-if="i.type === 'commodityList'" :commodityList='i.commodityList'>
</commodity-list>
</block>
</block>
<view class="" v-else>
暂无数据。。。
</view>
</scroll-view>
</swiper-item>
</swiper>
<!-- 首页内容 -->
<!-- swiper部分 -->
<!-- <indexSwiper></indexSwiper>
<recommended></recommended>
<card name="展示"></card>
<commodity-list></commodity-list> -->
<!-- 其他模块：户外运动 -->
<!-- <banner></banner>
<card name="热销商品"></card>
<hot></hot>
<card name="推荐店铺"></card>
<shop></shop>
<card name="为您推荐"></card>
<commodity-list></commodity-list> -->
</view>
</template>
<script>
import indexSwiper from '@/components/index/indexSwiper.vue'
import recommended from '@/components/index/recommended.vue'
import card from '@/components/common/card.vue'
import commodityList from '@/components/common/commodityList.vue'
import banner from '@/components/index/banner.vue'
import hot from '@/components/index/hot.vue'
import shop from '@/components/index/shop.vue'
export default {
components: {
indexSwiper,
recommended,
card,
commodityList,
banner,
hot,
shop
},
data() {
return {
currentIndex: 0, // 选中的索引
scrollTop: 'top0', // scroll的tab标签跟随swiper滚动而滚动索引的id值
clentHeight: 0, // 组件的高度
topBar: [],
newTopBar: []
}
},
onLoad() {
this.__init()
},
onReady() {
// 获取系统信息 设置可视区域的值
uni.getSystemInfo({
success: (res) => {
this.clentHeight = res.windowHeight - this.getClientHeight();
console.log(res.windowHeight);
}
})
},
methods: {
__init() {
uni.request({
url: 'http://192.168.31.62:3000/api/index_list/data',
success: (res) => {
let data = res.data.data;
this.topBar = data.topBar;
this.newTopBar = this.initData(data);
console.log(this.newTopBar);
}
})
},
// 修改数据结构
initData(res) {
let arr = [];
for (let i = 0; i < this.topBar.length; i++) {
let obj = {
data: []
}
if (i == 0) {
obj.data = res.data;
}
arr.push(obj)
}
return arr;
},
// 点击切换topBar,添加对应的样式
changeTap(index) {
if (this.currentIndex === index) return
this.currentIndex = index;
this.scrollTop = 'top' + index;
},
// 滑动swiper,切换对应的topBar
changeSwiper(e) {
this.changeTap(e.detail.current)
console.log(e.detail.current)
},
// 获取可视区域的高【兼容】
getClientHeight() {
let res = uni.getSystemInfoSync()
console.log(res.platform);
let platform = res.platform
if (platform == 'android') {
return res.statusBarHeight - 4
} else if (platform == 'ios') {
return 44 + res.statusBarHeight
} else {
return uni.upx2px(250)
}
}
}
}
</script>
<style scoped>
.wx-nav {
display: flex;
justify-content: space-between;
width: 100%;
height: 200rpx;
line-height: 200rpx;
font-size: 30rpx;
}
.wx-nav .iconfont {
font-size: 20px;
margin: 0 20rpx;
}
.scroll-content {
width: 100%;
height: 50rpx;
white-space: nowrap;
}
.scroll-item {
margin: 0 20rpx;
display: inline-block;
}
.f-active-color {
border-bottom: 6rpx solid #49BDFB;
}
</style>
