全球共有10多个国家和地区1000多个平台,20万+商户使用
uniapp swiper如何自适应高度占满屏幕剩余高度
作者: 蒋吉祥 发布时间: 2023-03-18 1756 分类专栏: 前端开发
1、首先获取屏幕总高度
2、在获取当前swiper 距离顶部得位置
3、屏幕总高度减去当前swiper 距离顶部得位置 剩余的赋值给swiper高度
4、让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) => {}
})
蒋吉祥
小当家ISV,重庆APP开发,小程序开发,软件系统开发 地址:重庆市南岸区南坪万达广场写字楼2栋19-6 联系电话:023-81361879
ICP备案号:渝ICP备15003473-1 增值电信业务许可证:
渝B2-15003473
渝公网安备 50010802005103号
友情链接: APP定制开发 小程序定制开发 MagicShop商城系统 酒类行业解决方案
重庆小当家互联网信息技术有限公司