uni-app scrollView 不可视区域的文字滚动到可视区域时 文字是模糊的

uni-app scrollView 不可视区域的文字滚动到可视区域时 文字是模糊的

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

示例代码：

<scroll-view scroll-y class="c-modal__content" :style="{height: height}" @scrolltolower="loadMornList"  
            :lower-threshold="100">  
    <view class="c-modal__list">  
        <view v-if="showListTitle_" class="c-modal__list-title">{{listTilte}}</view>  
        <view :class="[mode]" v-if="radioType_">  
            <c-radio-group class="c-modal__list-content" wrap v-model="temp_coupon_id" @change="changeCoupon">  
                <block v-for="(item, index) in pageList" :key="index">  
                    <c-radio shape="circle" :name="item.user_coupon_record_id" :disabled="item.can_use === 0" cancelEnble>  
                        <c-coupons hideTicketStatus :showRule="false" :item="item" :index="index" :switchPage="false" mode="confirm-order" />  
                    </c-radio>  
                </block>  
            </c-radio-group>  
        </view>  
    </view>  
</scroll-view>

操作步骤：

  • scrollView中v-for循环一个自定义组件,可视区域的文字不会模糊,不可视区域的文字滚动到可视区域时,文字是模糊的

预期结果：

  • scrollView中不在可视区域的元素滚动到可视区域时文字没有阴影

实际结果：

  • scrollView中不在可视区域的元素滚动到可视区域时有阴影

bug描述：

  • scrollView中未显示内容滚动出现时,文字全部有阴影,


更多关于uni-app scrollView 不可视区域的文字滚动到可视区域时 文字是模糊的的实战教程也可以访问 https://www.itying.com/category-93-b0.html

5 回复

H5和小程序都会有这个问题

更多关于uni-app scrollView 不可视区域的文字滚动到可视区域时 文字是模糊的的实战教程也可以访问 https://www.itying.com/category-93-b0.html


怎么解决

我也出现这个问题了，同一段内容，加了overflow：scroll，字体就模糊，去掉就好了，很神奇

Android APP端

这是一个典型的渲染性能问题，通常由GPU加速渲染和字体抗锯齿处理引起。当scroll-view中的元素从不可见区域滚动到可见区域时，系统可能未能及时完成字体的清晰渲染。

解决方案：

  1. 添加CSS属性优化渲染：
.c-modal__content {
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-font-smoothing: antialiased;
}

这能强制开启GPU加速，改善字体渲染效果。

  1. 优化scroll-view性能：
  • 减少嵌套层级，避免复杂的CSS样式
  • 对长列表使用虚拟滚动（如使用<list>组件替代）
  • 确保自定义组件c-coupons的渲染效率
  1. 检查字体设置：
.c-modal__list {
  font-weight: normal;
  text-rendering: optimizeLegibility;
}
回到顶部