效果如下
吸頂功能在還是比較實(shí)用，頁(yè)面中的部分功能吸頂添加用戶(hù)體驗(yàn)叠国，懂得都懂未檩，直接上代碼。
WXML
<view class="sticky_wrap">
<view class="sticky_title">標(biāo)題1</view>
<view class="sticky_content">內(nèi)容1</view>
<view class="sticky_title">標(biāo)題2</view>
<view class="sticky_content">內(nèi)容2</view>
<view class="sticky_title">標(biāo)題3</view>
<view class="sticky_content">內(nèi)容3</view>
<view class="sticky_title">標(biāo)題4</view>
<view class="sticky_content">內(nèi)容4</view>
<view class="sticky_title">標(biāo)題5</view>
<view class="sticky_content">內(nèi)容5</view>
</view>
WXSS
page {
margin: 0rpx;
padding: 0rpx;
font-size: 28rpx;
}
view {
box-sizing: border-box;
}
.sticky_wrap {
width: 100%;
}
.sticky_wrap .sticky_title {
height: 200rpx;
width: 100%;
background-color: #f00;
/* 實(shí)現(xiàn)吸頂 */
position: sticky;
/* 吸頂內(nèi)容 距離 頂部的高度 */
top: 0rpx;
/* top: 50rpx; */
}
.sticky_wrap .sticky_content {
height: 300rpx;
width: 100%;
}
/* 最后一個(gè)內(nèi)容框的高度設(shè)置為 屏幕高度 */
.sticky_wrap .sticky_content:last-child {
height: 100vh;
}
