出门莫恨无人随,书中车马多如簇。这篇文章主要讲述uni-app 实现置顶悬浮框功能相关的知识,希望能为你提供帮助。
试了下,,,mu模拟器、安卓手机、ios手机,基本兼容,,滑动也不卡顿。
第三方插件地址
详述App端的2种方案
- 使用nvue页面
【uni-app 实现置顶悬浮框功能】本示例就是基于nvue的示例,全端可实现粘性布局。
对一个列表头设置position: sticky,并且设置距离顶部多少开始吸顶,即同时设置top值,即可实现滚动到距离顶部多少时,固定位置不再滚动。
- 使用x5内核渲染vue页面
app-vue是渲染在webview下的。默认使用系统webview渲染,在低端android手机上,不支持position: sticky。
代码如下:
<
template>
<
view class="
full"
>
<
view class="
full"
>
<
image src=https://www.songbingjia.com/android/"
/static/shuijiao.jpg"
style="
width: 750upx;
height: 200px;
"
>
<
/image>
<
!-- 注意这里图片的高度,必须是偶数。否则在H5端的部分chrome版本上会触发chrome的bug,在标题栏下方会留下一条线的空隙 -->
<
/view>
<
view class="
sticky-box"
>
<
view style="
width: 250upx;
text-align: center;
"
>
<
text class="
textcenter"
>
条件1<
/text>
<
/view>
<
view style="
width: 250upx;
text-align: center;
"
>
<
text class="
textcenter"
>
条件2<
/text>
<
/view>
<
view style="
width: 250upx;
text-align: center;
"
>
<
text class="
textcenter"
>
条件3<
/text>
<
/view>
<
/view>
<
view>
<
text style="
line-height: 90px;
"
class="
textcenter"
>
1
2
3
4
5
6
7
8
9
10
<
/text>
<
/view>
<
/view>
<
/template>
<
script>
export default {
data() {
return {}
},
methods: {}
}
<
/script>
<
style>
.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;
}
<
/style>
推荐阅读
- Fiddler Android APP 抓包
- formData使用append追加key/value后console为空的问题(已解决)
- Scala try-catch异常处理用法
- Scala Throw关键字用法示例
- Scala线程方法使用例子和解释
- Scala创建线程和用法示例
- Scala字符串方法使用实例
- Scala Stream用法示例
- Scala字符串插值实例详解