微信小程序实现列表滚动头部吸顶的示例代码


Posted in Javascript onJuly 12, 2020

本文介绍了小程序头部吸顶的实现代码示例,分享给大家,也给自己留个笔记

demo 地址: https://github.com/iotjin/Jh_weapp

效果图:

微信小程序实现列表滚动头部吸顶的示例代码

吸顶主要是 position: sticky;

.header {
 background: rgb(230, 230, 230);
 height: 25px;
 line-height: 25px;
 padding-left: 30rpx;
 font-size: 13px;
 align-items: center;
 position: sticky;
 top: 0;
}

js 代码:

Page({
 data: {
  dataArr: [{
    "AB_MonthDay": "30/06",
    "AB_ZhiChu": "1111",
    "AB_ShouRu": "2222",
    "AB_Bill": [{
     "AB_LeiBie": "吃饭1",
     "AB_Money": "11",
     "AB_Remark": "备注",
     "AB_Date": "2011-11-11 15:38:16",
     "AB_FenLei": "支出",
    },{
     "AB_LeiBie": "吃饭1",
     "AB_Money": "22",
     "AB_Remark": "备注2",
     "AB_Date": "2011-11-11 15:38:16",
     "AB_FenLei": "支出",
    },{
     "AB_LeiBie": "红包1",
     "AB_Money": "33",
     "AB_Remark": "备注33",
     "AB_Date": "2011-11-11 15:38:16",
     "AB_FenLei": "收入",
    },
   ]
   },
   {
    "AB_MonthDay": "29/06",
    "AB_ZhiChu": "1111",
    "AB_ShouRu": "2222",
    "AB_Bill": [{
     "AB_LeiBie": "吃饭2",
     "AB_Money": "22",
     "AB_Remark": "",
     "AB_Date": "2011-11-11 15:38:16",
     "AB_FenLei": "支出",
    }]
   },
   {
    "AB_MonthDay": "28/06",
    "AB_ZhiChu": "1111",
    "AB_ShouRu": "2222",
    "AB_Bill": [{
     "AB_LeiBie": "吃饭3",
     "AB_Money": "33",
     "AB_Remark": "",
     "AB_Date": "2011-11-11 15:38:16",
     "AB_FenLei": "支出",
    }]
   },
   {
    "AB_MonthDay": "27/06",
    "AB_ZhiChu": "1111",
    "AB_ShouRu": "2222",
    "AB_Bill": [{
     "AB_LeiBie": "吃饭4",
     "AB_Money": "44",
     "AB_Remark": "",
     "AB_Date": "2011-11-11 15:38:16",
     "AB_FenLei": "支出",
    }]
   },
   {
    "AB_MonthDay": "26/06",
    "AB_ZhiChu": "1111",
    "AB_ShouRu": "2222",
    "AB_Bill": [{
     "AB_LeiBie": "吃饭4",
     "AB_Money": "44",
     "AB_Remark": "",
     "AB_Date": "2011-11-11 15:38:16",
     "AB_FenLei": "支出",
    }]
   },
   {
    "AB_MonthDay": "25/06",
    "AB_ZhiChu": "1111",
    "AB_ShouRu": "2222",
    "AB_Bill": [{
     "AB_LeiBie": "吃饭4",
     "AB_Money": "44",
     "AB_Remark": "",
     "AB_Date": "2011-11-11 15:38:16",
     "AB_FenLei": "支出",
    }]
   },
   {
    "AB_MonthDay": "24/06",
    "AB_ZhiChu": "1111",
    "AB_ShouRu": "2222",
    "AB_Bill": [{
     "AB_LeiBie": "吃饭4",
     "AB_Money": "44",
     "AB_Remark": "",
     "AB_Date": "2011-11-11 15:38:16",
     "AB_FenLei": "支出",
    }]
   },
   {
    "AB_MonthDay": "23/06",
    "AB_ZhiChu": "1111",
    "AB_ShouRu": "2222",
    "AB_Bill": [{
     "AB_LeiBie": "吃饭4",
     "AB_Money": "44",
     "AB_Remark": "",
     "AB_Date": "2011-11-11 15:38:16",
     "AB_FenLei": "支出",
    }]
   },
   {
    "AB_MonthDay": "22/06",
    "AB_ZhiChu": "1111",
    "AB_ShouRu": "2222",
    "AB_Bill": [{
     "AB_LeiBie": "吃饭4",
     "AB_Money": "44",
     "AB_Remark": "",
     "AB_Date": "2011-11-11 15:38:16",
     "AB_FenLei": "支出",
    }]
   },
   {
    "AB_MonthDay": "21/06",
    "AB_ZhiChu": "1111",
    "AB_ShouRu": "2222",
    "AB_Bill": [{
     "AB_LeiBie": "吃饭4",
     "AB_Money": "44",
     "AB_Remark": "",
     "AB_Date": "2011-11-11 15:38:16",
     "AB_FenLei": "支出",
    }]
   },
   {
    "AB_MonthDay": "20/06",
    "AB_ZhiChu": "1111",
    "AB_ShouRu": "2222",
    "AB_Bill": [{
     "AB_LeiBie": "吃饭4",
     "AB_Money": "44",
     "AB_Remark": "",
     "AB_Date": "2011-11-11 15:38:16",
     "AB_FenLei": "支出",
    }]
   },
   {
    "AB_MonthDay": "19/06",
    "AB_ZhiChu": "1111",
    "AB_ShouRu": "2222",
    "AB_Bill": [{
     "AB_LeiBie": "吃饭4",
     "AB_Money": "44",
     "AB_Remark": "",
     "AB_Date": "2011-11-11 15:38:16",
     "AB_FenLei": "支出",
    }]
   },
  ]

 },
 onShow: function () {
 },
 onPageScroll: function (res) {
  console.log(res.scrollTop);
 }

})

wxml 代码:

<view class="main-bg">
	<view wx:for="{{dataArr}}" wx:key="index" class="section">
		<view class="header"> {{item.AB_MonthDay}}</view>
		<view wx:for="{{item.AB_Bill}}" wx:key="index" class="cell">
    <view class="row1">
     <view wx:if="{{item.AB_Remark}}" class="leibie">{{item.AB_LeiBie}} · {{item.AB_Remark}}</view>
     <view wx:else="{{!item.AB_Remark}}" class="leibie">{{item.AB_LeiBie}}</view>
     <view class='{{item.AB_FenLei=="收入"?"money2":"money"}}'>{{item.AB_Money}}</view>
    </view>
		</view>
	</view>
</view>

wxss 代码:

.header {
 background: rgb(230, 230, 230);
 height: 25px;
 line-height: 25px;
 padding-left: 30rpx;
 font-size: 13px;
 align-items: center;
 position: sticky;
 top: 0;
}

.cell {
 background: white;
 height: 44px;
 align-items: center;
 line-height: 44px;
 border-bottom: 1px solid rgb(230, 230, 230);
}

.row1 {
 margin-left: 30rpx;
 display: flex;
 justify-content: space-between;
}
.leibie {
 width: 70%;
 font-size: 30rpx;
 color: black;
 text-overflow: ellipsis;
 white-space: nowrap;
 overflow: hidden;
}
.money {
 font-size: 32rpx;
 color: black;
 font-weight: bold;
 margin-right: 30rpx;
}

.money2 {
 font-size: 32rpx;
 color: #38BC9D;
 font-weight: bold;
 margin-right: 30rpx;
}

到此这篇关于微信小程序实现列表滚动头部吸顶的示例代码的文章就介绍到这了,更多相关小程序列表滚动头部吸顶内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
javascript this用法小结
Dec 19 Javascript
javascript getElementsByName()的用法说明
Jul 31 Javascript
JavaScript类和继承 constructor属性
Mar 04 Javascript
jquery中dom操作和事件的实例学习 下拉框应用
Dec 01 Javascript
jQuery回车实现登录简单实现
Aug 20 Javascript
使用jQuery实现Web页面换肤功能的要点解析
May 12 Javascript
js方法数据验证的简单实例
Sep 17 Javascript
vue如何使用 Slot 分发内容实例详解
Sep 05 Javascript
浅谈React高阶组件
Mar 28 Javascript
详解基于 Node.js 的轻量级云函数功能实现
Jul 08 Javascript
JS+DIV实现拖动效果
Feb 11 Javascript
基于Vue中的父子传值问题解决
Jul 27 Javascript
Js on及addEventListener原理用法区别解析
Jul 11 #Javascript
JS call()及apply()方法使用实例汇总
Jul 11 #Javascript
JS如何定义用字符串拼接的变量
Jul 11 #Javascript
基于原生js实现判断元素是否有指定class名
Jul 11 #Javascript
详解在IDEA中将Echarts引入web两种方式(使用js文件和maven的依赖导入)
Jul 11 #Javascript
详解element-ui 表单校验 Rules 配置 常用黑科技
Jul 11 #Javascript
uniapp,微信小程序中使用 MQTT的问题
Jul 11 #Javascript
You might like
PHP静态类
2006/11/25 PHP
php adodb连接mssql解决乱码问题
2009/06/12 PHP
Linux系统下php获得系统分区信息的方法
2015/03/30 PHP
PHP array_key_exists检查键名或索引是否存在于数组中的实现方法
2016/06/13 PHP
PHP实现单文件、多个单文件、多文件上传函数的封装示例
2019/09/02 PHP
捕获关闭窗口的脚本
2009/01/10 Javascript
js/jQuery对象互转(快速操作dom元素)
2013/02/04 Javascript
利用JS解决ie6不支持max-width,max-height问题的方法
2014/01/02 Javascript
JS实现网页上随机产生超链接地址的方法
2015/11/09 Javascript
详解获取jq ul第一个li定位的四种解决方案
2016/11/23 Javascript
BootStrap实现带关闭按钮功能
2017/02/15 Javascript
vue二级菜单导航点击选中事件的方法
2018/09/12 Javascript
Vue函数式组件的应用实例详解
2019/08/30 Javascript
javascript实现弹出层效果
2019/12/10 Javascript
html-webpack-plugin修改页面的title的方法
2020/06/18 Javascript
详细讲解Python中的文件I/O操作
2015/05/24 Python
利用python实现数据分析
2017/01/11 Python
Python中用post、get方式提交数据的方法示例
2017/09/22 Python
在Django中URL正则表达式匹配的方法
2018/12/20 Python
ORM Django 终端打印 SQL 语句实现解析
2019/08/09 Python
python函数装饰器之带参数的函数和带参数的装饰器用法示例
2019/11/06 Python
python 利用turtle库绘制笑脸和哭脸的例子
2019/11/23 Python
python+requests实现接口测试的完整步骤
2020/10/27 Python
你的自行车健身专家:FaFit24
2016/11/16 全球购物
印尼值得信赖的在线交易网站:Bukalapak
2019/03/11 全球购物
英国时尚配饰、珠宝和服装网站:KJ Beckett
2020/01/23 全球购物
MVC的各个部分都有那些技术来实现?如何实现?
2016/04/21 面试题
土木工程专业个人求职信
2013/12/30 职场文书
日本语毕业生自荐信
2014/02/01 职场文书
中等生评语大全
2014/05/04 职场文书
永远跟党走演讲稿
2014/09/12 职场文书
2014年庆祝国庆65周年演讲稿
2014/09/21 职场文书
2016高考感言
2015/08/01 职场文书
初中军训感想
2015/08/07 职场文书
2016年优秀团员事迹材料
2016/02/25 职场文书
Android Flutter实现3D动画效果示例详解
2022/04/07 Java/Android