使用 fixed 定位实现
效果
WXML
<!--index.wxml-->
<view class="container">
<view class='head'>HEAD</view>
<scroll-view class="body-h" scroll-x>
<view id="green" class="item">1</view>
<view id="red" class="item">2</view>
<view id="yellow" class="item">3</view>
<view id="blue" class="item">4</view>
</scroll-view>
<scroll-view class='body-v' scroll-y >
<view class="item">1</view>
<view class="item">2</view>
<view class="item">3</view>
<view class="item">4</view>
<view class="item">5</view>
<view class="item">6</view>
<view class="item">1</view>
<view class="item">2</view>
<view class="item">3</view>
<view class="item">4</view>
<view class="item">5</view>
<view class="item">6</view>
</scroll-view>
<view class="footer">FOOTER</view>
</view>
WXSS
.container {
background-color: #fff;
color: #939393;
}
.head{
z-index: 1;
position: fixed;
top: 0rpx;
width:100%;
height:100rpx;
color:#fff;
background-color: cornflowerblue;
text-align: center;
}
.body-h{
position: fixed;
top: 100rpx;
white-space: nowrap;
}
.body-h .item{
display: inline-block;
width: 600rpx;
height: 200rpx;
background-color: red;
margin: 20rpx;
box-sizing:border-box;
}
.body-v{
position: fixed;
z-index: -1;
top:300rpx;
bottom:100rpx;
}
.body-v .item{
height: 300rpx;
background-color: green;
margin: 15rpx;
}
.footer{
z-index: 1;
position: fixed;
bottom: 0rpx;
width:100%;
height:100rpx;
color:#fff;
background-color: cornflowerblue;
text-align: center;
}