JavaSE 整数转换 SCI 哨兵模式 qt variables import cassandra upload Animsition 外卖系统源码 jq遍历元素 ajax的get请求 hadoop特点 鼠标失去焦点事件 pip环境变量配置 pyhton中异常和模块 pythonfor循环 python创建数据库 python环境变量 python设置环境变量 java基础语言 java基础代码 java集合图 java注释规范 java配置文件 linux如何安装 服务器操作系统下载 网站数据分析工具 全英雄守城战 凤凰刷机 gunzip 修改ip地址软件 php随机数函数 大数据之路 ip地址切换器 海蜘蛛软路由 qq制作网页 搜狐影音播放器 思源黑体
当前位置: 首页 > 学习教程  > 编程语言

微信小程序吸顶容器sticky

2020/7/24 10:30:36 文章标签:

吸顶容器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>疯狂的小菜鸡
52019.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的影响,你可以自己写代码测试下,很简单的,可能我的的语言表述欠佳

榴莲小哥
42018.11.17 18:53
得到APP 全平台全部付费课(共4T)原音质音频+图文全部打包¥68,含金量超乎想象限时免费试听!点头像私信

moshimoshi
22018.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的下载地址为:


本文链接: http://www.dtmao.cc/news_show_50307.shtml

附件下载

相关教程

    暂无相关的数据...

共有条评论 网友评论

验证码: 看不清楚?