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

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

引入uniapp的nvue组件waterfall链 https://uniapp.dcloud.net.cn/component/waterfall.html#waterfall

template代码

<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代码

<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>

css代码

weex不支持scss扩展语言嵌套编写模式

默认是flex布局,所以不需要手动添加 display: flex

<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>


相关文章
|
6月前
|
前端开发 Android开发 iOS开发
移动端自适应解决方案vw(以react为例)
移动端自适应解决方案vw(以react为例)
144 0
|
3月前
|
JavaScript 前端开发 算法
【Vue秘籍揭秘】:掌握这一个技巧,让你的列表渲染速度飙升!——深度解析`key`属性如何成为性能优化的秘密武器
【8月更文挑战第20天】Vue.js是一款流行前端框架,通过简洁API和高效虚拟DOM更新机制简化响应式Web界面开发。其中,`key`属性在列表渲染中至关重要。本文从`key`基本概念出发,解析其实现原理及最佳实践。使用`key`帮助Vue更准确地识别列表变动,优化DOM更新过程,确保组件状态正确维护,提升应用性能。通过示例展示有无`key`的区别,强调合理使用`key`的重要性。
61 3
|
6月前
|
Web App开发 前端开发 JavaScript
只需一行CSS代码,让长列表网页的渲染性能提升几倍以上!
只需一行CSS代码,让长列表网页的渲染性能提升几倍以上!
|
存储 前端开发 容器
uniapp瀑布流:他的数据是纵向渲染,怎么实现动态上拉加载数据?
uniapp瀑布流:他的数据是纵向渲染,怎么实现动态上拉加载数据?
142 0
|
JavaScript 前端开发 开发者
【Vue 移动端开发】适配百分之99的屏幕方案
【Vue 移动端开发】适配百分之99的屏幕方案
253 0
|
JavaScript
vue uniapp通用省市下拉选择器组件 布局样式可灵活根据ui变更 (区域 可根据数组嵌套的格式继续往下模仿即可)
vue uniapp通用省市下拉选择器组件 布局样式可灵活根据ui变更 (区域 可根据数组嵌套的格式继续往下模仿即可)
662 0
vue uniapp通用省市下拉选择器组件 布局样式可灵活根据ui变更 (区域 可根据数组嵌套的格式继续往下模仿即可)
|
自然语言处理 JavaScript 前端开发
动态滑动图片验证码组件(支持多语言,移动端)
动态滑动图片验证码组件(支持多语言,移动端)
动态滑动图片验证码组件(支持多语言,移动端)
|
JavaScript
Vue中 引入使用 vue-virtual-scroll-list 通过虚拟列表滚动加载,解决数据量过多时 页面卡顿、体验差的问题
Vue中 引入使用 vue-virtual-scroll-list 通过虚拟列表滚动加载,解决数据量过多时 页面卡顿、体验差的问题
812 0
Vue中 引入使用 vue-virtual-scroll-list 通过虚拟列表滚动加载,解决数据量过多时 页面卡顿、体验差的问题
|
存储 JavaScript 前端开发
北海(Kraken)构建大前端混合渲染技术体系 —— Web 与 Flutter Widget 混合渲染方案
北海(Kraken)构建大前端混合渲染技术体系 —— Web 与 Flutter Widget 混合渲染方案
475 1
北海(Kraken)构建大前端混合渲染技术体系 ——  Web 与 Flutter Widget  混合渲染方案