更新记录
1.0.1(2024-11-05)
下载此版本
更新说明文挡
1.0.0(2024-11-05)
下载此版本
新组件上线
平台兼容性
App |
快应用 |
微信小程序 |
支付宝小程序 |
百度小程序 |
字节小程序 |
QQ小程序 |
HBuilderX 3.1.0 |
× |
√ |
× |
× |
√ |
√ |
钉钉小程序 |
快手小程序 |
飞书小程序 |
京东小程序 |
× |
√ |
× |
× |
H5-Safari |
Android Browser |
微信浏览器(Android) |
QQ浏览器(Android) |
Chrome |
IE |
Edge |
Firefox |
PC-Safari |
× |
× |
× |
× |
× |
× |
× |
× |
× |
hbxw-sticky组件
介绍
css粘性定位组件
使用示例
<template>
<view class="container">
<view class="content content0"></view>
<hbxw-sticky>
<view class="sticky-item">粘</view>
</hbxw-sticky>
<view class="content content1"></view>
<hbxw-sticky offset-top="48rpx">
<view class="sticky-item">粘</view>
</hbxw-sticky>
<view class="content content2"></view>
</view>
</template>
<script>
export default {
data() {
return {
}
},
methods: {
}
}
</script>
<style lang="scss" scoped>
.container{
width: 100%;
height: 200vh;
position: relative;
}
.content{
width: 100%;
height: 400rpx;
}
.content0{
background-color: green;
}
.content1{
height: 200rpx;
background-color: blue;
}
.content2{
height: 200rpx;
background-color: yellow;
}
.sticky-item{
width: 48rpx;
height: 48rpx;
border-radius: 50%;
overflow: hidden;
text-align: center;
line-height: 48rpx;
color: white;
background-color: red;
}
</style>
API
Props
属性名 |
类型 |
默认值 |
必填 |
说明 |
offsetTop |
Number/String |
0 |
否 |
粘性元素top设置 |
offsetLeft |
Number/String |
0 |
否 |
粘性元素left设置 |
zIndex |
Number |
1 |
否 |
元素层级 |