uniapp swiper如何自适应高度占满屏幕剩余高度
首先获取屏幕总高度在获取当前swiper 距离顶部得位置屏幕总高度减去当前swiper 距离顶部得位置 剩余的赋值给swiper高度让scroll-viewscroll-y 溢出可以滚动html 代码<swiper class="swiperss" :current="activeIndex" @change='tabchange':style="{height:swiperheight}"
·
首先获取屏幕总高度
在获取当前swiper 距离顶部得位置
屏幕总高度减去当前swiper 距离顶部得位置 剩余的赋值给swiper高度
让scroll-view scroll-y 溢出可以滚动
html 代码
<swiper class="swiperss" :current="activeIndex" @change='tabchange' :style="{height:swiperheight}">
<swiper-item>
<scroll-view scroll-y class="list" :style="{height:swiperheight}">
</scroll-view>
</swiper-item>
</swiper>
js 代码
uni.getSystemInfo({
success: (resu) => {// resu 可以获取当前屏幕的高度
const query = uni.createSelectorQuery()
query.in(this).select('.swiperss').boundingClientRect()// .swiper 是swiper类名 可以获取当前swiper距离顶部的位置
query.exec(function(res) {
console.log(res)
_this.swiperheight = resu.windowHeight - res[0].top+ 'px'; //屏幕的高度减去当前swiper距离顶部的高度就是剩余屏幕的高度 然后动态赋值给swiper
console.log('打印页面的剩余高度', _this.swiperheight);
})
},
fail: (res) => {}
})
更多推荐
已为社区贡献2条内容
所有评论(0)