<template>
<view>
<view class="ding">顶部实现</view>
<view :class="{'st':true,'sticky-fixed':isF}">我是浮动栏</view>
<view class="xiala">文章内容</view>
</view>
</template>
<script>
export default {
data() {
return {
yuanH: uni.upx2px(300),
isF: false,
};
},
onPageScroll(e) {
//#ifdef H5
this.isF = true
// #endif
// #ifndef H5
if (this.yuanH > e.scrollTop) {
this.isF = false
} else {
this.isF = true
}
// #endif
},
};
</script>
<style lang='scss' scoped>
.ding {
height: 300rpx;
background-color: aquamarine;
}
.st {
height: 100rpx;
width: 750rpx;
background-color: #fff;
z-index: 999;
/* top: 300upx; */
}
.sticky-fixed {
/* #ifdef H5 */
position: sticky;
top: 44px;
/* #endif */
/* #ifndef H5 */
position: fixed;
top: 0;
/* #endif */
z-index: 999;
}
.xiala {
height: 2500px;
background-color: #eee;
padding-top: 100rpx;
}
</style>
uni-app吸顶功能
©著作权归作者所有,转载或内容合作请联系作者
- 文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
- 文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
- 文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
推荐阅读更多精彩内容
- 做项目的时候，请求的时候都得调用一次uni.request，而且每次都要验证返回过来的code码 === 200。...
- 介绍 3.0 项目重写了~~基于uni-app，colorUI，封装了《自定义TabBar》《上传图片》《全局自定...
- 需求: 用户可以预览当前头像, 可以从本地上传 点击图片出现操作菜单 操作菜单api预览图片api选择图片api ...
- 1.组件封装 1px.less 文件 index.vue 文件 2.页面引用 3.预览 可拖拽排序 备注：这版做的...
