- 在QQ内置浏览器上,一个大致如下布局的页面:
<ul>
<li><a href="/a">商品a</a></li>
<li><a href="/b">商品b</a></li>
<li><a href="/c">商品c</a></li>
<li><a href="/d">商品d</a></li>
<li><a href="/e">商品e</a></li>
<!-- more ...-->
</ul>
上下滑动页面过程中,极易误点入商品的链接中。
猜测原因为:QQ内置浏览器对于click事件的触发判断时间存在问题,导致用户在滑动过程中误触发了click事件。
解决方案:使用模拟的tap事件。Hammer.JS fastclick
2.依然是在QQ内置浏览器上,一个如下布局的页面:
<body>
<h1>商品展示</h1>
<ul>
<li><a href="/a">商品a</a></li>
<li><a href="/b">商品b</a></li>
<li><a href="/c">商品c</a></li>
<li><a href="/d">商品d</a></li>
<li><a href="/e">商品e</a></li>
<!-- more ... -->
</ul>
</body>
*{
margin:0;
padding:0;
}
html,body{
height:100%
}
h1{
height:10%;
}
ul{
height:90%;
list-style:none;
overflow:hidden auto;
}
说人话就是:页面的高度刚好100%,所以,页面的纵向滚动条不会出现,上部的h1与下部的ul高度都固定,加起来刚好是100%,然后,ul在子元素多的情况下会出现纵向滚动条。
那么问题来了:ul区域内,上滑页面是没问题的,但是,下滑大概率会触发QQ内置浏览器原生的下拉事件,导致ul滚动失效,浏览器整体被拉下来了。
猜测原因为:用户不断上滑后的首次下滑,浏览器内部会检测整个网页区域是否可滑动,没有的话便会触发原生的事件,导致ul的滚动事件失效
解决方案:在ul之后再加一个元素,高度为1px,使得浏览器刚好出现原生滚动条,但又不影响页面的整体效果
3.用户名片展示简介,前后都需要双引号图片包裹,最多显示三行,超出的话末尾显示省略号,依然还是需要反引号图片,效果如图:
多行文本超出显示省略号,是比较容易的,纯CSS就可以实现:
word-break: break-all;
overflow:hidden;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
那个反引号的显示就需要花点心思了,毕竟我们无法知道文本到底显示了几行,也无法知道文本是否已经到了结尾。
解决思路:三行文本区域高度自适应,设置为相对定位,然后在文本末尾放置一个span
标签,背景设置为反引号图片,定位设置为绝对定位,不要设置定位值,然后通过js判断span
的bottom
值,正常情况,若bottom
值为0,说明文本未超出显示区域,若bottom
值小于0,说明文本被挤下去了,这时,手动给span
设置right
为0,bottom
为0,就达成目的了。
看到一个大牛的实现,脑洞很大啊。
4.safari回退的时候白屏(Vue)
原因未知,反馈该类问题的很多vue#5533、mint-ui#937 ,都没有给出问题的根源。
临时解决方案:
①fetch到数据后调用:
Vue.nextTick().then(() => {
window.scrollTo(0, 1);
window.scrollTo(0, 0);
});
②利用vue-router
const router = new VueRouter({
routes: [],
scrollBehavior () {
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve({ x: 0, y: 1 });
}, 0);
})
}
})
③改变布局方式
参考vue#7229