1. 吸顶导航
<view class="item_title" bindtap="toBack">返回上一页</view>
<view class="item" wx:for='{{10}}' wx:key='index'>{{item+1}}</view>
.item_title {
width: 700rpx;
height: 90rpx;
line-height: 90rpx;
text-align: center;
background-color: #ccc;
border-radius: 8rpx;
position: sticky;
top: 6rpx;
margin: 25rpx;
}
.item{
height: 200rpx;
border-bottom: 2rpx solid #ccc;
line-height: 200rpx;
text-align: center;
}
2. 标题推开
<block wx:for='{{list}}' wx:key='index'>
<view class="title">{{item.title}}</view>
<view class="content" wx:for='{{item.content}}' wx:key='index2' wx:for-item='item2' wx:for-index='index2'>{{item2}}</view>
</block>
.title {
line-height: 80rpx;
font-size: 38rpx;
position: sticky;
top: 0;
background-color: #ccc;
}
.content {
line-height: 60rpx;
}
3. 相对父级固定定位
<view class='page'>
<view class="box">
<view class="box_title">砍价规则</view>
<view class="box_cotent" wx:for="{{rule}}" wx:key='index'>{{item}}</view>
<button class="box_btn" type="primary">已了解</button>
</view>
<view class="body">占位符</view>
</view>
.box{
height: 500rpx;
border: 2rpx solid #ccc;
margin: 10rpx;
overflow: scroll;
padding: 0 20rpx;
}
.box_title{
text-align: center;
line-height: 80rpx;
font-size: 38rpx;
position: sticky;
left: 0;
top: 0;
background-color: #fff;
}
.box_cotent{
line-height: 60rpx;
color: #333;
padding-bottom: 10rpx;
}
.body{
line-height: 1500rpx;
text-align: center;
}
.box_btn{
position: sticky;
left: 0;
bottom: 10rpx;
}
代码片段：
