nvue实现高性能接近原生瀑布流列表

<template>
    <waterfall left-gap="0" right-gap="0" class="waterfall" :show-scrollbar="false" column-count="2"  column-gap="0" column-width="auto">
        <header>
        <view class="header">
          <view class="tab">GIF</view>
          <view class="tab" style="background-color: #42b983;">
            <text style="color: #fff">高清</text>
          </view>
          <view class="tab">最新</view>
          <view class="tab">颜色</view>
        </view>
      </header>
      <cell @appear="appear(index)" class="item" v-for="(item,index) in list" :key="item"> 
          <view class="view">
          <image class="image" :src="item"></image>
          <view class="bottom">
            <text class="title">图片{{index}}</text>
            <text class="explan">{{item}}</text>
          </view>
        </view>
        </cell>
      <view style="position: fixed;bottom: 0;width: 100%;background-color: #fff;">
        fixed
      </view>
    </waterfall>
  <!-- <view class="content">
    <div id="waterfall">
      <div class="item" v-for="item in list" :key="item">
        <image :src="item"></image>
      </div>
    </div>
  </view> -->
</template>

<script>
  export default {
    data() {
      return {
        page:1,
        title: 'Hello',
        list:[]
      }
    },
    onLoad() {
      uni.request({
        url:`https://cn.bing.com/images/async?q=%e9%83%bd%e5%b8%82%e5%a3%81%e7%ba%b8&
        first=${this.page}
        &count=500
        &
        cw=414&ch=896&relp=12&datsrc=I&layout=ColumnBased_Landscape&apc=0&mmasync=1&dgState=c*2_y*985s708_i*13_w*193&IG=1A93531B773D483ABD7A6C17C52CCCB2&SFX=2&iid=images.5258`,
        method:'get',
        success: (res) => {
          console.log(res)
          let arr = res.data.split(";http://")
          let nextList = []
          arr.map(item => {
            let str = 'http://'+item.substr(0,item.indexOf('&'))
            if(str.indexOf('jpg') !== -1) {
              nextList.push('http://'+item.substr(0,item.indexOf('&')))
            }
          })
          this.list = nextList
          console.log(nextList)
        }
      })
    },
    methods: {
      // 下一页
      appear(e) {
        if(e>=this.list.length-2) {
          this.page += 1
          uni.request({
            url:`https://cn.bing.com/images/async?q=%e9%83%bd%e5%b8%82%e5%a3%81%e7%ba%b8&
            first=${this.page}
            &count=500
            &
            cw=414&ch=896&relp=12&datsrc=I&layout=ColumnBased_Landscape&apc=0&mmasync=1&dgState=c*2_y*985s708_i*13_w*193&IG=1A93531B773D483ABD7A6C17C52CCCB2&SFX=2&iid=images.5258`,
            method:'get',
            success: (res) => {
              console.log(res)
              let arr = res.data.split(";http://")
              let nextList = []
              arr.map(item => {
                let str = 'http://'+item.substr(0,item.indexOf('&'))
                if(str.indexOf('jpg') !== -1) {
                  nextList.push('http://'+item.substr(0,item.indexOf('&')))
                }
              })
              this.list = this.list.concat(nextList)
              console.log(nextList)
            }
          })
        }
      }
    }
  }
</script>

<style>
  .waterfall {
    background-color: #ffffff;
    padding:0 20rpx;
  }
  .header {
    margin: auto -25rpx;
    flex-direction: row;
    display: flex;
    background-color: #ffffff;
    padding: 25rpx 0;
  }
  .header .tab {
    border-radius: 5rpx;
    margin: 0rpx 20rpx;
    background-color: #f5f5f5;
    padding: 15rpx 30rpx;
  }
  .item { 
    border-radius: 15rpx;
    /* box-shadow: 0 0 0 1px rgb(0 0 0 / 5%), 0 2px 3px 0 rgb(0 0 0 / 10%); */
    /* -webkit-box-shadow: 0 0 0 1px rgb(0 0 0 / 5%), 0 2px 3px 0 rgb(0 0 0 / 10%); */
    /* margin: 20rpx 0; */
  }
  .item > .view { 
    margin: 8rpx 12rpx;
    border-radius: 6rpx;
    box-shadow: 0 0 5rpx 0 rgba(0, 0, 0, 0.5);
  }
  .item .bottom {
    padding: 10rpx;
  }
  .item .bottom .title {
    font-size: 25rpx;
  }
  .item .bottom .explan {
    margin-top: 5rpx;
    font-size: 16rpx;
    color: #767676;
  }
  .item .image {
    border-radius: 6rpx;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    /* width: 100%; */
    height: 100%;
  }
/*  #waterfall {
    column-count: 3;
    column-gap: 20px;
  }
  .item {
    display: inline-block;
    width: 100%;
    margin-bottom: 20px;
    height: 120px;
    width: 50%;
  }
  .item image {
    height: 120px;
    width: 100%;
  } */
</style>