uniapp使用swiper,动态设置内容高度
由于swiperContent部分的高度是动态的,有时候会超过屏幕视口的高度,有时候又小于屏幕视口的高度,所以在这里实现了一套自定义的动态设置swiperContent高度的方法,以下是代码部分。方法获取dom元素,由于这个方法是异步方法,所以我将一步步的计算放在了这个方法的回调当中,如果不这么写的话,会无法实时获取到dom元素的高度。上边图片是本人要实现的大致布局,其中使用了uniapp的swi
·
上边图片是本人要实现的大致布局,其中使用了uniapp的swiper,自定义的tabbar,以及自定义的tabs
由于swiperContent部分的高度是动态的,有时候会超过屏幕视口的高度,有时候又小于屏幕视口的高度,所以在这里实现了一套自定义的动态设置swiperContent高度的方法,以下是代码部分
methods: {
setSwiperHeight(current = 0) {
// swiper里边组件的高度
let itemsHeight = 0
// 当前屏幕总高度
let totalheight = uni.getSystemInfoSync().windowHeight
// 自定义的头部组件高度
let topHeight = 0
// 自定义tabs组件高度
let tabHeight = 0
// tabbar高度
let barHeight = uni.upx2px(96)
this.$nextTick(() => {
uni.createSelectorQuery()
.in(this)
.selectAll('.swiper-content')
.boundingClientRect()
.exec(res => {
itemsHeight = res[0][current].height
uni.createSelectorQuery().in(this).select(".tabs").boundingClientRect(data => {
tabHeight = data.height
// 获取头部高度
uni.createSelectorQuery().in(this).select(".header").boundingClientRect(data => {
topHeight = data.height
// 计算屏幕中留给swiper组件展示的剩余高度
let surplusHeight = totalheight - topHeight - tabHeight - barHeight
// 如果swiper当中的组件高度小于当前屏幕剩余高度,使用剩余高度,相反使用swiper当中的组件高度
if (itemsHeight < surplusHeight) {
this.swiperItemHeight = surplusHeight
} else {
this.swiperItemHeight = itemsHeight
}
}).exec()
}).exec()
})
})
}
}
补充说明:
setSwiperHeight(current = 0),这里的current设置的是当前自定义tabs默认打开的是第一个窗口
current存在的意义是在我使用tabs进行页面切换的时候再次调用setSwiperHeight()并把当前tabs的index传进去,以重新设置swiper内容的高度
上边的方法中通过 uni.createSelectorQuery().in(this).select(“”) 方法获取dom元素,由于这个方法是异步方法,所以我将一步步的计算放在了这个方法的回调当中,如果不这么写的话,会无法实时获取到dom元素的高度
更多推荐
已为社区贡献4条内容
所有评论(0)