uniapp可输入的下拉列表_uni-app 实现置顶悬浮框功能

论坛 期权论坛 编程之家     
选择匿名的用户   2021-6-2 16:02   1425   0

试了下,,,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;

}

分享到 :
0 人收藏
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

积分:3875789
帖子:775174
精华:0
期权论坛 期权论坛
发布
内容

下载期权论坛手机APP