小当家ISV
互联网高新技术服务商

全球共有10多个国家和地区1000多个平台,20万+商户使用

uniapp swiper如何自适应高度占满屏幕剩余高度

作者:    蒋吉祥       发布时间:     2023-03-18          788      分类专栏: 前端开发

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) => {}

})  


所属分类: 前端开发
RabbitMQ的用户管理
【UI】常见基础知识整理

小当家,帮您把生意越做越大!

小当家ISV,重庆APP开发,小程序开发,软件系统开发 地址:重庆市南岸区南坪万达广场写字楼2栋19-6 联系电话:023-81361879

ICP备案号:渝ICP备15003473-1 增值电信业务许可证: 渝B2-15003473 渝公网安备 50010802005103号

友情链接: 小当家点餐收银系统   MagicShop商城  重庆微信营销  重庆智能家居  重庆红岭医院 

重庆小当家互联网信息技术有限公司