uni-app 用HbuilderX打包的苹果APP 在IOS系统上 滑动屏幕时经常卡屏 已经严重影响使用体验了

uni-app 用HbuilderX打包的苹果APP 在IOS系统上 滑动屏幕时经常卡屏 已经严重影响使用体验了

开发环境 版本号 项目创建方式
Windows 3.8.12 HBuilderX

示例代码:

<scroll-view id="container" class="container" show-scrollbar="false" :fixFreezing="true" :enable-back-to-top="true"  
             alwaysScrollableVertical="true" :scrollable="listScrollable" @touchmove="listTouch"  
             @touchend="listTouchend" :style="forbidTouch"  
             @touchstart="listTouchstart">  
    <refresh class="refresh-box" @refresh="onrefresh()" @pullingdown="onPullingDown"  
             :display="refreshing ? 'show' : 'hide'">
        <loading-indicator class="icon"></loading-indicator>
        <text style="text-align: center;font-size: 24rpx;color: #999;">{{ refreshText }}</text>
    </refresh>
    <view id="head" class="head">
        <!-- 导航菜单-->
        <view class="menu-box">
            <template v-for="(item, index) in menuData">
                <view class="menu-box-item" :key="index" @click="handleNavigationClick(item)">
                    <image class="menu-box-icon" :src="item.imgUrl" mode="aspectFill"></image>
                    <text class="menu-box-name">{{ item.name }}</text>
                </view>
            </template>
        </view>
        <!-- 每日精选-->
        <view class="daily-container">
            <view class="home-title-box" :style="isFullScreen?'height:100rpx':''">
                <text class="title-text">每日精选</text>
            </view>
            <navigator class="image-box" :url="`../recipes/recipes?id=${daily.id}`" hover-class="none">
                <image class="image" :src="daily.imgUrl" mode="aspectFill"></image>
                <view class="daily-mask"></view>
                <text class="official" v-if="daily.isOfficial">官方食谱</text>
                <view class="daily-title">
                    <text class="title">{{ daily.title }}</text>
                </view>
                <image v-if="daily.isVideo" class="icon-video" src="@/static/video@2x.png"></image>
            </navigator>
        </view>
        <!-- 精选合集-->
        <view class="selected-container">
            <view class="home-title-box" :style="isFullScreen?'height:100rpx':''">
                <text class="title-text">精选合集</text>
                <navigator hover-class="none" url="/pages/collection/collection">
                    <text class="title-more" @click="toCollection">更多</text>
                </navigator>
            </view>
            <scroll-view class="selected" :show-scrollbar="false" scroll-x :scrollable="rowScrollable"  
                         @touchmove="rowScrollTouch" @touchend="rowScrollTouchend"  
                         @touchstart="rowScrollTouchstart">
                <view class="selected-box">
                    <view class="selected-item" v-for="(item, index) in collection" :key="item.id"  
                          :class="{ 'selected-item-last': index == collection.length - 1 }"  
                          @click="toCollectionDetail(item.id)">
                        <image class="selected-item-image" mode="aspectFill" :src="item.imgUrl"></image>
                        <text class="selected-item-title">{{ item.name }}</text>
                        <text class="selected-item-subtitle">{{ item.viewCount }}浏览</text>
                    </view>
                </view>
            </scroll-view>
        </view>
    </view>

    <view id="recipes-sticky" class="recipes-sticky">
        <view id="tab-list" class="tab-list" :style="tab_list_position">
            <scroll-view class="tab-scroll" ref="tabbar" id="tabbar" :show-scrollbar="false"  
                         scroll-x :scrollable="rowScrollable" @touchmove="rowScrollTouch" @touchend="rowScrollTouchend"  
                         @touchstart="rowScrollTouchstart">
                <view class="tab-scroll-box">
                    <view class="tab-list-item" v-for="(item, index) in tabList" :key="item.id"  
                          :id="`tabitem${item.id}`" :data-id="item.id" :data-current="index"  
                          @click="handleTabClick(index,item)">
                        <view>
                            <text :class="{ 'tab-list-item-text-active': index == currentSwiperItemIndex }"  
                                  class="tab-list-item-text">{{ item.name }}
                            </text>
                        </view>
                        <view class="underline" style="margin-bottom: 10rpx;">
                            <view v-if="index == currentSwiperItemIndex" class="highlight-underline"></view>
                        </view>
                    </view>
                </view>
            </scroll-view>
        </view>
        <view id="tabberList" class="tabberList">
            <view v-for="(item,index) in listData" :key="index" class="row" :style="(index%2==1)?'':'margin-right:18rpx;'">
                <navigator class="item" :url="`/pages/recipes/recipes?id=${item.id}`" hover-class="none">
                    <view>
                        <view class="image-recipe-box">
                            <image class="item-image" :src="item.imgUrl" mode="aspectFill">
                            </image>
                            <image v-if="item.isVideo" class="icon-video" src="@/static/video@2x.png"></image>
                        </view>
                        <text class="item-title">{{item.title}}</text>
                    </view>
                    <view class="item-author">
                        <view class="author-info">
                            <image class="author-avatar" :src="item.author.avatar" mode="aspectFill">
                            </image>
                            <text class="author-name">{{item.author.nickName}}</text>
                        </view>
                        <text class="item-viewcount">{{item.viewCount}}浏览</text>
                    </view>
                </navigator>
            </view>
            <footer class="footer" ref="footer" v-if="loadMoreStatus!='null'">
                <view style="padding-top: 120rpx;padding-bottom: 100rpx;">
                    <uni-load-more :status="loadMoreStatus" :contentText="contentText" @clickLoadMore="loadMore()">
                    </uni-load-more>
                </view>
            </footer>
        </view>
        <!-- 上拉加载更多 -->
    </view>
</scroll-view>

操作步骤:

  • 使用吸顶功能,和waterFall组件,scroll-view等滑动组件时很容易复现,屏幕卡死不能滑动,严重的APP直接卡退。在安卓上使用正常。

预期结果:

  • 能正常上下滑动,不卡屏,不卡退

实际结果:

  • ///

bug描述:

  • waterFall组件,scroll-view等滑动组件在苹果手机上经常卡顿,已经严重影响使用。同一套代码,在案桌上运行就没有问题,而且苹果手机版本越高,卡顿越频繁。苹果手机版本越低,卡顿情况稍微好一些,但也有卡顿现象。尤其是在上下滑动屏幕和吸顶功能的这部分

更多关于uni-app 用HbuilderX打包的苹果APP 在IOS系统上 滑动屏幕时经常卡屏 已经严重影响使用体验了的实战教程也可以访问 https://www.itying.com/category-93-b0.html

1 回复

更多关于uni-app 用HbuilderX打包的苹果APP 在IOS系统上 滑动屏幕时经常卡屏 已经严重影响使用体验了的实战教程也可以访问 https://www.itying.com/category-93-b0.html


安卓手机上正常

回到顶部