本文实例为大家分享了小程序实现吸顶功能的具体代码，供大家参考，具体内容如下
//如图所示----这里用了自定义组件实现了小程序吸顶功能
//WXML








第一层





{{item.name}}









第二层





{{item.name}}









第三层





{{item.name}}











最后





{{index+1}}







//如图所示----这里用了自定义组件实现了小程序吸顶功能
//WXML








第一层





{{item.name}}









第二层





{{item.name}}









第三层





{{item.name}}











最后





{{index+1}}







//json
{
"navigationBarTitleText":"吸顶",
"usingComponents": {

"i-sticky": "../../compont/sticky/index",

"i-sticky-item": "../../compont/sticky-item/index"
}
}
//json
{
"navigationBarTitleText":"吸顶",
"usingComponents": {

"i-sticky": "../../compont/sticky/index",

"i-sticky-item": "../../compont/sticky-item/index"
}
}
//JS
Page({
data: {

scrollTop: 0,

one: [{

name: "第一层"

}, {

name: "第一层"

}, {

name: "第一层"

}, {

name: "第一层"

}, {

name: "第一层"

}, {

name: "第一层"

}, {

name: "第一层"

}],

two: [{

name: "第二层"

}, {

name: "第二层"

}, {

name: "第二层"

}, {

name: "第二层"

}, {

name: "第二层"

}, {

name: "第二层"

}, {

name: "第二层"

}, {

name: "第二层"

}],

three: [{

name: "第三层"

}, {

name: "第三层"

}, {

name: "第三层"

}, {

name: "第三层"

}, {

name: "第三层"

}, {

name: "第三层"

}, {

name: "第三层"

}, {

name: "第三层"

}],
},
onChange(event) {

console.log(event.detail, 'click right menu callback data')
},
//页面滚动执行方式
onPageScroll(event) {

this.setData({

scrollTop: event.scrollTop

})
}
});
//JS
Page({
data: {

scrollTop: 0,

one: [{

name: "第一层"

}, {

name: "第一层"

}, {

name: "第一层"

}, {

name: "第一层"

}, {

name: "第一层"

}, {

name: "第一层"

}, {

name: "第一层"

}],

two: [{

name: "第二层"

}, {

name: "第二层"

}, {

name: "第二层"

}, {

name: "第二层"

}, {

name: "第二层"

}, {

name: "第二层"

}, {

name: "第二层"

}, {

name: "第二层"

}],

three: [{

name: "第三层"

}, {

name: "第三层"

}, {

name: "第三层"

}, {

name: "第三层"

}, {

name: "第三层"

}, {

name: "第三层"

}, {

name: "第三层"

}, {

name: "第三层"

}],
},
onChange(event) {

console.log(event.detail, 'click right menu callback data')
},
//页面滚动执行方式
onPageScroll(event) {

this.setData({

scrollTop: event.scrollTop

})
}
});
//WXSS
.i-sticky-demo-item{
width: 100%;
height: 100rpx;
line-height: 100rpx;
padding:0 30rpx;
border-bottom: 1rpx solid #ddd;
}
//WXSS
.i-sticky-demo-item{
width: 100%;
height: 100rpx;
line-height: 100rpx;
padding:0 30rpx;
border-bottom: 1rpx solid #ddd;
}以上就是本文的全部内容，希望对大家的学习有所帮助。