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>