试了下,,,mu模拟器、安卓手机、iOS手机,基本兼容,,滑动也不卡顿。
详述App端的2种方案
使用nvue页面
app-nvue页面渲染在原生引擎下,支持sticky,不存在浏览器兼容问题,可直接使用。
本示例就是基于nvue的示例,全端可实现粘性布局。
对一个列表头设置position: sticky,并且设置距离顶部多少开始吸顶,即同时设置top值,即可实现滚动到距离顶部多少时,固定位置不再滚动。
使用x5内核渲染vue页面
app-vue是渲染在webview下的。默认使用系统webview渲染,在低端Android手机上,不支持position: sticky。
如果你的App要在Android 4.4、5.x上正常运行,则需要引入腾讯的x5浏览器内核来替代系统webview渲染vue页面
代码如下:
条件1
条件2
条件3
1
2
3
4
5
6
7
8
9
10
export default {
data() {
return {
}
},
methods: {
}
}
.full{
width: 750upx;
margin: 0;
padding: 0;
}
.sticky-box {
/* #ifndef APP-PLUS-NVUE */
display: flex;
position: -webkit-sticky;
/* #endif */
position: sticky;
top: var(--window-top);
z-index: 99;
flex-direction: row;
margin: 0px;
padding: 15px 0 15px 0;
background-color: #F4F5F6;
border-bottom-style: solid;
border-bottom-color: #E2E2E2;
}
.textcenter{
text-align: center;
font-size: 18px;
}
|