sticky三个应用场景
发布于 4 年前 作者 fyin 3654 次浏览 来自 分享

1. 吸顶导航

<view class="item_title" bindtap="toBack">返回上一页</view>
<view class="item" wx:for='{{10}}' wx:key='index'>{{item+1}}</view>

.item_title {
  width700rpx;
  height90rpx;
  line-height90rpx;
  text-align: center;
  background-color#ccc;
  border-radius8rpx;
  position: sticky;
  top6rpx;
  margin25rpx;
}

.item{
  height200rpx;
  border-bottom2rpx solid #ccc;
  line-height200rpx;
  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-size38rpx;
  position: sticky;
  top0;
  background-color#ccc;
}

.content {
  line-height60rpx;
}

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{
  height500rpx;
  border2rpx solid #ccc;
  margin10rpx;
  overflow: scroll;
  padding0 20rpx;
}

.box_title{
  text-align: center;
  line-height80rpx;
  font-size38rpx;
  position: sticky;
  left0;
  top0;
  background-color#fff;
}

.box_cotent{
  line-height60rpx;
  color#333;
  padding-bottom10rpx;
}

.body{
  line-height1500rpx;
  text-align: center;
}

.box_btn{
  position: sticky;
  left0;
  bottom10rpx;
}

代码片段:

https://developers.weixin.qq.com/s/uTR93LmD7cfM

回到顶部