小程序如何實現(xiàn)簡單吸頂效果

這篇“小程序如何實現(xiàn)簡單吸頂效果”文章的知識點大部分人都不太理解，所以小編給大家總結(jié)了以下內(nèi)容，內(nèi)容詳細(xì)，步驟清晰，具有一定的借鑒價值，希望大家閱讀完這篇文章能有所收獲，下面我們一起來看看這篇“小程序如何實現(xiàn)簡單吸頂效果”文章吧。

要求:

1.使頁面某一區(qū)域始終顯示在頁面的最頂端
2.頁面流暢不卡頓

初始效果如圖：

最終效果：

1.wxml部分代碼如下:

<view class="search">搜索框</view>
<view class="banner">banner</view>
<view class="content">
  <view class="item" wx:for="{{arry}}">我是內(nèi)容{{item}}</view>
</view>

2.wxss部分代碼如下:

view {
  text-align: center;
}

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

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

.item {
  height: 50px;
}

/* 設(shè)置吸頂效果 */
.search {
  position: sticky;
  position: -webkit-sticky;
  top: 0;/*距離頂部多少吸頂*/
}

3.js部分代碼如下:

Page({

  /**
   * 頁面的初始數(shù)據(jù)
   */
  data: {
    arry:[1,2,3,4,5,6,7,8,9,10,11,12]
  }
})

4.json部分代碼如下:

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

注意:

1.設(shè)置粘性定位position: -webkit-sticky; position: sticky;
2.設(shè)置topcode>值,距離頂部多少吸頂

以上就是關(guān)于“小程序如何實現(xiàn)簡單吸頂效果”這篇文章的內(nèi)容，相信大家都有了一定的了解，希望小編分享的內(nèi)容對大家有幫助，若想了解更多相關(guān)的知識內(nèi)容，請關(guān)注億速云行業(yè)資訊頻道。