学习
实践
活动
专区
工具
TVP
写文章
专栏首页FE情报局别再被小程序置灰需求给坑了

别再被小程序置灰需求给坑了

让页面变灰,是个敏捷需求

作为研发的我们,自然要第一时间跟进,既然各大平台跟进速度都很快,这个对我们来说肯定简单的很领导问我多久能够搞定,我满怀期待地说,5分钟搞定为了实现对应效果,最好的办法就是借鉴

分析

百度还是很速度,整个页面已经达到我们想要的效果了

分析它具体加了哪些内容,控制台查看

其本质是加了一个big-event-gray的类,那这个类具体有哪些内容呢?

body{
  filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
  -webkit-filter:grayscale(100%);
  -moz-filter:grayscale(100%);
  -ms-filter:grayscale(100%);
  -o-filter:grayscale(100%);
  filter:grayscale(100%);
}

filter主要是给元素加上滤镜的效果,grayscale这个函数能够改变图像灰度,取值范围为0-1,0是图像没变化,1是图像或者元素完全灰度,其余的都是一些兼容方案

实施

确实是OK了,在我们自己的项目中的html上加上这个内容,发现也没有什么问题,并且很完美的上线了

领导看到了直呼高手,说不错不错,既然这么快,我们还有小程序,也给加上吧,一个小时够了吧

我心想,一个小时?太多了,10分钟就行了,1分钟改代码,4分钟上线,摸鱼5分钟

道理都一样,应该也没有什么问题,既然H5是加在了html上,同理那小程序我加在page上就行

领导们估计都要被我这迅猛的速度折服了,升职加薪指日可待

由于产品app不方便截图,以下我用demo进行实例解析

这是我们的小程序页面,想要整个颜色变灰,只需要按照我们刚才所说的方法,在app.wxss中添加如下内容即可

page {
  filter: grayscale(1);
}

直接起飞,上线,心里暗自得意,我可太优秀了

问题

让我意想不到的事情来了,群里直接炸锅了,说线上小程序有问题了。我还在想,有问题?肯定有问题,颜色不一样了呗

但是我看业务的截图,发现事情并没有我想象的那么简单,不是颜色问题,而是布局乱了,线上大bug,我的领劵的弹窗点开直接在页面中了,本来不可见的商品评价都出来了

还有优惠劵列表中有一个领劵中心的按钮,本来是吸底,现在直接在我的页面中了

当场吓得我魂都没了,二话没说赶紧回滚,才恢复正常

为什么不行

回滚完了,该找原因了。小程序从表面看这些内容确实没有问题,但是一些特殊的点都是有问题的

结合这些有问题的点,我发现在小程序中,只要使用了fixed的地方,都会出现问题

有了问题怎么办?先去社区看一下有没有答案,结果一搜,发现还真有

处理方案

那既然批量有问题,单个总没有问题吧,我们给其中的一个元素加上这段css,确实是没问题,但是这么大量的工作不可能全加,所以我看了美团小程序,发现他们也只是置灰了一部分,这确实是个解决方案

但是根本原因是因为什么呢?

我们看了fixed的mdn上的说明

❝fixed元素会被移出正常文档流,并不为元素预留空间,而是通过指定元素相对于屏幕视口(viewport)的位置来指定元素位置。元素的位置在屏幕滚动时不会改变。打印时,元素会出现在的每页的固定位置。fixed 属性会创建新的层叠上下文。当元素祖先的 transform, perspective 或 filter 属性非 none 时,容器由视口改为该祖先。 ❞

其中有个说明,当元素祖先filter属性非none时,容器由视口改为该祖先,正式因为这个,导致fixed的地位有问题,小程序里面基于page进行的定位,如果page的高度为100%,只是整个屏幕的高度,就会导致往下滚动的时候,底部的吸底往上跑

额外内容

在处理小程序长列表的时候,添加filter: grayscale(1)的时候,不要给列表的每一个item添加,这种做法是极其耗费性能的,这个时候在IOS16表现下页面会卡死不动,所以我们在设置这个属性的时候一定要注意,给到父元素

小程序中最好的解决方法是这样的,小程序里面新增了一个root-portal,在基础库2.25.2后,它能够让子树从页面中脱离出来,也就没有对应的祖先元素的影响了

总结

  1. 在网页中,最好的方案是加到HTML上对应的置灰属性
  2. 在小程序中,最好不要给全局加,要加的话也要看项目中有没有使用fixed,只给对应的元素加上
  3. 小程序中可以尝试使用root-portal视图容器
文章分享自微信公众号:
FE情报局

本文参与 腾讯云自媒体分享计划 ,欢迎热爱写作的你一起参与!

作者:FE情报局
原始发表时间:2022-12-02
如有侵权,请联系 cloudcommunity@tencent.com 删除。
登录 后参与评论
0 条评论

相关文章

  • 《攻守道》笔记(3)

    网站是企业的数字业务服务平台,钓鱼网站通过一些虚假宣传,诱导分享等手段来实现违法的目的。

    吉师散养基地
  • Go语言垃圾回收机制剖析

    垃圾回收(Garbage Collection,GC) 是Go语言的核心特性之一,是实现内存自动管理的一种形式。golang的自动垃圾回收屏蔽了复杂且容易出错的...

    windealli
  • 那些年我们踩过的坑

    有一天leader给程序员cover分配了一个需求,cover一看,需求很简单嘛,就是在页面异步拉取数据展示就OK了,于是就和cgi同事阿翔对接了一下接口...

    IMWeb前端团队
  • 漫画:什么是 HTTPS 协议?

    HTTP协议全称Hyper Text Transfer Protocol,翻译过来就是超文本传输协议,位于TCP/IP四层模型当中的应用层。

    Java3y
  • 那些年我们踩过的坑

    事件背景 有一天leader给程序员cover分配了一个需求,cover一看,需求很简单嘛,就是在页面异步拉取数据展示就OK了,于是就和cgi同事阿翔对接了一下...

    IMWeb前端团队
  • 那些年我们踩过的坑

    没有一个程序员一开始就能写出高抽象,复用性高的代码,和一世人流流长,总会爱上几个人渣一样,程序员总会遇到各式各样的坑,关键是遇到坑之后是视若无睹还是努力学习改进...

    腾讯IVWEB团队
  • 互联网金融系统——交易防重设计实战

    不单是互金系统交易时会生产此问题,凡涉及表单提交都会遇到,这里以某互金系统为例说明交易防重的过程设计。下图是交易防重设计的示图:

    MavenTalker
  • 漫画:什么是Bitmap算法?

    为满足用户标签的统计需求,小灰利用Mysql设计了如下的表结构,每一个维度的标签都对应着Mysql表的一列:

    小灰
  • SVG图线上踩坑实录

    由于svg有着可以动态缩放而不影响图片质量的特性,所以项目中只需要导入一张图片就可以代替之前的多张png图片了,可以减少apk体积。今天给大家分享一下我自己项目...

    蜻蜓队长
  • 干货 | 漫画:什么是Bitmap算法?

    AI 科技评论按,本文本文来自公众号“程序员小灰”(ID:chengxuyuanxiaohui),原载于知乎,AI 科技评论获授权转载。

    AI科技评论
  • 小程序测试之路_心得和坑儿

    解决办法 测试过程中可以将测试人员测试帐号开启开发者模式,这样就可以使用Debug模式进行测试了,如图

    用户5521279
  • 周记(5.13-5.17)

    开发后产品来找到我反馈实际体验并不好,我自己体验的时候也觉得很奇怪,后来和导师交流后发现问题其实是情感传递有问题:

    霖酱
  • 「大众点评点餐」小程序开发经验 03:事件联动

    李超,美团点评前端开发工程师,2 年 web 开发经验,现在是美团点评点餐团队的一员。

    知晓君
  • 注释,今晚我不关心代码,我只想你

    在单个函数超过一千行屎山代码和一天开发两天上线的傻X需求之前,能拯救我的只有注释。

    特立独行的分享
  • 编译原理之代码生成「建议收藏」

    前面提到了经过了词法分析->语法分析->语义分析->中间代码优化,最后的阶段便是在目标机器上运行的目标代码的生成了。目标代码生成阶段的任务是:将此前的中间代码转...

    全栈程序员站长
  • 为什么人人都要学小程序编程?

    在以前,如果你不是普通成年人(互联网人),在考虑学习编程编程的,那么可以学习的编程语言很多,我会推荐C语言。但从今天起,如果你对C语言不感兴趣,那还有个选择,就...

    老九君

作者介绍

FE情报局

顺丰同城科技高级前端研发

顺丰同城科技 · 高级前端研发 (已认证)

专栏

精选专题

活动推荐

关注

腾讯云开发者公众号
10元无门槛代金券
洞察腾讯核心技术
剖析业界实践案例
腾讯云开发者公众号二维码

扫码关注腾讯云开发者

领取腾讯云代金券