小程序之 吸顶效果实例

要求:

1.使页面某一区域始终显示在页面的最顶端
2.页面流畅不卡顿

初始效果如图：

最终效果：

1. wxml部分代码如下:

<view class="search">搜索框</view>
<view class="banner">banner</view>
<view class="content">
  <view class="item" wx:for="{{arry}}">我是内容{{item}}</view>
</view>

2. wxss部分代码如下:

view {
  text-align: center;
}

.banner {
  height: 150px;
  background: palegreen;
}

.search {
  width: 100%;
  height: 40px;
  background: plum;
}

.item {
  height: 50px;
}

/* 设置吸顶效果 */
.search {
  position: sticky;
  position: -webkit-sticky;
  top: 0;/*距离顶部多少吸顶*/
}

3. js部分代码如下:

Page({

  /**
   * 页面的初始数据
   */
  data: {
    arry:[1,2,3,4,5,6,7,8,9,10,11,12]
  }
})

4. json部分代码如下:

{
  "navigationBarBackgroundColor": "#f7f7f5",
  "navigationBarTextStyle": "black",
  "navigationBarTitleText":"示例页面",
  "usingComponents": {}
}

注意:
1.设置粘性定位position: -webkit-sticky; position: sticky;
2.设置top值,距离顶部多少吸顶