uniapp 瀑布流 (APP+H5+微信小程序)

WaterfallsFlow.vue

<template><view class="wf-page" :class="props?.paddingC ? 'paddingC' : ''"><!--    left    --><view><view id="left" ref="left" v-if="leftList.length"><viewv-for="(item, index) in leftList":key="index"class="wf-item"@tap="itemTap(item)"><!-- #ifdef MP-WEIXIN -->//这里需要注意插槽id 必须是唯一id ,否则小程序显示异常<slot :name="`slot${item.customSId || item.id}`"></slot><!-- #endif --><!-- #ifndef MP-WEIXIN --><slot :item="item" :index="index"></slot><!-- #endif --><!-- <slot :item="item" :index="index"></slot> --></view></view></view><!--    right    --><view><view id="right" ref="right" v-if="rightList.length"><viewv-for="(item, index) in rightList":key="index"class="wf-item"@tap="itemTap(item)"><!-- #ifdef MP-WEIXIN -->//这里需要注意插槽id 必须是唯一id ,否则小程序显示异常<slot :name="`slot${item.customSId || item.id}`"></slot><!-- #endif --><!-- #ifndef MP-WEIXIN --><slot :item="item" :index="index"></slot><!-- #endif --></view></view></view></view>
</template><script lang="ts" setup>
// import App from "@/script/module/App.js";
import { axj } from "@/script/sdk/cloudfarm";
import {reactive,ref,onMounted,watch,nextTick,getCurrentInstance,
} from "vue";
import { onPageScroll, onShow, onPullDownRefresh } from "@dcloudio/uni-app";
import App from "@/script/module/App";
const props: any = defineProps({// 瀑布流列表wfList: {type: Array,require: true,},updateNum: {type: Number,default: 10,},updated: {//强制页面重新渲染type: Boolean,default: false,},paddingC: {//控制显示paddding  兼容之前瀑布流样式type: Boolean,default: false,},
});
const _this = getCurrentInstance();
let allList = ref([]);
let leftList = ref([]);
let rightList = ref([]);
let boxHeight = ref([]);
let mark = ref(0);
// 调用父组件
const emits = defineEmits(["itemTap", "notify"]);// 瀑布流排序
const waterFall = () => {const i = mark.value;if (i === 0) {// 初始化,从左边开始插入leftList.value.push(allList.value[i]);// 更新左边列表高度nextTick(() => {getViewHeight(0);});} else if (i === 1) {// 第二个item插入,默认为右边插入rightList.value.push(allList.value[i]);// 更新右边列表高度nextTick(() => {getViewHeight(1);});} else {// 根据左右列表高度判断下一个item应该插入哪边const leftOrRight = boxHeight.value[0] >= boxHeight.value[1] ? 1 : 0;if (leftOrRight) {rightList.value.push(allList.value[i]);} else {leftList.value.push(allList.value[i]);}// 更新插入列表高度  setTimeout用来解决 多次数据push 计算高度错误问题setTimeout(() => {getViewHeight(leftOrRight);}, 0);}
};
// 获取列表高度
const getViewHeight = (leftOrRight) => {const query = uni.createSelectorQuery().in(this || _this);const id = leftOrRight ? "#right" : "#left";// 使用nextTick,确保页面更新结束后,再请求高度nextTick(() => {query.select(id).boundingClientRect((res: any) => {res ? (boxHeight.value[leftOrRight] = res.height) : "";mark.value = mark.value + 1;}).exec();});
};
// item点击
const itemTap = (item) => {emits("itemTap", item);
};const setWfList = (wfList) => {allList.value = wfList;waterFall();
};let collect = () => {let requestParm = {topicModule: props?.topicModule,topicId: props?.topicId,};return new Promise((resolve, reject) => {App.client?.farm.Api_UserInteract.thumb(0, [requestParm], (err, res) => {if (res) {resolve(true);}});});
};watch(() => props.wfList,() => {// 如果数据为空或新的列表数据少于旧的列表数据(通常为下拉刷新或切换排序或使用筛选器),初始化变量if (!props.wfList.length ||(props.wfList.length === props.updateNum &&props.wfList.length <= allList.value.length) ||props.updated) {allList.value = [];leftList.value = [];rightList.value = [];boxHeight.value = [];mark.value = 0;}// 如果列表有值,调用waterfall方法if (props.wfList.length) {allList.value = props.wfList;waterFall();}},{immediate: true, // 初始化数据触发watch// deep: true, // 对 对象进行深度监听 ; 此处深度监听,如果数据改变(比如点赞)会导致页面重绘}
);
watch(() => mark.value,() => {const len = allList.value.length;if (mark.value < len && mark.value !== 0) {waterFall();} else {if (boxHeight.value.length >= 2) {let bHeight =boxHeight.value[0] > boxHeight.value[1]? boxHeight.value[0]: boxHeight.value[1];emits("notify", bHeight);}}},{immediate: true, // 初始化数据触发watchdeep: true, // 对 对象进行深度监听}
);
</script><style lang="scss" scoped>
$page-padding: 10px;
$grid-gap: 10px;
.wf-page {display: grid;grid-template-columns: 1fr 1fr;grid-gap: $grid-gap;// padding: 10px $page-padding;
}
.paddingC {padding: 10px $page-padding;
}
.wf-item {width: calc((100vw - 2 * #{$page-padding} - #{$grid-gap}) / 2);padding-bottom: $grid-gap;
}
</style>

waterfall.vue

//这里需要注意customSId 必须是唯一id ,否则小程序显示异常
<template><WaterfallsFlow ref="wfListRef" :wfList="DataList" :updated="updated"><!-- #ifdef MP-WEIXIN --><viewclass="item"v-for="(item, index) in DataList":key="index":slot="`slot${item.customSId}`">//这里自己写插槽内容<view :item="item" ></view></view><!-- #endif --><!-- #ifndef MP-WEIXIN --><template v-slot="{ item }"><view class="item">//这里自己写插槽内容<view :item="item" ></view></view></template><!-- #endif --></WaterfallsFlow>
</template><script lang="ts" setup >
import { reactive, ref, onMounted, watch } from "vue";
import { onPageScroll, onShow, onPullDownRefresh } from "@dcloudio/uni-app";
import WaterfallsFlow from "./WaterfallsFlow.vue";
const DataList = ref([{image:"https://ss.dev.yiyiny.com/digital/2023/04/25/00yqnc0wglmzhtqf.jpg?x-oss-process=image/quality,q_50",avatar:"https://cdn.pixabay.com/user/2015/10/12/02-06-28-605_250x250.jpg",nickName: 1,title:"非常好看的额图片,快起来这里买看的额图片,快起来这里买看的额图片,快起来这里买看的额图片,快起来这里买东西",isLike: true,},{image:"https://ss.dev.yiyiny.com/digital/2023/04/24/009vus6uglv9477m.jpeg?x-oss-process=image/quality,q_5",avatar:"https://cdn.pixabay.com/user/2015/10/12/02-06-28-605_250x250.jpg",nickName: 2,title: "这段文字要少",isLike: false,},];)
</script><style scoped lang="scss">
</style>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/9449.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

vue解决跨域访问问题(个人学习笔记六)

目录 友情提醒第一章、跨越问题解决1.1&#xff09;什么是跨域问题&#xff1f;1.2&#xff09;第一种解决方式&#xff1a;后端设置允许跨域访问1.3&#xff09;第二种解决方式&#xff1a;前端配置代理 第二章、配置代理服务器2.1&#xff09;配置简单代理服务器2.2&#xff…

es6 new Set 数组去重 并集 交集 差集

Set 对象存储的值总是唯一的 Set 对象方法 方法 描述 add 添加某个值&#xff0c;返回Set对象本身。 clear 删除所有的键/值对&#xff0c;没有返回值。 delete 删除某个键&#xff0c;返回true。如果删除失败&#xff0c;返回false。 forEach 对每个元素执行指定操作。 has 返…

端口复用与重映射

端口复用和重映射 STM32F1有很多的内置外设&#xff0c;这些外设的外部引脚都是与GPIO复用的。也就是说&#xff0c;一个GPIO如果可以复用为内置外设的功能引脚&#xff0c;那么当这个GPIO作为内置外设使用的时候&#xff0c;就叫做复用。 大家都知道&#xff0c;MCU都有串口…

kotlin 编写一个简单的天气预报app(一)

使用Android Studio开发天气预报APP 今天我来分享一下如何使用Android Studio开发一个天气预报APP。在文中&#xff0c;我们将使用第三方接口获取实时天气数据&#xff0c;并显示在APP界面上。 步骤一&#xff1a;创建新项目 首先&#xff0c;打开Android Studio并创建一个新…

MySQL 中一条 SQL 的查询与更新

MySQL 中一条 SQL 的查询与更新 1 SQL 的查询1.1 MySQL 的逻辑架构图1.2 连接器1.3 查询缓存1.4 分析器1.5 优化器1.6 执行器 2 SQL 的更新2.1 redo log&#xff08;重做日志&#xff09;2.2 binlog&#xff08;归档日志&#xff09;2.3 redo log 和 binlog 日志的差异2.4 示例…

Yarn上Streaming流自动调节资源设计

Streaming流自动调节资源 自动资源调节简单来说就是根据数据的输入速率和数据的消费速率来判断是否应该调节资源。如果输入速率大于消费速率&#xff0c;并且在输入速率还在攀升&#xff0c;则将该Job停止并调高Job的资源等级然后重启。如果消费速率大于输入速率&#xff0c;并…

React的核心概念—组件

参考文章 组件的定义和使用 组件是 React 的核心概念之一。它们是构建用户界面&#xff08;UI&#xff09;的基础。 组件&#xff1a;UI 构成要素 在 Web 当中&#xff0c;HTML 允许使用其内置的标签集&#xff08;如 <h1> 和 <li>&#xff09;创建丰富的结构化…

Qt - 控件和布局

文章目录 添加按钮 QPushButton自定义控件对象树坐标系 https://www.bilibili.com/video/BV1g4411H78N?p6 添加按钮 QPushButton 添加控件到窗口&#xff0c;需要添加内容到 mywidget.cpp #include "mywidget.h" #include <QPushButton> //按钮控件的头文件…

React 中 {} 的应用

列表渲染&#xff1a; 1.使用数组的 map 方法&#xff08;因为map 可以映射&#xff09; 2、列表要添加 key 属性&#xff0c;值要唯一 // 导入 // 用来获取 dom元素 import { createRoot } from "react-dom/client";// 内容 const contentArr [{ id: 1, name: &…

提高公文写作效率,可以采用模板和样例来辅助写作

采用模板和样例是提高公文写作效率的一种常见方法。 模板是指已经制作好的公文格式和结构模板&#xff0c;可以根据模板来组织和排版自己的文章&#xff0c;以减少排版时间和排版错误。常见的模板包括各类公文格式&#xff0c;例如通知、报告、请示等等。在使用模板的过程中&am…

java后端校验

Java 后端数据校验 一、概述 当我们想提供可靠的 API 接口&#xff0c;对参数的校验&#xff0c;以保证最终数据入库的正确性&#xff0c;是 必不可少 的活。比如下图就是 我们一个项目里 新增一个菜单校验 参数的函数&#xff0c;写了一大堆的 if else 进行校验&#xff0c;…

GPT4ALL私有化部署 01 | Python环境

进入以下链接&#xff1a; https://www.python.org/downloads/release/python-3100/ 滑动到底部 选择你系统对应的版本&#xff0c;如果你是win&#xff0c;那么大概率是win-64bit 有可能你会因为网络的问题导致下载不了&#xff0c;我提供了 链接 接着只需要打开 等待…

单例模式与构造器模式

单例模式 1、是什么 单例模式&#xff08;Singleton Pattern&#xff09;&#xff1a;创建型模式&#xff0c;提供了一种创建对象的最佳方式&#xff0c;这种模式涉及到一个单一的类&#xff0c;该类负责创建自己的对象&#xff0c;同时确保只有单个对象被创建 在应用程序运…

Mac 快速生成树形项目结构目录

我这里使用的是通过包管理 Homebrew安装形式。没有安装的话可以自行搜索 Homebrew 安装方式 brew install tree直接到项目的根目录执行 tree 命令 tree 效果如下&#xff1a; or &#xff1a; tree -CfL 3效果如下&#xff1a;

opencv-24 图像几何变换03-仿射-cv2.warpAffine()

什么是仿射&#xff1f; 仿射变换是指图像可以通过一系列的几何变换来实现平移、旋转等多种操作。该变换能够 保持图像的平直性和平行性。平直性是指图像经过仿射变换后&#xff0c;直线仍然是直线&#xff1b;平行性是指 图像在完成仿射变换后&#xff0c;平行线仍然是平行线。…

基于LNMP配置WordPress建站时出现的问题汇总

这里写目录标题 wordpress上传文件报错问题描述原因分析&#xff1a;解决方案&#xff1a; wordpress裁剪图片报错问题描述原因分析&#xff1a;解决方案&#xff1a; wordpress上传文件报错 WP内部错误&#xff0c;在上传文件时发生了错误&#xff0c;显示权限不足无法保存 …

SQL注入--题目

联合查询注入&#xff1a; bugku-这是一个神奇的登录框 手工注入&#xff1a; 点吧&#xff0c;输入0’发现还是&#xff1a; 输入0" 发现报错&#xff1a; 确定可以注入&#xff0c;判断字段有多少个 0"order by 1,2,3# 发现&#xff1a; 说明有两列。 输入 0&qu…

Docker系列---【docker和docker容器设置开机启动】

docker和docker容器设置开机启动 1、设置docker开机启动 systemctl enable docker 2、设置容器自动重启 1)创建容器时设置 docker run -d --restartalways --name 设置容器名 使用的镜像 (上面命令 --name后面两个参数根据实际情况自行修改)# Docker 容器的重启策略如下&#…

【论文阅读22】Label prompt for multi-label text classification

论文相关 论文标题&#xff1a;Label prompt for multi-label text classification&#xff08;基于提示学习的多标签文本分类&#xff09; 发表时间&#xff1a;2023 领域&#xff1a;多标签文本分类 发表期刊&#xff1a;Applied Intelligence&#xff08;SCI二区&#xff0…