uni-app中 list 嵌套 swiper 再嵌套 list,在ios14 iphone 8p上滚动失效,滚动到一定程度无法继续向下滚动。

uni-app中 list 嵌套 swiper 再嵌套 list,在ios14 iphone 8p上滚动失效,滚动到一定程度无法继续向下滚动。

开发环境 版本号 项目创建方式
Mac macOS 11.4 HBuilderX

产品分类:uniapp/App
PC开发环境操作系统:Mac
HBuilderX类型:正式
HBuilderX版本号:3.2.14
手机系统:iOS
手机系统版本号:iOS 14
手机厂商:苹果
手机机型:iphone8 p
页面类型:nvue
vue版本:vue2
打包方式:云端

示例代码:

<template>
<view class="oe_my_home_page" :style="{'height': wHeight +'px'}">
<list :id="pageId" class="page" :bounce="false" :fixFreezing="true" @scroll="scroll" :scrollable="true">
<cell>
<view id="head">
<view class="oe_home_info">
<view class="oe_home_avatar">
<image class="oe_home_avatar_image" :src="home.headimg_m2" mode="aspectFill" @click="viewAvatar($event)"></image>
</view>
<view class="oe_home_info_box">
<view class="oe_home_info_name_box">
<text class="oe_home_info_name">{{home.username}}</text>
<image class="oe_home_info_vip" :src="siteUrl + home.levelimg" mode="widthFix" v-if="home.isvip == '1'"></image>
</view>
<view class="oe_home_info_data">
<text class="oe_home_info_data_text" v-if="home.age != '0'">{{home.age}}岁</text>
<text class="oe_home_info_data_text" v-if="home.height != '0'">{{home.height}}cm</text>
<text class="oe_home_info_data_text" v-if="home.dist2 != '0'">{{home.dist2_t}}</text>
<text class="oe_home_info_data_text" v-if="home.marry != '0'">{{home.marry_t}}</text>
<text class="oe_home_info_data_text" v-if="home.wantchild != '0'">{{home.wantchild_t}}小孩</text>
</view>
<template v-if="loginStatus == '1'">
<view class="oe_home_info_label" v-if="loginInfo.isvip == '1'">
<text class="oe_home_info_label_text" v-if="home.distance">{{home.distance}}</text>
<text class="oe_home_info_label_text" v-if="home.logintime_t">{{home.logintime_t}}</text>
</view>
<view class="oe_home_info_label_tips" v-else>
<text class="oe_home_info_label_tips_text">开通VIP可显示在线时间和距离</text>
</view>
</template>
<view class="oe_home_info_label_tips" v-else>
<text class="oe_home_info_label_tips_text">登录后可显示在线时间和距离</text>
</view>
</view>
</view>
<view class="oe_home_num">
<view class="oe_home_num_box">
<view class="oe_home_num_wrap">
<text class="oe_home_num_text">{{home.collects}}</text>
</view>
<view class="oe_home_num_text_box">
<text class="oe_home_num_box_text">关注</text>
</view>
</view>
<view class="oe_home_num_line"></view>
<view class="oe_home_num_box">
<view class="oe_home_num_wrap">
<text class="oe_home_num_text">{{home.fans}}</text>
</view>
<view class="oe_home_num_text_box">
<text class="oe_home_num_box_text">粉丝</text>
</view>
</view>
<view class="oe_home_num_line"></view>
<view class="oe_home_num_btn_box">
<view class="oe_home_num_btn" :class="{'oe_home_num_btn_current': home.is_collect =='1'}" @click="follow">
<text class="oe_home_num_btn_text" v-if="home.is_collect =='1'">已关注</text>
<text class="oe_home_num_btn_text oe_home_num_btn_text_current" v-else>关注</text>
</view>
</view>
</view>
<view class="tabs" :style="'height:' + pageHeight + 'px'">
<view class="oe_home_line"></view>
<view class="oe_home_bar">
<view class="oe_home_bar_item" @click="switchTab(0)">
<text class="oe_home_bar_text" :class="{'oe_home_bar_text_current': tabIndex == 0}">介绍/征婚</text>
<view class="oe_home_bar_line_box" v-if="tabIndex == 0">
<view class="oe_home_bar_line"></view>
</view>
</view>
<view class="oe_home_bar_item" @click="switchTab(1)">
<text class="oe_home_bar_text" :class="{'oe_home_bar_text_current': tabIndex == 1}">动态·{{home.dynamic_num}}</text>
<view class="oe_home_bar_line_box" v-if="tabIndex == 1">
<view class="oe_home_bar_line"></view>
</view>
</view>
<view class="oe_home_bar_item" @click="switchTab(2)">
<text class="oe_home_bar_text" :class="{'oe_home_bar_text_current': tabIndex == 2}">相册·{{home.photo_num}}</text>
<view class="oe_home_bar_line_box" v-if="tabIndex == 2">
<view class="oe_home_bar_line"></view>
</view>
</view>
</view>
<swiper class="tab-view" ref="swiper1" id="tab-bar-view" :current="tabIndex" :duration="300" @change="swiperChange">
<swiper-item class="swiper-item">
<info class="swiper-page" pid="tab1" :parentId="pageId" :home="home" ref="page1"></info>
</swiper-item>
<swiper-item class="swiper-item">
<dynamic class="swiper-page" pid="tab2" :parentId="pageId" :id="id" ref="page2"></dynamic>
</swiper-item>
<swiper-item class="swiper-item">
<photo class="swiper-page" pid="tab3" :parentId="pageId" :id="id" ref="page3"></photo>
</swiper-item>
</swiper>
</view>
</cell>
</list>
</view>
</template>

操作步骤:

list组件嵌套swiper组件,再嵌套list组件

预期结果:

可以继续向下滚动

实际结果:

list无法更新高度,无法滚动到底部

bug描述:

list 嵌套 swiper 嵌套 list ,在ios14 iphone 8p,滚动失效,滚动到一定程度无法继续向下滚动。 无法滚动到底部

66.rar


更多关于uni-app中 list 嵌套 swiper 再嵌套 list,在ios14 iphone 8p上滚动失效,滚动到一定程度无法继续向下滚动。的实战教程也可以访问 https://www.itying.com/category-93-b0.html

1 回复

更多关于uni-app中 list 嵌套 swiper 再嵌套 list,在ios14 iphone 8p上滚动失效,滚动到一定程度无法继续向下滚动。的实战教程也可以访问 https://www.itying.com/category-93-b0.html


这个问题是由于iOS 14系统上嵌套滚动容器的特定兼容性问题导致的。在nvue页面中,list组件嵌套swiper再嵌套list时,内部list的高度计算可能出现异常,导致滚动失效。

解决方案:

  1. 使用scroll-view替代内部list:如果内部list不需要复用机制,可以改用scroll-view组件。

  2. 设置固定高度:给内部的list组件设置明确的高度值,避免高度计算异常。

  3. 使用页面级滚动:考虑将外层list改为页面级滚动,使用onPageScroll事件处理。

  4. 升级HBuilderX:尝试升级到最新版本的HBuilderX,官方可能已经修复了相关兼容性问题。

  5. 使用vue页面:如果业务允许,可以考虑使用vue页面替代nvue页面,vue页面的滚动容器兼容性更好。

代码调整示例:

<!-- 将内部list改为scroll-view -->
<scroll-view 
  :scroll-y="true" 
  :style="{height: innerHeight + 'px'}">
  <!-- 原list内容 -->
</scroll-view>
回到顶部