您现在的位置是：网站首页>软件开发>开发终端>uni-appuni-app

解决 img mode="widthFix" 高度闪烁问题

风口下的猪2019-11-13【uni-app】

简介

 错题症状

uni-app项目中，经常会用到image的一种常用设置，即控制width、定义image标签的属性mode="widthFix"。

但是，这样无论在h5还是SPA还是APP，都会出现页面加载时图片闪动问题。


 错题分析

当image的mode="widthFix"，同时只给image一个宽度，image显示的时候就会有一个迅速缩小的过程（如果原图片高度大于 根据宽度widthFix之后的高度），而且原图高度远大于widthFix之后的高度时，image的这种缩小就越明显，视觉上的表现为-闪烁！这种情况下的用户体验极差。

事实上，当加上 mode="widthFix" 而且只给image设定宽度不设定高度，之后图片是有一个明显的缩小的过程的（高度缩小为 widthFix根据设定的宽度和原图比例而生成的高度）




 错题解决方案

预期表现是没有这个缩小的过程，给image设定mode="widthFix"之后，在编译过程中，编译工具根据设定的图片宽度，以及原图的横纵比自动生成一个高度并赋予给image。这样，在编译过程中就已经生成了高度，而不是在image展现的时候才进行计算，出现一个拉伸/缩小的过程，这样不仅可以避免闪烁，而且还可以减少客户端压力。

解决方法是
给图片加上display:black的属性，并让图片高度自动获取（即通过widthFix计算后再渲染到页面上，而不是先渲染再通过widthFix调整）

display:block;height: auto



很赞哦！ (0)

上一篇：自定义组件uni-nav-bar插槽问题

下一篇：多层使用组件，每层都要注册的问题

  • 软件开发
  • 素质要求
  • 计算机基础
  • 架构
  • 安全
  • 性能
  • 运维
  • 尾页
  • 数据库
  • 开发终端
  • 语言基础
  • 项目管理
  • 产品设计
  • 系统
  • 工作规范
  • 计算机网络
  • 前端技术栈
  • 数据结构
  • 计算机组成原理
  • 后端技术栈
  • 性能优化
  • 安全设计
  • 常见模块
  • 计算机操作系统
  • 服务器
  • python
  • MySQL
  • thinkphp
  • PHP
  • Java
  • JavaScript
  • Windows
  • Linux
  • 特效
  • indexedDB
  • vue
  • 淘宝联盟
  • Ionic
  • Angular
  • 微信小程序
  • 支付宝小程序
  • uni-app
  • css/sass/less
  • 支付
  • socket
  • 爬虫
  • web性能优化
  • 消息推送
  • CVM
  • sqlite
  • Redis
  • 前端基础
  • 基础
  • element
  • Nginx
  • yii2
    • /ponder/index.php/index/catelist/catelist/cateid/10.html

    相关阅读 (同一栏目)

    << 第 /页

    栏目目录

    软件开发(47)MySQL(25)
    thinkphp(89)PHP(33)
    JavaScript(39)项目管理(3)
    产品设计(5)Linux(15)
    计算机网络(6)计算机组成原理(1)
    微信小程序(7)安全设计(4)
    uni-app(70)淘宝联盟(4)
    支付(7)socket(18)
    计算机操作系统(4)爬虫(5)
    web性能优化(5)消息推送(9)
    CVM(2)Redis(27)
    indexedDB(5)vue(57)
    特效(2)css/sass/less(5)
    基础(1)element(1)
    Nginx(6)yii2(19)

    标签云

    站点信息

    • 文章统计：528篇
    • 移动端访问：扫码进入SQ3R

    申请链接友情链接