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


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将NodeList作为Array数组处理的方法
Jul 09 Javascript
js循环改变div颜色具体方法
Jun 25 Javascript
javascript判断是否按回车键并解决浏览器之间的差异
May 13 Javascript
jquery进行数组遍历如何跳出当前的each循环
Jun 05 Javascript
Javascript基础知识(三)BOM,DOM总结
Sep 29 Javascript
基于jQuery仿淘宝产品图片放大镜特效
Oct 19 Javascript
超实用的JavaScript代码段 附使用方法
May 22 Javascript
js删除Array数组中指定元素的两种方法
Aug 03 Javascript
canvas压缩图片转换成base64格式输出文件流
Mar 09 Javascript
微信小程序自定义组件
Aug 16 Javascript
vue.js动画中的js钩子函数的实现
Jul 06 Javascript
JavaScript使用prototype原型实现的封装继承多态示例
Aug 31 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实现的XML操作(读取)封装类完整实例
2017/02/23 PHP
PHP正则验证字符串是否为数字的两种方法并附常用正则
2019/02/27 PHP
jQuery function的正确书写方法
2013/08/02 Javascript
通过pjax实现无刷新翻页(兼容新版jquery)
2014/01/31 Javascript
jquery查找tr td 示例模拟
2014/05/08 Javascript
深入理解Javascript中this的作用域
2014/08/12 Javascript
基于jQuery实现响应式圆形图片轮播特效
2015/11/25 Javascript
bootstrap下拉列表与输入框组结合的样式调整
2016/10/08 Javascript
jQuery Validate表单验证插件的基本使用方法及功能拓展
2017/01/04 Javascript
JS继承与闭包及JS实现继承的三种方式
2017/10/15 Javascript
使用Angular CLI生成 Angular 5项目教程详解
2018/03/18 Javascript
利用js实现前后台传送Json的示例代码
2018/03/29 Javascript
vue单页应用在页面刷新时保留状态数据的方法
2018/09/21 Javascript
ajax与jsonp的区别及用法
2018/10/16 Javascript
微信小程序提取公用函数到util.js及使用方法示例
2019/01/10 Javascript
Vue computed 计算属性代码实例
2020/04/22 Javascript
[03:54]Ehome出征西雅图 回顾2016国际邀请赛晋级之路
2016/08/02 DOTA
在Python中操作列表之List.pop()方法的使用
2015/05/21 Python
Python 实现网页自动截图的示例讲解
2018/05/17 Python
TensorFlow数据输入的方法示例
2018/06/19 Python
基于python3 的百度图片下载器的实现代码
2019/11/05 Python
使用python实现回文数的四种方法小结
2019/11/24 Python
Python 一行代码能实现丧心病狂的功能
2020/01/18 Python
python GUI库图形界面开发之PyQt5控件QTableWidget详细使用方法与属性
2020/02/25 Python
用python进行视频剪辑
2020/11/02 Python
HTML5 通信API 跨域门槛将不再高、数据推送也不再是梦
2013/04/25 HTML / CSS
HTML5 的新的表单元素(datalist/keygen/output)使用介绍
2013/07/19 HTML / CSS
质量月活动策划方案
2014/03/10 职场文书
青年文明号创建承诺
2014/03/31 职场文书
政治学专业毕业生求职信
2014/08/11 职场文书
民主生活会剖析材料
2014/09/30 职场文书
领导干部作风建设自查报告
2014/10/23 职场文书
学生上课迟到检讨书
2015/01/01 职场文书
2015年高中语文教学总结
2015/08/18 职场文书
历史名人教你十五个读书方法,赶快Get起来!
2019/07/18 职场文书
Python基础之变量的相关知识总结
2021/06/23 Python