微信小程序吸顶组件:
在移动端,页面过长时,为了提高用户体验,会使用吸顶将重要信息固定于顶部,所以封装了一个吸顶组件,方便以后使用
组件界面:
可以扫码查看是否符合自己的需求
wxml:
<!--components/stickyTop/index.wxml-->
<view class="sticky-container" style="height: {
{
containerInfo.top <= top ? (containerHeight + 'px') : 'auto' }}">
<view class="sticky-position {
{ containerInfo.top <= top ? 'position-fixed' : '' }}" style="width: {
{
containerInfo.width }}px; left: {
{
containerInfo.left }}px; top: {
{
top }}px;">
<slot></slot>
</view>
</view>
js:(由于小程序没有在组件内没有监听页面滚动的方法,所以在使用此组件时需要传页面滚动的高度,若各位大佬有更好的方法可以交流交流,小弟学习一下~)
// components/stickyTop/index.js
Component({
/**
* 组件的属性列表
*/
properties: {
scrollTop: {
type: Number,
value: