• 技术文章 >微信小程序 >小程序开发

    聊聊怎么在小程序中实现一个可截断的瀑布流组件

    青灯夜游青灯夜游2022-02-07 10:12:07转载894
    怎么在小程序中实现一个可截断的瀑布流组件?下面本篇文章给大家介绍一下微信小程序实现可截断瀑布流组件的方法,希望对大家有所帮助!

    php入门到就业线上直播课:进入学习

    瀑布流是一种常见的布局方式,实现的方式有许多,比如直接分两列,然后控制在左右两列加入元素;还有一种方式就是通过绝对定位的方式来放置两边。【相关学习推荐:小程序开发教程

    本文所要介绍的瀑布流不同于常规的,因为瀑布流中间可能会被截断:

    1.png

    对于上面的布局,如果强制分成两列去做布局就不太适合了,因此我采用了绝对定位的方式来进行布局,由于瀑布流中的元素高度都不是固定的,因此我得想办法获取到每个元素的高度,然后判定元素到底是放一整行,还是左侧,亦或者右侧。

    首先我们来看下模板部分的实现:

    <view class="container" style="height:{{height}}px;">
    	<view wx:for="{{list}}" wx:key="index" style="{{item.style}}" class="wrapper">
    		<abstract item="{{item}}"/>
    	</view>
    </view>
    <view wx:if="{{tmp}}" class="computed-zone">
    	<view class="wrapper">
    		<abstract item="{{tmp}}"/>
    	</view>
    </view>

    模板比较简单,一个 container 容器,然后循环数组,平级渲染出一堆 wrapper 容器。

    wrapper 容器是一个绝对定位的包裹元素,wrapper 容器里面需要放置需要实际渲染的组件,为了灵活性更高一点,我把这个渲染组件设置成了虚拟节点,在使用组件的时候可以指定实际渲染的自定义组件。

    因为 wrapper 元素是绝对定位的,因此我们需要手动去维护整个 container 容器的高度。

    这里有个问题是,我们怎么获取里面元素的高度呢?模板中的 computed-zone 就是来解决这个问题的,在将元素放置到数组之前,我们先把元素在 computed-zone 中进行渲染,然后通过 WXML api 来获取其中元素的实际渲染尺寸,这样我们就可以知道这个元素实际渲染的宽高度了。

    有了每个元素的渲染尺寸信息之后,我们需要确认元素到底是占满整行,还是占半边:

    分析下来,需要稍微写点儿逻辑的就是对 wrapper 计算偏移量,处理到底放左边还是放右边,亦或者占满整行,核心的代码实现如下:

    {
    	// 将 setData Promise 化,方便使用
    	$setData(data) {
    		return new Promise(resolve => {
    			this.setData(data, () => {
    				resolve();
    			});
    		});
    	},
    	// 获取元素的渲染尺寸
    	getRect(item) {
    		return this.$setData({
    			tmp: item,
    		}).then(() => {
    			return new Promise((resolve, reject) => {
    				const query = this.createSelectorQuery(); // 注意要使用 this,不要再使用 wx 前缀了
    				query.select('.computed-zone .wrapper').boundingClientRect();
    				query.exec(ret => {
    					if (ret[0]) {
    						resolve(ret[0]);
    					} else {
    						reject('not found dom!');
    					}
    				});
    			});
    		});
    	},
    	// 添加元素,内部使用
    	addItem(item) {
    		let tick = this.tick;
    		return this.getRect(item).then(rect => {
    			if (tick !== this.tick) {
    				return Promise.reject('tick');
    			}
    			const { margin } = this.data;
    			let { height, width } = rect;
    			const windowWidth = this.sysInfo.windowWidth;
    			let [ leftTotal, rightTotal ] = this.height; // leftTotal 左侧栏高度,rightTotal 右侧栏高度,
    			let marginPx = this.sysInfo.getPx(margin);
    			let style = '';
    
    			if (Math.abs(width - windowWidth) < 3) {
    				// 占满屏幕宽度
    				style = `left:0;top:${ Math.max(leftTotal, rightTotal) }px;width:100%;`;
    				leftTotal = rightTotal = Math.max(leftTotal + height, rightTotal + height);
    			} else if (rightTotal < leftTotal) {
    				// 放入右边
    				style = `right:${ marginPx }px;top:${ rightTotal }px;`;
    				rightTotal += height;
    			} else {
    				// 放入左边
    				style = `left:${ marginPx }px;top:${ leftTotal }px;`;
    				leftTotal += height;
    			}
    
    			const { list = [] } = this.data;
    			const targetKey = `list[${list.length}]`; // 利用直接操作数组下标的方式来触发数组修改,性能有很大提升
    			this.height = [leftTotal, rightTotal]; // 记录最新的左右侧高度
    			return this.$setData({
    				[targetKey]: {
    					data: item,
    					style,
    				},
    				height: Math.max(leftTotal, rightTotal),
    			});
    		});
    	},
    	// 实际添加元素使用,自建Promise队列,保证顺序一致
    	add(item) {
    		let pending = this.pending || Promise.resolve();
    		return this.pending = pending.then(() => {
    			return this.addItem(item);
    		}).catch(err => {
    			console.error(err);
    			this.pending = null;
    			throw err;
    		});
    	},
    	clear() {
    		this.tick = tick++;
    		this.height = [0, 0];
    		this.pending = null;
    		this.setData({
    			list: [],
    			height: 0,
    		});
    	},
    }

    在使用该组件的时候我们就不能直接通过赋值数组的方式来渲染元素了,而是得通过组件实例方法add(item) 的方式,因为我实现了队列,因此可以直接循环 add 就行。如果关心状态就判断最后一个元素的 add 操作是否完成即可。

    通过这种方式来实现的瀑布流灵活性相对较高,但是性能消耗也是不低的,需要挨个获取元素的实际渲染尺寸,如果要支持窗口的resize的话,那消耗是恐怖。

    对于需要看代码细节的同学,我将实际的demo放到了 Github微信代码片段,有需要的同学可以试一试。

    基于上面的模型,其实也可以优化成只渲染可视区范围内的元素,可以大大提升瀑布流的性能,希望有时间的同学可以完善完善,我来fork点赞~o( ̄▽ ̄)d

    更多编程相关知识,请访问:编程视频!!

    以上就是聊聊怎么在小程序中实现一个可截断的瀑布流组件的详细内容,更多请关注php中文网其它相关文章!

    声明:本文转载于:掘金社区,如有侵犯,请联系admin@php.cn删除
    上一篇:深入解析小程序中的的双线程模型 下一篇:深入浅析小程序中的全局配置
    VIP课程(WEB全栈开发)

    相关文章推荐

    • ❤️‍🔥共22门课程,总价3725元,会员免费学• 一个邮箱可以有几个微信小程序• 如何利用小程序的canvas来绘制二维码?• 手把手带你在小程序中怎么实现3d裸眼轮播效果• 利用Taro + Vue3如何开发小程序?(实践)• 一文看看如何撸出春节“智能迎春对联”小程序!• 浅析如何从小程序跳到H5页面?(示例解析)• 手把手带你实现虎年头像框制作小程序(实践)
    1/1

    PHP中文网