微信小程序引用WeUI组件实现吸顶功能

最新推荐文章于 2024-02-03 18:04:36 发布

原创

最新推荐文章于 2024-02-03 18:04:36 发布 · 1.9k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#小程序

本文详细介绍了如何在小程序中实现页面顶部标题的吸顶效果，通过使用weui组件中的sticky扩展组件，解决了页面滚动时标题固定的问题，并分享了代码引入时的注意事项。

功能提及

吸顶功能
在这里插入图片描述

当页面上拉滚动时，顶部标题吸附在头部。

实现的方式，在这边的话，我是引用的weui组件中的sticky这个扩展组件，其实也可以根据其他方式，主要的核心思想就是当页面滚动到一定距离让其对应标题变成position中的fixed这个属性，实现吸顶的这样一个目的，
在这里插入图片描述
跳转：小程序Sticky组件
当然因为是扩展组件，如果我们直接使用小程序内置的方式去引入的话，会出现一些问题所以我在这里的话是直接在示例代码中拉取的sticky组件的代码，这样直接拉取到项目下引入这个组件就可以避开这个问题。
在这里插入图片描述
不过在我们代码引入时，会报一个如下的错误

问题的话应该就是引入的时机出现了问题，导致组件没有引入进来，我们这个时候需要给组件导出的时候，加入一个定时器

这样就会解决
上代码

<!-- 小程序页面样式 -->
<view>
	<!-- 吸顶组件 -->
	<view class="content">
		<mp-sticky z-index='0'>
			<view class="title-header">
				<view class="year-month">2020年08月</view>
				<text class="small-text">收入:200000礼币</text><text class="small-text">支付:8000礼币</text>
			</view>
		</mp-sticky>
		<!-- 下方样式 -->
		<view class="list-flex">
			<image class="qiandai" src="/images/shangjia/user.png"></image>
			<view class="gift-zhong">
				<view class="phone">{
  
  {18621729191}}</view>
				<view class="phone-small">申请礼币:<text style="color:#F83C49;font-size:40rpx">{
  
  {1000 }}</text> {
  
  { '08-11 11:42'}} </view>
			</view>
			<view class="gift-right">
				<view class="money">-{
  
  {2000}}</view>
				<view class="money-text">已同意</view>
			</view>
		</view>
		<view class="list-flex">
			<image class=