IntersectionObserver

2020-05-14 18:41:14

IntersectionObserver 最近发现一个有趣的API,实际上这个api已经面世好几年了,但最初浏览器兼容性有限,加上此功能使用场景不频繁,且有成熟的替代方案,所以知道的人并不多。 这个接口的功能,简单来说就是:**监测页面中的某个元素的可视状态。**可以是该元素相对于整个视窗的可见性,也可以是相对于某个父元素的可见性。我们平时使用较多的场景大概有: 举个栗子: 无限加载:滑动到底部时开始加载下页 吸顶效果:在页面滑动时触发某元素的悬浮效果(如下滑到一定位置,顶栏悬浮固定) 目前我们常用的成熟方案是,监听页面/元素的scroll事件,在scroll事件中通过判断元素的位置,来进行相应的逻辑处理。或者是分别通过touchstart touchmove touchend 等触摸事件,来判断滑动方向,滑动距离,再做出相应处理。主流的一些相关功能库基本也是这样的实现原理,如iscroll.js等。 从微信小程序的一个bug说起说起 这些方案使用上并没有太明显的问题,然而最近在开发小程序时,有一个滑动吸顶的效果,需要根据滑动距离变换顶部的背景,采用的便是上述的方案,监听scroll-view的滚动事件,根据元素距离顶部的距离实时判断修改。 为了提高性能,多滚动事件采取了节流,在此过程中发现小程序的一个问题,那就是采用节流后,如果滑动过快,小程序bindscroll事件返回的组件距离顶部位置会有错误,比如我从距顶50像素迅速滑到0,

微屁恩使用指南之 —— V2Ray

2020-02-06 21:45:55

经历下架整改后重新上架,替换关键词为“微屁恩” 🌚 ====================== 分割线 ================ 2020.02.06 廊坊,大雪;陕南,雨 ;平凉,大晴。 新冠,正嚣张;强食自爱,正当时。 弱小和无知不是生存的障碍,傲慢才是。 —— 刘慈溪,《三体》 正值立春,雨雪飘零,又时下革命形式严峻,当即抄写《卜算子·咏梅》。吾辈当继承毛泽东同志坚贞不屈的革命意志,面对疫情,严阵以待,做好防护。 下文,非刁民勿入! 这些墙很有意思,刚开始你恨它,慢慢的你习惯于其中,时间久了,你发现离不开它了,这就是“体制化”。 —— 《肖生克的救赎》(The Shawshank Redemption) 一、前言 本文旨在介绍新的科学上网方式——V2Ray的使用。 从最开始GFW(Great

H5在全屏Webview中双端适配刘海屏

2019-12-10 15:45:26

背景: 最近遇到一个看似常规的H5需求,是App内嵌的一个功能模块,看样子跟往常一样重复造轮子就OK了,客户端开个Webview加载页面即可。 正常我们遇到最多的是下面这种类型: 这种的话一般是封装一个Webview包含返回+标题+分享功能,然后加载H5即可,返回即关闭Webview,标题是读取网页的Title属性,分享是调起客户端的分享弹窗。 然是这次的H5有点不寻常的东西: 导航栏除了返回键、title、右侧的操作菜单(进入另一个H5页),在title还有一个操作项❔,用于点击弹出说明框。 有一个穿透状态栏和导航栏的背景 大概长下面这样: 向上面的这种复杂页面一般是客户端做的,但是!!! 因为种种原因,最后商量用H5做。那看到这样的设计图,机智的攻城狮们一般会跟产品争论一番讨论说你这背景图做不了,只能到导航栏以下,并且你这个问号得移到其他地方bulabulabula。。。 然而作为一名专业的攻城狮,我们当然是奔着最佳的视觉感官+用户体验去的,遇到问题要克服之! 那么确定100%还原设计图后,首先想到的一个方法是和双端定义一系列协议,包括设置全屏背景图、在title后面加操作按钮(及隐藏方法,因为到其他页面就没了),在右侧加自定义的菜单,点击后可跳转其他页面。这个看着就很麻烦,涉及到一系列的交互想想就头疼,还不如直接原生写的痛快一点。和客户端你同学讨论后他们果然面露难色,在我说完第二秒就否决的这种做法,原因很简单: 1、

vue 项目在低配机器上线及优化

2019-07-25 17:58:45

背景 功能:最近帮朋友的忙,抽空用vue-cli3脚手架,开发一个网站,适配pc和mobile,两端分别有约10个页面,也就是十个路由,网站中的图片比较多,且使用了几个自定义字体,ttf文件都在2m左右。 服务器环境:本着能抠一点就抠一点的原则,购买的是阿里云ECS的入门配置,1核1G,40G硬盘,1M带宽,基本上是最低配了。(本来想用搬瓦工来着,但最近搬瓦工被封的厉害,风险比较大,可能买来用一两周就GG了。) 由于是空闲时间搞得,时间也比较急,前期没进过任何优化,直接编译完上线,发现首次全部加载完成耗时32s !分析发现原因如下: 每页加载的图片都在10~25张左右,所有的图片全部没有压缩,尺寸较大,尤其顶部banner达1~2M左右,其余大图在700~800kb之间,每页的图片加起来在5M~10M之间。 引入的自定义平方字体,使用了regular,medium,thin等几种,每种ttf字体都在2M左右,加起来字体有7、8M。 首屏加载所有路由,加载耗时。 由于服务器是1M带宽,那么每秒下行的最高速度约在120k左右,加载以上超过10M的资源,

Flutter 实战进阶

2019-03-19 16:02:25

Flutter 在实际开发中遇到的一些问题及解决方案,作为笔记记录。 1、container width、height 100% FractionallySizedBox( widthFactor: 1, heightFactor: 1, child: , ) double width = MediaQuery.of(context).size.width double height = MediaQuery.of(context).size.height 2、沉浸式背景图片 背景图片铺满Appbar及状态栏 Widget build(BuildContext context) { return new Stack( children: <Widget>[ Container( child: Image.network('https://www.bing.com/