微信小程序：页面或者按钮为什么会抖一下？

其实不仅仅是小程序&＃xff0c;我们再搞前端点击按钮或者切换状态时都会出现页面“抖动”的情况。举个例子我们自己设置一些选项按钮&＃xff0c;让用户切换选择对应选项&＃xff0c;有的会发现切换这个对应的按钮会发现按钮会“抖动一下”。
之所以抖动的原因就是&＃xff0c;切换“选择”和“未选择”的两种样式&＃xff0c;文字图片位置或者大小不一致导致的&＃xff0c;前后细微的差别会给人一种抖一下的感觉&＃xff0c;而不是我们设想的仅仅换了个背景或者换个文案之类的那种平滑自然的感觉&＃xff0c;抖一下虽然幅度不大&＃xff08;大的话就不叫都懂了&＃xff09;但有的时候还是要注意调整优化&＃xff0c;毕竟是直接面对用户的交互。

&＃xff08;1&＃xff09;节点位置样式引起的
这个很好弄&＃xff0c;就是两者用差不多一样的CSS样式&＃xff0c;保证位置不会因为在切换导致变化。还有一点就是要注意加载图片有的时候会引起这种状况。还有就是选择一些有自适应的框架组件&＃xff0c;比如说小程序里面图片的image组件中的mode属性&＃xff0c;每次切换一下会计算一下适应的方位&＃xff0c;这种计算的也会导致会抖一下&＃xff0c;因为会出现这种“抖动”。

&＃xff08;2&＃xff09;boder-box引起的
我本人很喜欢boder-box这个属性&＃xff0c;因为他可以避免很多兼容性的问题&＃xff0c;就是那种一个手机一个样的尴尬情况。
他主要的作用就是让这个div或者view的boder边框和padding的距离向里面扩展。使这个div不会拉伸所在的父节点。
但是也会遇到问题&＃xff0c;就是我遇到一个“抖动“问题&＃xff0c;就是由于状态切换的两个css样式都是设置的boder-box&＃xff0c;但是一个有边框一个没有。切换的时候就会出现“抖动”&＃xff0c;因为boder会向里面“挤”&＃xff0c;还是那种东南西北都往里挤你设置的边框宽度的距离。

想了一下各种方案都不满意&＃xff0c;人家直接来了一句&＃xff0c;你设置一个透明的边框给之前那个没有边框的样式就好了。可以的&＃xff0c;完美解决&＃xff0c;前端一些问题真的需要变通&＃xff0c;要放开思路。