小程序自定义模板实现吸顶功能

前端  /  管理员 发布于 5年前   563

本文实例为大家分享了小程序实现吸顶功能的具体代码，供大家参考，具体内容如下

//如图所示----这里用了自定义组件实现了小程序吸顶功能//WXML                   第一层                    {{item.name}}                           第二层                    {{item.name}}                            第三层                    {{item.name}}                                    最后                    {{index+1}}            

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

//JSPage({ 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;}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

您可能感兴趣的文章:

• 微信小程序实现吸顶特效
• 微信小程序实现吸顶效果
• js实现多个标题吸顶效果
• JS实现网站吸顶条
• js实现移动端吸顶效果
• JS实现吸顶特效
• 浅谈react.js中实现tab吸顶效果的问题
• 原生js实现吸顶效果
• js实现导航吸顶效果
• 微信小程序wxs实现吸顶效果