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

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

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

//如图所示----这里用了自定义组件实现了小程序吸顶功能
//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;
}

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