饿了么布局

效果 粘性布局

代码

<View>
  <Navbar title='饿了么布局' textColor='#fff' bgColor='#000' />
  <View style='height: 84px'></View>
  <View className='header'>header</View>
  <View className='main'>
    <ScrollView
      className='main-left'
      scrollY
    >
      {Array(15).fill().map((item, index) => (
        <View className='item'>index</View>
      ))}
    </ScrollView>
    <View className='main-right'>
      {Array(15).fill().map((item, index) => (
        <View className='boxx'>
          <View className='boxx-index'>index{index}</View>
          <View className='boxx-content'>content{index}</View>
        </View>
      ))}
    </View>
  </View>
</View>

@mixin flexCenter {
  display: flex;
  justify-content: center;
  align-items: center;
}

.header {
  height: 300px;
  background: chartreuse;
  margin-bottom: 10px;
  @include flexCenter;
}

.main {
  background: darksalmon;
  display: flex;
  &-left {
    height: calc(100vh - 168px);
    width: 200px;
    background: chocolate;
    position: sticky;
    top: 168px;
    .item {
      height: 100px;
      background: darkseagreen;
      margin-bottom: 10px;
      @include flexCenter;
    }
  }
  &-right {
    flex: 1;
    .boxx {
      & + .boxx {
        margin-top: 20px;
      }
      &-index {
        background: lightblue;
        height: 80px;
        @include flexCenter;
        position: sticky;
        top: 168px;
      }
      &-content {
        background: darkslateblue;
        height: 200px;
        @include flexCenter;
      }
    }
  }
}