<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>
<!-- 遮罩层：用于覆盖在swiper上，阻止swiper滑动。因为swiper没有禁止滑动方法。 -->
<!-- <view :style="{ height: (listHeight + 'px'),background: 'rgba(0,0,0,0)',position: 'absolute',top: 0,width: '750rpx' }"-->
<!-- v-if="!swiperScrollable"></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>```
1***@qq.com
- 发布：2023-11-01 10:08
- 更新：2024-01-15 16:08
- 阅读：324
产品分类： HbuilderX
PC开发环境操作系统： Windows
PC开发环境操作系统版本号： 3.8.12
HBuilderX版本号： 3.8.12
App下载地址或H5⽹址： 苹果应用商店搜索“海氏烘焙”
示例代码：
操作步骤：
使用吸顶功能，和waterFall组件，scroll-view等滑动组件时很容易复现，屏幕卡死不能滑动，严重的APP直接卡退。在安卓上使用正常。
使用吸顶功能，和waterFall组件，scroll-view等滑动组件时很容易复现，屏幕卡死不能滑动，严重的APP直接卡退。在安卓上使用正常。
预期结果：
能正常上下滑动，不卡屏，不卡退
能正常上下滑动，不卡屏，不卡退
实际结果：
///
///
bug描述：
waterFall组件，scroll-view等滑动组件在苹果手机上经常卡顿，已经严重影响使用。同一套代码，在案桌上运行就没有问题，而且苹果手机版本越高，卡顿越频繁。苹果手机版本越低，卡顿情况稍微好一些，但也有卡顿现象。尤其是在上下滑动屏幕和吸顶功能的这部分
1 个回复
1***@qq.com (作者) - IT
安卓手机上正常