首页 >> js开发 >> js微信小程序实现列表滚动头部吸顶的示例代码js大全

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

发布时间: 2021年1月13日 | 浏览: | 分类:js开发

本文介绍了小程序头部吸顶的实现代码示例，分享给大家，也给自己留个笔记demo 地址: https://github.com/iotjin/Jh_weapphttps://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;
}
.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": "2021-11-11 15:38:16",

"AB_FenLei": "支出",

},{

"AB_LeiBie": "吃饭1",

"AB_Money": "22",

"AB_Remark": "备注2",

"AB_Date": "2021-11-11 15:38:16",

"AB_FenLei": "支出",

},{

"AB_LeiBie": "红包1",

"AB_Money": "33",

"AB_Remark": "备注33",

"AB_Date": "2021-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": "2021-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": "2021-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": "2021-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": "2021-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": "2021-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": "2021-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": "2021-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": "2021-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": "2021-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": "2021-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": "2021-11-11 15:38:16",

"AB_FenLei": "支出",

}]

},

]

},
onShow: function () {
},
onPageScroll: function (res) {

console.log(res.scrollTop);
}

})
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": "2021-11-11 15:38:16",

"AB_FenLei": "支出",

},{

"AB_LeiBie": "吃饭1",

"AB_Money": "22",

"AB_Remark": "备注2",

"AB_Date": "2021-11-11 15:38:16",

"AB_FenLei": "支出",

},{

"AB_LeiBie": "红包1",

"AB_Money": "33",

"AB_Remark": "备注33",

"AB_Date": "2021-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": "2021-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": "2021-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": "2021-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": "2021-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": "2021-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": "2021-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": "2021-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": "2021-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": "2021-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": "2021-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": "2021-11-11 15:38:16",

"AB_FenLei": "支出",

}]

},

]

},
onShow: function () {
},
onPageScroll: function (res) {

console.log(res.scrollTop);
}

})wxml 代码：

{{item.AB_LeiBie}} · {{item.AB_Remark}}

{{item.AB_LeiBie}}

{{item.AB_Money}}

{{item.AB_LeiBie}} · {{item.AB_Remark}}

{{item.AB_LeiBie}}

{{item.AB_Money}}

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;
}
.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;
}

原文地址：http://www.chinasgp.cn/article/4143.html

上一条：« js如何在vue中使用百度地图添加自定义覆盖物（水波纹）js大全

下一条：js正则{2,6},js正则表达式 »

标签:

小程序 js 微信微信小程序

js微信小程序实现列表滚动头部吸顶的示例代码js大全-js开发