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>