计算scroll-view高度

最新推荐文章于 2025-04-28 13:30:55 发布

diangedan

最新推荐文章于 2025-04-28 13:30:55 发布

阅读量534

点赞数 1

CC 4.0 BY-SA版权

分类专栏： uniapp 文章标签： javascript 前端

本文链接：https://blog.csdn.net/diangedan/article/details/127442581

uniapp 专栏收录该内容

10 篇文章

订阅专栏

该博客内容涉及uni-app中使用swiper组件和scroll-view进行页面滑动及滚动加载。通过设置duration属性控制滑动动画时长，利用@animationfinish监听滑动结束事件，同时结合scroll-y和@scrolltolower事件实现内容的滚动加载。在onReady生命周期方法中，获取屏幕高度并动态设置scroll-view的高度。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<swiper :duration="150" :current="selectIndex" 
  :style="{height:scrollHeight}"
  @animationfinish="changeTab"
  >
 <swiper-item v-for="(tabItem,ins1) in 2" :key="ins1">
  <scroll-view scroll-y="true" class="scroll" 
  :style='{height: scrollHeight}'
   @scrolltolower="loadMore">
   <view v-for="(item, index) in dataList" :key="index">
    <view class="item">重庆乐菲亚装饰材料有限公司{{index}}</view>
   </view>
  </scroll-view>
 </swiper-item>
</swiper>

onReady() {
 uni.getSystemInfo({
  success: resu => {
   const query = uni.createSelectorQuery()
   query.select('.scroll').boundingClientRect()
   query.exec(res => {
    // console.log('打印页面的剩余高度', res);
    this.scrollHeight = resu.windowHeight - res[0].top + 'px';
   })
  }
 })
},