小程序自定义模板实现吸顶功能
本文实例为大家分享了小程序实现吸顶功能的具体代码,供大家参考,具体内容如下
//如图所示----这里用了自定义组件实现了小程序吸顶功能 //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,'clickrightmenucallbackdata') }, //页面滚动执行方式 onPageScroll(event){ this.setData({ scrollTop:event.scrollTop }) } });
//WXSS .i-sticky-demo-item{ width:100%; height:100rpx; line-height:100rpx; padding:030rpx; border-bottom:1rpxsolid#ddd; }
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持毛票票。
声明:本文内容来源于网络,版权归原作者所有,内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎发送邮件至:czq8825#qq.com(发邮件时,请将#更换为@)进行举报,并提供相关证据,一经查实,本站将立刻删除涉嫌侵权内容。