研究了个方法不需要改动源码
二次封装成组件
<template>
<!-- 二次封装u-sticky 组件 初始化后就固定吸顶悬浮 -->
<u-sticky ref="topSticky" :bg-color="bgColor" :enable="false" :offset-top="offsetTop" >
<slot></slot>
</u-sticky>
</template>
<script>
export default {
props: {
// 吸顶容器到顶部某个距离的时候,进行吸顶,在H5平台,NavigationBar为44px
offsetTop: {
type: [Number, String],
default: 0
},
// 吸顶区域的背景颜色
bgColor: {
type: String,
default: '#ffffff'
},
},
name:"az-u-sticky",
data() {
return {
};
},
mounted() {
// 吸顶栏默认让它一直吸顶,不需要等到滚动条滚动再吸顶
this.$nextTick(() =>{
this.$refs.topSticky.$uGetRect('.' + this.$refs.topSticky.elClass).then((res) => {
this.$refs.topSticky.height = res.height;
this.$refs.topSticky.left = res.left;
this.$refs.topSticky.width = res.width;
})
this.$refs.topSticky.fixed = true
this.$refs.topSticky.stickyTop = this.rpxToPx(this.offsetTop)
})
},
methods: {
rpxToPx(rpx) {
const screenWidth = uni.getSystemInfoSync().screenWidth
return (screenWidth * Number.parseInt(rpx)) / 750
}
}
}
</script>
1 个回复
CrazyAz (作者) - 14届毕业的废材
研究了个方法不需要改动源码
二次封装成组件