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


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 相关文章推荐
WordPress 照片lightbox效果的运用几点
Jun 22 Javascript
玩转方法:call和apply
May 08 Javascript
jquery实现Ctrl+Enter提交表单的方法
Jul 21 Javascript
基于jQuery实现的扇形定时器附源码下载
Oct 20 Javascript
学习JavaScript正则表达式
Nov 13 Javascript
BootStrap框架个人总结(bootstrap框架、导航条、下拉菜单、轮播广告carousel、栅格系统布局、标签页tabs、模态框、菜单定位)
Dec 01 Javascript
Bootstrap基本样式学习笔记之图片(6)
Dec 07 Javascript
Websocket协议详解及简单实例代码
Dec 12 Javascript
浅谈$_FILES数组为空的原因
Feb 16 Javascript
vue发送ajax请求详解
Oct 09 Javascript
微信小程序全局变量GLOBALDATA的定义和调用过程解析
Sep 23 Javascript
Vue.js自定义指令学习使用详解
Oct 19 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
单位速度在实战中的运用
2020/03/04 星际争霸
php实现ping
2006/10/09 PHP
php中mysql操作buffer用法详解
2015/03/19 PHP
PHP正则表达式之捕获组与非捕获组
2015/11/06 PHP
PHP5.2中PDO的简单使用方法
2016/03/25 PHP
php获取微信共享收货地址的方法
2017/12/21 PHP
Javascript MD4
2006/12/20 Javascript
javascript 变量作用域 代码分析
2009/06/26 Javascript
div移动 输入框不能输入的问题
2009/11/19 Javascript
javascript获得网页窗口实际大小的示例代码
2013/09/21 Javascript
jQuery延迟加载图片插件Lazy Load使用指南
2015/03/25 Javascript
Angularjs制作简单的路由功能demo
2015/04/14 Javascript
Jquery+Ajax+PHP+MySQL实现分类列表管理(下)
2015/10/28 Javascript
jQuery 1.9.1源码分析系列(十四)之常用jQuery工具
2015/12/02 Javascript
JavaScript的instanceof运算符学习教程
2016/06/08 Javascript
JS识别浏览器类型(电脑浏览器和手机浏览器)
2016/11/18 Javascript
js 单引号替换成双引号,双引号替换成单引号的实现方法
2017/02/16 Javascript
一道面试题引发的对javascript类型转换的思考
2017/03/06 Javascript
微信小程序中使用Promise进行异步流程处理的实例详解
2017/08/17 Javascript
Vue中引入样式文件的方法
2017/08/18 Javascript
vue 引入公共css文件的简单方法(推荐)
2018/01/20 Javascript
layer插件select选中默认值的方法
2018/08/14 Javascript
jQuery事件blur()方法的使用实例讲解
2019/03/30 jQuery
angular 实现同步验证器跨字段验证的方法
2019/04/11 Javascript
Vue.js+cube-ui(Scroll组件)实现类似头条效果的横向滚动导航条
2019/06/24 Javascript
vue简单练习 桌面时钟的实现代码实例
2019/09/19 Javascript
JavaScript实现通讯录功能
2020/12/27 Javascript
用xpath获取指定标签下的所有text的实例
2019/01/02 Python
关于前端上传文件全面基础扫盲贴(入门)
2019/08/01 HTML / CSS
HTML5 Canvas之测试浏览器是否支持Canvas的方法
2015/01/01 HTML / CSS
OPPO手机官方商城:中国手机市场出货量第一品牌
2017/10/18 全球购物
加拿大约会网站:EliteSingles.ca
2018/01/12 全球购物
汉森冲浪板:Hansen Surfboards
2018/05/19 全球购物
在校大学生的职业生涯规划书
2014/03/14 职场文书
幼儿园新年寄语
2014/04/03 职场文书
python 单机五子棋对战游戏
2022/04/28 Python