正文
[bug]微信小程序使用 <scroll-view> 和 box-shadow 引起页面抖动
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
背景
为了实现点点点动态loading效果，并且方便使用（只需要给一个空元素加一个.loading），有如下代码：
.loader {
background-color: #fff;
font-size: 25px;
width: 8px;
height: 8px;
border-radius: 50%;
margin: 10px auto;
position: relative;
-webkit-animation: load 1s infinite ease;
animation: load 1s infinite ease;
}
@keyframes load {
0% {
background-color: #adc2cc;
box-shadow: 16px 0 0 0 #e4ebee, -16px 0 0 0#7799AA;
}
50% {
background-color: #e4ebee;
box-shadow: 16px 0 0 0 #7799aa, -16px 0 0 0#adc2cc;
}
100% {
background-color: #7799aa;
box-shadow: 16px 0 0 0 #adc2cc, -16px 0 0 0#e4ebee;
}
}
这样，只需要在页面中使用<view class="loading"> </view>即可出现点点点动态loading效果。
但是，在 iphone 真机上，如果<scroll-view>内有以上的 loading ，滑动页面时，会有强烈的抖动。
原因
猜测可能是 animation 中，无限次使用 box-shadow 导致微信小程序 webview 无限次计算元素的宽高导致。
[bug]微信小程序使用 <scroll-view> 和 box-shadow 引起页面抖动的更多相关文章- 微信小程序 在canvas画布上划动，页面禁止滑动
要实现微信小程序 在canvas画布上划动,页面禁止滑动,不仅要设置disable-scroll="true",还要要给canvas绑定一个触摸事件才能生效. <canvas ...
- 使用wepy开发微信小程序商城第二篇：路由配置和页面结构
使用wepy开发微信小程序商城 第二篇:路由配置和页面结构 前言: 最近公司在做一个微信小程序的项目,用的是类似于vue的wepy框架.我也借此机会学习和实践一下. 小程序官方文档:https://d ...
- 微信小程序：scroll滑到指定位置
概述 这是我开发微信小程序遇到的坑中的一个,专门记录下来,供以后开发时参考,相信对其他人也有用. scroll滑到指定位置,有两种解决方案,一种是用scroll-view标签,另一种是用wx.page ...
- 微信小程序_(组件)view视图容器
微信小程序view组件官方文档 传送门 Learn 一.hover-class属性 二.hover-start-time与hover-stay-time属性 三.hover-stop-propagat ...
- 原创+转发：微信小程序navigator、redirectTo、switchTab几种页面跳转方式
什么是事件? 事件是视图层到逻辑层的通讯方式. 事件可以将用户的行为反馈到逻辑层进行处理. 详解(以常见的tap点击事情为例) 模板.wxml代码: <view id="tapTest ...
- 微信小程序tips集合:无法输入文字/随时查看页面/元素审查/点击事件/数据绑定
1:编辑文档无法输入文字 出现这种情况一般是因为之前编辑的文档未保存,所有在其他文档输入的时候会自动输入到未保存的文档中,在文档暂时编辑完毕后要ctrl+s随手保存,不然会出现无法打字情况 2: 随时 ...
- 微信小程序（一）：编写58同城页面
2018.3.25 这个时间我觉得更具58页面进行模仿. 微信小程序,标题更改在app.json文件中window属性. window用于设置小程序的状态栏.导航条.标题.窗口背景色.注意在app.j ...
- 从微信小程序到鸿蒙js开发【11】——页面路由
目录: 1.router.push()&wx.navigateTo() 2.router.replace()&wx.redirectTo() 3.router.back()&w ...
- [BUG]微信小程序ios时间转换
描述 小程序ios new Date('2019-08-14T08:00:00.000+0000') 显示为 <Date: null>. '2019-08-14T08:00:00 ...
随机推荐- html、css、js注释
HTML注释 <!--注释的内容--> CSS注释 /* 注释内容 */ JS注释 单行注释以 // 开头. 多行注释以 /* 开始,以 */ 结尾.
- java io系列14之 DataInputStream(数据输入流)的认知、源码和示例
本章介绍DataInputStream.我们先对DataInputStream有个大致认识,然后再深入学习它的源码,最后通过示例加深对它的了解. 转载请注明出处:http://www.cnblogs. ...
- 【BZOJ】【1036】树的统计
嗯这题是一道对树进行动态修改&查询的经典题目,可以拿来练习树链剖分~ 啊对于这种动态修改&查询的题目,我们最喜闻乐见的就是在一个序列上去做了,毕竟可以直接套各种数据结构模版啊,比如线段 ...
- Java并发编程--线程封闭（Ad-hoc封闭 栈封闭 ThreadLocal）
线程封闭实现好的并发是一件困难的事情,所以很多时候我们都想躲避并发.避免并发最简单的方法就是线程封闭.什么是线程封闭呢?就是把对象封装到一个线程里,只有这一个线程能看到此对象.那么这个对象就算不是线程 ...
- tomcat6.0目录和server.xml详解
Tomcat 服务器是一个免费的开放源代码的Web 应用服务器,目前最新版本是6.x,相对5.x性能提升很多,主要优化了内存使用,增强IO能力,重新构造集群功能. 近期对Tomcat6.x作深入学习, ...
- TApplication.Initialize的前世今生
---------------------------------------------------------------------------------------------------- ...
- 1.java.io包中定义了多个流类型来实现输入和输出功能，
1.java.io包中定义了多个流类型来实现输入和输出功能,可以从不同的角度对其进行分 类,按功能分为:(C),如果为读取的内容进行处理后再输出,需要使用下列哪种流?(G) A.输入流和输出流 B ...
- Hdoj 2188.悼念512汶川大地震遇难同胞——选拔志愿者 题解
Problem Description 对于四川同胞遭受的灾难,全国人民纷纷伸出援助之手,几乎每个省市都派出了大量的救援人员,这其中包括抢险救灾的武警部队,治疗和防疫的医护人员,以及进行心理疏导的心理 ...
- Hadoop基础-Hdfs各个组件的运行原理介绍
Hadoop基础-Hdfs各个组件的运行原理介绍 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.NameNode工作原理(默认端口号:50070) 1>.什么是NameN ...
- 函数和常用模块【day06】：re模块（九）
本节内容 1.简述 2.常用的正则表达式符号 3.常用匹配方法 4.常用方法 5.反斜杠的困扰 6.其他匹配模式 7.总结 一.简述 就其本质而言,正则表达式(或 RE)是一种小型的.高度专业化的编程 ...
要实现微信小程序 在canvas画布上划动,页面禁止滑动,不仅要设置disable-scroll="true",还要要给canvas绑定一个触摸事件才能生效. <canvas ...
使用wepy开发微信小程序商城 第二篇:路由配置和页面结构 前言: 最近公司在做一个微信小程序的项目,用的是类似于vue的wepy框架.我也借此机会学习和实践一下. 小程序官方文档:https://d ...
概述 这是我开发微信小程序遇到的坑中的一个,专门记录下来,供以后开发时参考,相信对其他人也有用. scroll滑到指定位置,有两种解决方案,一种是用scroll-view标签,另一种是用wx.page ...
微信小程序view组件官方文档 传送门 Learn 一.hover-class属性 二.hover-start-time与hover-stay-time属性 三.hover-stop-propagat ...
什么是事件? 事件是视图层到逻辑层的通讯方式. 事件可以将用户的行为反馈到逻辑层进行处理. 详解(以常见的tap点击事情为例) 模板.wxml代码: <view id="tapTest ...
1:编辑文档无法输入文字 出现这种情况一般是因为之前编辑的文档未保存,所有在其他文档输入的时候会自动输入到未保存的文档中,在文档暂时编辑完毕后要ctrl+s随手保存,不然会出现无法打字情况 2: 随时 ...
2018.3.25 这个时间我觉得更具58页面进行模仿. 微信小程序,标题更改在app.json文件中window属性. window用于设置小程序的状态栏.导航条.标题.窗口背景色.注意在app.j ...
目录: 1.router.push()&wx.navigateTo() 2.router.replace()&wx.redirectTo() 3.router.back()&w ...
描述 小程序ios new Date('2019-08-14T08:00:00.000+0000') 显示为 <Date: null>. '2019-08-14T08:00:00 ...
- html、css、js注释
HTML注释 <!--注释的内容--> CSS注释 /* 注释内容 */ JS注释 单行注释以 // 开头. 多行注释以 /* 开始,以 */ 结尾.
- java io系列14之 DataInputStream(数据输入流)的认知、源码和示例
本章介绍DataInputStream.我们先对DataInputStream有个大致认识,然后再深入学习它的源码,最后通过示例加深对它的了解. 转载请注明出处:http://www.cnblogs. ...
- 【BZOJ】【1036】树的统计
嗯这题是一道对树进行动态修改&查询的经典题目,可以拿来练习树链剖分~ 啊对于这种动态修改&查询的题目,我们最喜闻乐见的就是在一个序列上去做了,毕竟可以直接套各种数据结构模版啊,比如线段 ...
- Java并发编程--线程封闭（Ad-hoc封闭 栈封闭 ThreadLocal）
线程封闭实现好的并发是一件困难的事情,所以很多时候我们都想躲避并发.避免并发最简单的方法就是线程封闭.什么是线程封闭呢?就是把对象封装到一个线程里,只有这一个线程能看到此对象.那么这个对象就算不是线程 ...
- tomcat6.0目录和server.xml详解
Tomcat 服务器是一个免费的开放源代码的Web 应用服务器,目前最新版本是6.x,相对5.x性能提升很多,主要优化了内存使用,增强IO能力,重新构造集群功能. 近期对Tomcat6.x作深入学习, ...
- TApplication.Initialize的前世今生
---------------------------------------------------------------------------------------------------- ...
- 1.java.io包中定义了多个流类型来实现输入和输出功能，
1.java.io包中定义了多个流类型来实现输入和输出功能,可以从不同的角度对其进行分 类,按功能分为:(C),如果为读取的内容进行处理后再输出,需要使用下列哪种流?(G) A.输入流和输出流 B ...
- Hdoj 2188.悼念512汶川大地震遇难同胞——选拔志愿者 题解
Problem Description 对于四川同胞遭受的灾难,全国人民纷纷伸出援助之手,几乎每个省市都派出了大量的救援人员,这其中包括抢险救灾的武警部队,治疗和防疫的医护人员,以及进行心理疏导的心理 ...
- Hadoop基础-Hdfs各个组件的运行原理介绍
Hadoop基础-Hdfs各个组件的运行原理介绍 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.NameNode工作原理(默认端口号:50070) 1>.什么是NameN ...
- 函数和常用模块【day06】：re模块（九）
本节内容 1.简述 2.常用的正则表达式符号 3.常用匹配方法 4.常用方法 5.反斜杠的困扰 6.其他匹配模式 7.总结 一.简述 就其本质而言,正则表达式(或 RE)是一种小型的.高度专业化的编程 ...
