欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

小程序?qū)崿F(xiàn)簡單吸頂效果

 更新時間：2022年05月23日 17:16:54   作者：gyuei  
這篇文章主要為大家詳細(xì)介紹了小程序?qū)崿F(xiàn)簡單吸頂效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了小程序?qū)崿F(xiàn)吸頂效果的具體代碼，供大家參考，具體內(nèi)容如下

要求:

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è)置top值,距離頂部多少吸頂

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

相關(guān)文章

最新評論