微信小程序吸顶容器sticky

吸顶容器sticky

简介：用户进行页面的滚动操作,大于一定高度的时候实现吸顶，封装好了的，大家可以直接拿来用

效果图

js

Page({
  data: {
    scrollTop: 0,
    pictureUrl:'https://img-u-0.51miz.com/preview/muban/00/00/47/85/M-478536-D49BBE16.jpg-0.jpg!/quality/90/unsharp/true/compress/true/fw/840'
  },
  onChange(e) {
    console.log(e.detail, 'click right menu callback data')
  },
  /**
   * 页面滚动触发事件
   * @param {*} e 
   */
  onPageScroll(e) {
    console.log('页面滚动:',e)
    this.setData({
      scrollTop: e.scrollTop
    })
  },
  /**
   * 点击事件
   * @param {*} e 
   */
  detail(e) {
    
    wx.showToast({
      title: '详情功能尚未完善~',
      icon: "none"
    })
  }
})

.json

{
  "usingComponents": {
    "sticky": "../../components/sticky/sticky"
  }
}

wxml

（这里看起来代码多，但都只是为了能看到吸顶效果，而加的无用代码）

<view class="container">
	<view class="tips">
		<view>1、判断平台，ios可直接使用position: sticky</view>
		<view>2、对sticky-item容器进行绝对定位，底部内容部分使用外边距撑开sticky-item高度，减缓页面抖动</view>
	</view>

	<!-- 吸顶容器本月 -->
	<sticky scrollTop="{{scrollTop}}" stickyHeight="104rpx">
		<view slot="header">
			<view class="sticky-item ">
				<view class="date">本月</view>
				<view class="amount">
					<view>支出 ￥2030.88</view>
					<view>收入 ￥230.50</view>
				</view>
			</view>
		</view>

		<view slot="content">
			<!--内容 start-->
			<view class="list-view">
				<view class="list-item" hover-class="hover" hover-stay-time="150" bindtap="detail">
					<view class="content-box">
						<image src='{{pictureUrl}}' class="logo"></image>
						<view class="des-box">
							<view class="tit">朝朝盈-2019.06.03-收益发放</view>
							<view class="source">理财</view>
							<view class="time">今天 09:01</view>
						</view>
					</view>
					<view class="money add">
						+0.07
					</view>
				</view>

				<view class="list-item" hover-class="hover" hover-stay-time="150" bindtap="detail">
					<view class="content-box">
						<image src='{{pictureUrl}}' class="logo"></image>
						<view class="des-box">
							<view class="tit">扫收钱码付款-给小短腿(2019-06.04）</view>
							<view class="source">生活日用</view>
							<view class="time">今天 09:01</view>
						</view>
					</view>
					<view class="money">
						-20190604.07
					</view>
				</view>

				<view class="list-item" hover-class="hover" hover-stay-time="150" bindtap="detail">
					<view class="content-box">
						<image src='{{pictureUrl}}' class="logo"></image>
						<view class="des-box">
							<view class="tit">美团点评</view>
							<view class="source">餐饮美食</view>
							<view class="time">今天 09:01</view>
						</view>
					</view>
					<view class="money">
						-888.00
					</view>
				</view>


				<view class="list-item item-last" hover-class="hover" hover-stay-time="150" bindtap="detail">
					<view class="content-box">
						<image src='{{pictureUrl}}' class="logo"></image>
						<view class="des-box">
							<view class="tit">工资收入</view>
							<view class="source">工资</view>
							<view class="time">今天 09:01</view>
						</view>
					</view>
					<view class="money add">
						+66668666.00
					</view>
				</view>

			</view>
			<!--内容 end-->
		</view>
	</sticky>

	<!-- 吸顶容器5月 -->
	<sticky scrollTop="{{scrollTop}}" stickyHeight="104rpx">
		<view slot="header">
			<view class="sticky-item ">
				<view class="date">5月</view>
				<view class="amount">
					<view>支出 ￥130.88</view>
					<view>收入 ￥2430.50</view>
				</view>
			</view>
		</view>
		<view slot="content">
			<!--内容 start-->
			<view class="list-view">
				<view class="list-item" hover-class="hover" hover-stay-time="150" bindtap="detail">
					<view class="content-box">
						<image src='{{pictureUrl}}' class="logo"></image>
						<view class="des-box">
							<view class="tit">朝朝盈-2019.06.03-收益发放</view>
							<view class="source">理财</view>
							<view class="time">今天 09:01</view>
						</view>
					</view>
					<view class="money add">
						+0.07
					</view>
				</view>

				<view class="list-item" hover-class="hover" hover-stay-time="150" bindtap="detail">
					<view class="content-box">
						<image src='{{pictureUrl}}' class="logo"></image>
						<view class="des-box">
							<view class="tit">扫收钱码付款-给小短腿</view>
							<view class="source">生活日用</view>
							<view class="time">今天 09:01</view>
						</view>
					</view>
					<view class="money">
						-201906.07
					</view>
				</view>

				<view class="list-item" hover-class="hover" hover-stay-time="150" bindtap="detail">
					<view class="content-box">
						<image src='{{pictureUrl}}' class="logo"></image>
						<view class="des-box">
							<view class="tit">美团点评</view>
							<view class="source">餐饮美食</view>
							<view class="time">今天 09:01</view>
						</view>
					</view>
					<view class="money">
						-888.00
					</view>
				</view>


				<view class="list-item item-last" hover-class="hover" hover-stay-time="150" bindtap="detail">
					<view class="content-box">
						<image src='{{pictureUrl}}' class="logo"></image>
						<view class="des-box">
							<view class="tit">工资收入</view>
							<view class="source">工资</view>
							<view class="time">今天 09:01</view>
						</view>
					</view>
					<view class="money add">
						+66668666.00
					</view>
				</view>


				<text>疯狂的小菜鸡
5楼 2019.04.17 18:45
如果一个ViewA的visibility为INVISIBLE或者GONE，那么ViewB所有依赖它的约束条件会全部集中到这个ViewA的中心点上。如果是INVISIBLE，那么这个ViewA的margin还是有效的，如果是GONE，那么ViewA的margin全部会归为0，而ViewA的margin会影响最终ViewA的中心点的位置。

你这到底在说啥，前面是集中在中心上，后面又分别不一样了

宛丘之上兮
2019.05.10 11:10
的确是集中在中心点上，但是这个中心点受ViewA的margin的影响，而ViewA的margin又受INVISIBLE和GONE的影响，你可以自己写代码测试下，很简单的，可能我的的语言表述欠佳

榴莲小哥
4楼 2018.11.17 18:53
得到APP 全平台全部付费课（共4T）原音质音频+图文全部打包￥68，含金量超乎想象限时免费试听！点头像私信

moshimoshi
2楼 2018.01.11 08:55
不错，很清晰

宛丘之上兮
2018.01.11 19:12
谢谢

来一瓶82年LF
2018.12.26 10:24
请问这种布局如何给多个控件组合添加一个背景，比如以前我要给一个 TextView 和一个 EditText 添加一个背景，我就把这两个控件放在 LinearLayou 里面，然后给 LinearLayou 一个 background，像这种操作如何在 ConstraintLayout 里面实现呢？
        </text>


			</view>
			<!--内容 end-->
		</view>
	</sticky>



</view>

.wxss

.container {
  padding-bottom: env(safe-area-inset-bottom);
}

.tips {
  background: #fff;
  padding: 50rpx 34rpx;
  color: #555;
  font-size: 24rpx;
  line-height: 42rpx;
  position: relative;
}

.tips::before {
  content: '';
  position: absolute;
  border-top: 1rpx solid #eaeef1;
  -webkit-transform: scaleY(0.5);
  transform: scaleY(0.5);
  top: 0;
  right: 0;
  left: 0;
}

/* .sticky-container{
 position: relative;
} */

/* sticky 容器 start */

.sticky-item {
  width: 100%;
  height: 104rpx;
  padding: 20rpx 30rpx;
  background: #fafafa;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
}

/* sticky 容器 end */

.date {
  height: 54rpx;
  font-size: 28rpx;
  background: #fff;
  padding: 0 28rpx;
  border-radius: 25rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  /* box-shadow: 0 0 1rpx #7A7A7A; */
}

.date::after {
  content: '';
  position: absolute;
  height: 200%;
  width: 200%;
  border: 1rpx solid #eaeef1;
  border-radius: 60rpx;
  -webkit-transform-origin: 0 0;
  transform-origin: 0 0;
  -webkit-transform: scale(0.5);
  transform: scale(0.5);
  left: 0;
  top: 0;
}

.amount {
  text-align: right;
  color: #7a7a7a;
  font-size: 24rpx;
}

.list-view {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.list-view::after {
  content: '';
  position: absolute;
  border-top: 1rpx solid #eaeef1;
  -webkit-transform: scaleY(0.5);
  transform: scaleY(0.5);
  top: 0;
  right: 0;
  left: 0;
}

.list-item {
  width: 100%;
  padding: 30rpx 28rpx;
  box-sizing: border-box;
  background: #fff;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}

.list-item::after {
  left: 120rpx;
}

.item-last::after {
  left: 0 !important;
}

.content-box {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}

.logo {
  width: 60rpx;
  height: 60rpx;
  flex-grow: 1;
}

.des-box {
  min-height: 130rpx;
  padding-left: 28rpx;
  box-sizing: border-box;
  vertical-align: top;
  color: #333;
  font-size: 24rpx;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.tit {
  font-size: 32rpx;
  max-width: 420rpx;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.time {
  color: #888;
}

.money {
  font-size: 38rpx;
  font-weight: 500;
  color: #000;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding-left: 20rpx;
}

.add {
  color: #5677fc !important;
}

代码结构图

demo的下载地址为：https://download.csdn.net/download/wy313622821/12657204