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


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 相关文章推荐
JSDoc 介绍使用规范JsDoc的使用介绍
Feb 12 Javascript
asp.net 30分钟掌握无刷新 Repeater
Sep 16 Javascript
Jquery为单选框checkbox绑定单击click事件
Dec 18 Javascript
JS不间断向上滚动效果代码
Dec 25 Javascript
jquery中get,post和ajax方法的使用小结
Feb 04 Javascript
AngularJS基础 ng-include 指令简单示例
Aug 01 Javascript
JavaScript上传文件时不用刷新页面方法总结(推荐)
Aug 15 Javascript
vue 数组和对象不能直接赋值情况和解决方法(推荐)
Oct 25 Javascript
koa+mongoose实现简单增删改查接口的示例代码
May 13 Javascript
微信小程序中如何计算距离某个节日还有多少天
Jul 15 Javascript
js实现图片区域可点击大小随意改变(适用移动端)代码实例
Sep 11 Javascript
JavaScript实现10秒后再次获取验证码
Dec 02 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
谈一谈收音机的高放电路
2021/03/02 无线电
php smarty的预保留变量总结
2008/12/04 PHP
php设计模式 Prototype (原型模式)代码
2011/06/26 PHP
在Laravel中使用DataTables插件的方法
2018/05/29 PHP
PHP执行系统命令函数实例讲解
2021/03/03 PHP
使用Javascript接收get传递的值的代码
2011/11/30 Javascript
js bind 函数 使用闭包保存执行上下文
2011/12/26 Javascript
javascript动画浅析
2012/08/30 Javascript
JavaScript控制各种浏览器全屏模式的方法、属性和事件介绍
2014/04/03 Javascript
JavaScript汉诺塔问题解决方法
2015/04/21 Javascript
javascript连续赋值问题
2015/07/08 Javascript
jQuery文件上传控件 Uploadify 详解
2016/06/20 Javascript
javascript判断firebug是否开启的方法
2016/11/23 Javascript
js document.getElementsByClassName的使用介绍与自定义函数
2016/11/25 Javascript
Agularjs妙用双向数据绑定实现手风琴效果
2017/05/26 Javascript
ES6学习教程之Map的常用方法总结
2017/08/03 Javascript
使用vuex缓存数据并优化自己的vuex-cache
2018/05/30 Javascript
element ui 表格动态列显示空白bug 修复方法
2018/09/04 Javascript
使用mixins实现elementUI表单全局验证的解决方法
2019/04/02 Javascript
原生js实现自定义消息提示框
2020/11/19 Javascript
[01:11:10]2014 DOTA2华西杯精英邀请赛 5 24 iG VS VG加赛
2014/05/26 DOTA
python常用函数详解
2016/09/13 Python
Python使用装饰器模拟用户登陆验证功能示例
2018/08/24 Python
Python文本处理简单易懂方法解析
2019/12/19 Python
Python 过滤错误log并导出的实例
2019/12/26 Python
python如何将两张图片生成为全景图片
2020/03/05 Python
中国最大的名表商城:万表网
2016/08/29 全球购物
园长自我鉴定
2013/10/06 职场文书
艺术爱好者的自我评价分享
2013/10/08 职场文书
销售工作人员的自我评价分享
2013/11/10 职场文书
物业管理员岗位职责范文
2013/11/25 职场文书
开业庆典主持词
2014/03/21 职场文书
三峡导游词
2015/01/31 职场文书
2015年超市工作总结范文
2015/05/26 职场文书
《杜鹃的婚约》OP主题曲「凸凹」无字幕影像公开
2022/04/08 日漫
vue 数字翻牌器动态加载数据
2022/04/20 Vue.js