小程序自定义模板实现吸顶功能
作者：菜鸟老五
这篇文章主要为大家详细介绍了小程序自定义模板实现吸顶功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了小程序实现吸顶功能的具体代码，供大家参考，具体内容如下
//如图所示----这里用了自定义组件实现了小程序吸顶功能
//WXML
<view class="i-sticky-demo">
<i-sticky scrollTop="{{scrollTop}}">
<i-sticky-item i-class="i-sticky-demo-title">
<view slot="title">
第一层
</view>
<view slot="content" wx:for="{{one}}" wx:key="index">
<view class="i-sticky-demo-item">{{item.name}}</view>
</view>
</i-sticky-item>
<i-sticky-item i-class="i-sticky-demo-title">
<view slot="title">
第二层
</view>
<view slot="content" wx:for="{{two}}" wx:key="index">
<view class="i-sticky-demo-item">{{item.name}}</view>
</view>
</i-sticky-item>
<i-sticky-item i-class="i-sticky-demo-title">
<view slot="title">
第三层
</view>
<view slot="content" wx:for="{{three}}" wx:key="item">
<view class="i-sticky-demo-item">{{item.name}}</view>
</view>
</i-sticky-item>
<i-sticky-item i-class="i-sticky-demo-title">
<view slot="title">
最后
</view>
<view slot="content" wx:for="{{15}}" wx:key="index">
<view class="i-sticky-demo-item">{{index+1}}</view>
</view>
</i-sticky-item>
</i-sticky>
</view>
//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;
}
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。