uniapp vue和 nvue 响应式瀑布流布局

目录

响应瀑布流列数的实例函数

使用 screenSizeGrid 实例

对数据的列数处理

Vue中布局

Nvue中布局

该文章里的组件 Joshua-lazyLoad-cache-image 为uniapp插件：图片懒加载和缓存功能 - DCloud 插件市场

响应瀑布流列数的实例函数

        可以拿取到当前的视图宽度和列数

function screenSizeGrid() {
	let column = 0
	let windowWidth = 0
	const state = {
		getColumn: () => column,
		getWindowWidth: () => windowWidth
	};
	let systemInfo = uni.getSystemInfoSync();
	let screenWidth = systemInfo.screenWidth;
	const windowResizeCallback = (res = {
		size: {}
	}) => {

		windowWidth = res.size.windowWidth || screenWidth;
		if (windowWidth < 539) {
			column = 1
		} else if (windowWidth < 970 && windowWidth > 539) {
			column = 2
		} else if (windowWidth > 970) {
			column = 3
		}

		uni.$emit('windowResizeUpdate');
	}
	windowResizeCallback()
	uni.onWindowResize(windowResizeCallback);
	return {
		...state,
		subscribeToUpdates: (callback) => {
			uni.$on('windowResizeUpdate', callback);
		}
	};
}

使用 screenSizeGrid 实例

import {
		screenSizeGrid
	} from '@/common/oneself.js'

onShow() {
	const screenState = screenSizeGrid();
    screenState.subscribeTo