// 外层部分
<swiper :current="NavCurrent" @change="changeSwiper" :style="'height:'+clientHeight+ 'px;'">
<swiper-item :style="'height:'+clientHeight+ 'px;'">
<scroll-view scroll-y="true" :style="'height:'+clientHeight+ 'px;'">
<FirstPage :swiperList="swiperList" :mostList="mostList" :heatList="heatList" :seeList="seeList">
</FirstPage>
</scroll-view>
</swiper-item>
<swiper-item>免费课程</swiper-item>
<swiper-item>实战课程</swiper-item>
</swiper>
// 计算滚动部分的高度方法： 可视区域的高-header高-tabbar高
onReady() {
// 可视区域的高 - header的高
const query = uni.createSelectorQuery().in(this);
query.select('.header').boundingClientRect(data => {
uni.getSystemInfo({
success: (res) => {
this.clientHeight = res.screenHeight - data.height
}
});
}).exec();
// 导航栏 nav 的高
query.select('.nav').boundingClientRect(data => {
this.clientHeight = this.clientHeight - data.height
console.log(this.clientHeight);
}).exec();
// tabbar 的高
query.select('.tabbar').boundingClientRect(data => {
this.clientHeight = this.clientHeight - data.height
console.log(this.clientHeight);
}).exec();
},
// scroll-view 去掉滚动条样式
scroll-view ::-webkit-scrollbar {
display: none;
width: 0 !important;
height: 0 !important;
-webkit-appearance: none;
background: transparent;
color: transparent;
}
完整代码：
<template>
<view class="home">
首页
<MyHeader class="header"></MyHeader>
<view class="home-container">
<!-- nav tabs -->
<view class="nav">
<u-tabs :list="list" :current="NavCurrent" @change="change"></u-tabs>
</view>
<!-- 外层 -->
<swiper :current="NavCurrent" @change="changeSwiper" :style="'height:'+clientHeight+ 'px;'">
<swiper-item :style="'height:'+clientHeight+ 'px;'">
<scroll-view scroll-y="true" :style="'height:'+clientHeight+ 'px;'">
<FirstPage :swiperList="swiperList" :mostList="mostList" :heatList="heatList"
:seeList="seeList">
</FirstPage>
</scroll-view>
</swiper-item>
<swiper-item>免费课程</swiper-item>
<swiper-item>实战课程</swiper-item>
</swiper>
</view>
<u-toast ref="uToast" />
<Tabbar currentPath="home" class="tabbar"></Tabbar>
</view>
</template>
<script>
import Tabbar from '@/common/tabbar/tabbar.vue'
import MyHeader from '@/common/myHeader/index.vue'
import FirstPage from '@/components/home/FirstPage/index.vue'
import {
getSliders,
getMostList,
mostHeatList,
getSeeList
} from '@/servies/home.js'
export default {
data() {
return {
NavCurrent: 0,
swiperList: [], // 轮播图数据
mostList: [], // 新上好课数据
heatList: [], // 最热课程
seeList: [], // 大家都在看
seeParams: {
pageNum: 1, //页码，默认1
pageSize: 3, // 分页大小，默认10
},
list: [{
id: 123,
name: '今日推荐'
},
{
id: 124,
name: '免费课程'
},
{
id: 125,
name: '实战课程'
}
],
clientHeight: null, // 滚动区域的高
}
},
components: {
Tabbar,
MyHeader,
FirstPage
},
onReady() {
// 可视区域的高 - header的高
const query = uni.createSelectorQuery().in(this);
query.select('.header').boundingClientRect(data => {
// #ifdef H5
uni.getSystemInfo({
success: (res) => {
this.clientHeight = res.screenHeight
}
});
// #endif
uni.getSystemInfo({
success: (res) => {
this.clientHeight = res.screenHeight - data.height
}
});
}).exec();
// 导航栏 nav 的高
query.select('.nav').boundingClientRect(data => {
this.clientHeight = this.clientHeight - data.height
console.log(this.clientHeight);
}).exec();
// tabbar 的高
query.select('.tabbar').boundingClientRect(data => {
this.clientHeight = this.clientHeight - data.height
console.log(this.clientHeight);
}).exec();
},
onShow() {
uni.hideTabBar()
},
onLoad() {
this.__init()
},
methods: {
__init() {
// 轮播图
getSliders().then(res => {
// console.log(res)
if (res.meta.code === '200') {
this.swiperList = res.data.list
} else {
this.$refs.uToast.show({
title: res.meta.msg,
// 如果不传此type参数，默认为default，也可以手动写上 type: 'default'
type: 'error',
// 如果不需要图标，请设置为false
icon: false
})
}
}).catch(err => {
this.$refs.uToast.show({
title: err.meta.msg,
// 如果不传此type参数，默认为default，也可以手动写上 type: 'default'
type: 'error',
// 如果不需要图标，请设置为false
icon: false
})
})
// 新上好课
getMostList({
pageNum: 1, //页码，默认1
pageSize: 6, //分页大小，默认10
entity: "" // 查询对象
}).then(res => {
if (res.meta.code === '200') {
this.mostList = res.data.pageInfo.list
} else {
this.$refs.uToast.show({
title: res.meta.msg,
// 如果不传此type参数，默认为default，也可以手动写上 type: 'default'
type: 'error',
// 如果不需要图标，请设置为false
icon: false
})
}
}).catch(err => {
this.$refs.uToast.show({
title: err.meta.msg,
// 如果不传此type参数，默认为default，也可以手动写上 type: 'default'
type: 'error',
// 如果不需要图标，请设置为false
icon: false
})
})
// 推荐课程
mostHeatList({
pageNum: "1", //页码，默认1
pageSize: "10", //分页大小，默认10
}).then(res => {
if (res.meta.code === '200') {
console.log(res);
this.heatList = res.data.pageInfo.list
// 处理返回数据
this.heatList.map(item => {
switch (item.courseLevel) {
case 1:
item.courseLevel = '初级';
break;
case 2:
item.courseLevel = '中级';
break;
case 3:
item.courseLevel = '高级';
break;
}
})
} else {
this.$refs.uToast.show({
title: res.meta.msg,
// 如果不传此type参数，默认为default，也可以手动写上 type: 'default'
type: 'error',
// 如果不需要图标，请设置为false
icon: false
})
}
}).catch(err => {
this.$refs.uToast.show({
title: err.meta.msg,
// 如果不传此type参数，默认为default，也可以手动写上 type: 'default'
type: 'error',
// 如果不需要图标，请设置为false
icon: false
})
})
// 大家都在看
this.getCourse()
},
// 大家都在看
getCourse() {
getSeeList(this.seeParams).then(res => {
if (res.meta.code === '200') {
console.log(res);
this.seeList = res.data.pageInfo.list
} else {
this.$refs.uToast.show({
title: res.meta.msg,
// 如果不传此type参数，默认为default，也可以手动写上 type: 'default'
type: 'error',
// 如果不需要图标，请设置为false
icon: false
})
}
}).catch(err => {
this.$refs.uToast.show({
title: err.meta.msg,
// 如果不传此type参数，默认为default，也可以手动写上 type: 'default'
type: 'error',
// 如果不需要图标，请设置为false
icon: false
})
})
},
change(index) {
this.NavCurrent = index;
},
changeSwiper(e) {
this.NavCurrent = e.detail.current
}
}
}
</script>
<style lang="scss" scoped>
scroll-view ::-webkit-scrollbar {
display: none;
width: 0 !important;
height: 0 !important;
-webkit-appearance: none;
background: transparent;
color: transparent;
}
.home {
width: 100vw;
height: 100vh;
}
.home-container {
padding: 0 20rpx;
}
</style>
