本文实例为大家分享了小程序实现吸顶功能的具体代码，供大家参考，具体内容如下
创新互联公司专注为客户提供全方位的互联网综合服务，包含不限于网站设计、成都网站建设、习水网络推广、重庆小程序开发公司、习水网络营销、习水企业策划、习水品牌公关、搜索引擎seo、人物专访、企业宣传片、企业代运营等，从售前售中售后，我们都将竭诚为您服务，您的肯定，是我们最大的嘉奖；创新互联公司为所有大学生创业者提供习水建站搭建服务，24小时服务热线：18980820575，官方网址：www.cdcxhl.com
//如图所示----这里用了自定义组件实现了小程序吸顶功能 //WXML第一层 {{item.name}} 第二层 {{item.name}} 第三层 {{item.name}} 最后 {{index+1}}
//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
})
}
});//WXSS
.i-sticky-demo-item{
width: 100%;
height: 100rpx;
line-height: 100rpx;
padding:0 30rpx;
border-bottom: 1rpx solid #ddd;
}以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持创新互联。