微信小程序写一个可以滚动虚拟列表(瀑布流),减少dom渲染的优化,解决内存问题。
为什么要写这个?
因为在写小程序的时候首页功能比较多,造成渲染的dom有很多,一直setdata跳转到其他页面或者一直滑动就会卡顿,白屏。官方文档上那个不适用于瀑布流。官方文档
理解
刚开始在写这个的时候,就在想微信小程序的开发有虚拟dom这个概念吗,查看文档,自己实践,才大致理解一点,总结出来就是微信小程序其实并没有直接使用虚拟DOM这个概念,但提供了类似的操作DOM的方法,并且也可以根据自己的需求探索实现类似虚拟DOM的功能,所以就开始自己准备。
其实我是看了俩篇博文然后经过改造成自己的数据,然后进行理解,最后融汇贯通。我会一步一步按照自己的理解进行再代码中注释,直接复制就可以用。
第一篇
第二篇有代码片段
已附代码(如果没贴相关的代码就代表不需要写)
components->virtualItem->virtualItem.wxml
<view id="{{virtualId}}"><block wx:if="{{isShow}}"><slot></slot></block><view wx:else style="height: {{ height }}px"></view>
</view>
components->virtualItem->virtualItem.js
// components/virtualItem/virtualItem.js
Component({properties: {// 当前虚拟子模块唯一IDvirtualId: {type: String,value: '',observer() {this.getCurrentItemHeight()}},// 父级滚动容器ID,如果需要以指定容器处理wrapId: {type: String,value: '',},// 离可见区域的距离,单位pxobserveDistance: {type: Number,value: 1500,}},data: {height: 0,isShow: true,},methods: {getCurrentItemHeight() {const query = this.createSelectorQuery();const { virtualId } = this.data;query.select(`#${virtualId}`).boundingClientRect()query.exec((res) => {this.setData({height: res[0].height}, this.observePage())})},observePage() {const { virtualId, observeDistance, wrapId } = this.datalet IntersectionObserver = wx.createIntersectionObserver(this);(wrapId ? IntersectionObserver.relativeTo(`#${wrapId}`) : IntersectionObserver.relativeToViewport({ top: observeDistance, bottom: observeDistance })).observe(`#${virtualId}`, ({ intersectionRatio }) => {this.setData({isShow: intersectionRatio > 0,})})},}
})
page->index->index.wxml
<view><scroll-view class="virtualScrollView" eventhandle scroll-y bindscrolltolower="onScrollLower"><block wx:for="{{ listData }}" wx:key="screenIndex" wx:for-index="screenIndex" wx:for-item="screenItem"><VirtualItem virtualId="virtual_{{pageIndex}}"><view class="fall"><block wx:for="{{ screenItem.columns }}" wx:key="columnIndex" wx:for-index="columnIndex" wx:for-item="column" ><view style="margin-top: -{{screenItem.columnOffset[columnIndex]}}px;" class="fallCol"><view wx:for="{{column}}" style="height: {{ item.height }}px; background-color: {{ item.color }};" wx:key="index" wx:for-item="item" wx:for-index="index">screen: {{ screenIndex }}, column: {{ columnIndex }}这里边就可以直接写你需要的数据,不需要使用css设置瀑布流,直接就是现成的</view></view></block></view></VirtualItem></block></scroll-view>
</view>
.virtualScrollView {height: 100vh;
}
.fall {position: relative;display: flex;
}
.fallCol {flex: 1;display: flex;flex-direction: column;
}
.cell {margin: 5px;
}
Page({data: {listQuery: {pageIndex: 1,pageSize: 10,}, // 列表请求参数listData: [], // 列表数据column: 2, // 列数。需要三列可以改为3columnsHeights: [ 0, 0], // 每列高度如果column为3的话那么这个值就是[0, 0, 0]},onLoad() {this.getList();},async getList() {let { listQuery: { pageIndex }, column, columnsHeights } = this.data;const columns = [];// 上一组的高度数据,用于计算偏移值const lastHeights = [...columnsHeights];// 获取数据 这个就是你的真实数据,调取接口然后赋值给list。当然会异步// 所以可以使用Promise和async/await来确保在你调取接口之后能赋值给list成功。代码已在最底下写出await this.getData(); // 自己的真实数据调取的接口const list = this.data.getdata;// const list = this.getListData();// 初始化当前屏数据for (let i = 0; i < column; i++ ) {columns.push([]);}// 遍历新数据,分配至各列for (let i = 0; i < list.length; i++) {const position = this.computePosition(columnsHeights);columns[position].push(list[i]);// 如果使用自己的真实数据报错的话就把Number(list[i].height)改为自己喜欢的数字100或者100多columnsHeights[position] += Number(list[i].height);}this.setData({[`listData[${pageIndex}]`]: {columns,columnOffset: this.computeOffset(lastHeights),}});this.data.listQuery.pageIndex = pageIndex + 1;this.data.columnsHeights = columnsHeights;},/*** 获取列表数据。模拟的假数据*/getListData() {const result = [];for (let i = 0; i < this.data.listQuery.pageSize; i++) {const height = Math.floor(Math.random() * 300);const item = {height: height < 150 ? height + 150 : height,color: this.randomRgbColor(),};result.push(item);}return result;},/*** 随机生成RGB颜色*/randomRgbColor() {var r = Math.floor(Math.random() * 256); //随机生成256以内r值var g = Math.floor(Math.random() * 256); //随机生成256以内g值var b = Math.floor(Math.random() * 256); //随机生成256以内b值return `rgb(${r},${g},${b})`; //返回rgb(r,g,b)格式颜色},/*** 获取最小高度列下标*/computePosition(heights) {const min = Math.min(...heights);return heights.findIndex((item) => item === min);},/*** 计算偏移量*/computeOffset(heights) {const max = Math.max(...heights);return heights.map((item) => max - item);},onScrollLower() {// 用自己的调取接口拿到的total的总数和pageindex做判断大于总数就不掉用接口了this.getList();}// 封装起来的PromisehttpGet(url, params) {return new Promise((resolve, reject) => {http.Get(url, params, function (res) {if (res.status == 0) {resolve(res.data);} else {reject(new Error('请求失败'));}});});},
})
有好多人还有更好的思路,有的可以评论大家一起探讨。微信小程序的代码片段。有真实数据的。
代码片段打开报错的话把该换的数据换了就可以了。
相关文章:
![](https://www.ngui.cc/images/no-images.jpg)
微信小程序写一个可以滚动虚拟列表(瀑布流),减少dom渲染的优化,解决内存问题。
为什么要写这个? 因为在写小程序的时候首页功能比较多,造成渲染的dom有很多,一直setdata跳转到其他页面或者一直滑动就会卡顿,白屏。官方文档上那个不适用于瀑布流。官方文档 理解 刚开始在写这个的时候,就在想微信…...
![](https://www.ngui.cc/images/no-images.jpg)
人工与智能系统之间的交互方式
人工与智能系统之间的交互方式 #mermaid-svg-xSsFZWak2bsyV0un {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-xSsFZWak2bsyV0un .error-icon{fill:#552222;}#mermaid-svg-xSsFZWak2bsyV0un .error-text{fill:#5522…...
![](https://img-blog.csdnimg.cn/direct/f17db27ba7f84766b06e2a31ce04e464.png)
【运维】如何在Ubuntu中设置一个内存守护进程来确保内存不会溢出
文章目录 前言增加守护进程1. 编写监控脚本2. 创建 systemd 服务文件3. 启动并启用服务4. 验证服务是否运行注意事项 如何修改守护进程1. 修改监控脚本2. 重新加载并重启服务3. 验证服务是否运行总结 如何设置一个日志文件来查看信息1. 修改监控脚本以记录日志方法一࿱…...
![](https://www.ngui.cc/images/no-images.jpg)
调用基类的纯虚函数,如何知道纯虚函数会调用哪个派生类(子类)中的实现。
在 C 中,调用基类的纯虚函数实际上是通过运行时多态性来决定调用哪一个派生类的实现。这种机制是通过虚函数表(vtable)和虚函数指针(vptr)实现的。下面我们来详细探讨一下这个过程。 虚函数表和虚函数指针 虚函数表&a…...
![](https://img-blog.csdnimg.cn/direct/1fac22b2bc474af4b14414d7c5790d09.jpeg)
塑造卓越企业家IP:多维度视角下的策略解析
在构建和塑造企业家IP的过程中,我们需要从多个维度进行考量,以确保个人品牌能够全面、立体地展现企业家的独特魅力和价值。以下是从不同角度探讨如何做好一个企业家IP的策略。 一、从个人特质出发 深入了解自我:企业家需要清晰地认识到自己的…...
![](https://img-blog.csdnimg.cn/direct/8f85637fde724e54b3c0e26fe6de6f48.png)
Rust 跨平台-Android 和鸿蒙 OS
1. 安装 rustup rustup 是 Rust 的安装和版本管理工具 $ curl --proto https --tlsv1.2 https://sh.rustup.rs -sSf | sh 该命令会安装 rusup 和最新的稳定版本的 Rust;包括: rustc Rust 编译器,用于将 Rust 代码编译成可执行文件或库。 ca…...
![](https://img-blog.csdnimg.cn/img_convert/62637682cd18f02fbbc9ae3514211bb9.png)
Typora导出为Word
文章目录 一、场景二、安装1、网址2、解压并验证 三、配置四、重启Typora 一、场景 在使用Typora软件编辑文档时,我们可能需要将其导出为Word格式文件 当然我们可以直接在菜单里进行导出操作 文件-> 导出-> Word(.docx) 如果是第一次导出word文件࿰…...
![](https://www.ngui.cc/images/no-images.jpg)
数据库被后台爆破如何解决?
在数字化时代,数据库安全成为企业与组织不容忽视的关键环节。其中,“后台爆破”攻击,即通过自动化工具尝试大量的用户名和密码组合,以非法获取数据库访问权限,是常见的安全威胁之一。本文将详细介绍如何识别、防御并解…...
![](https://www.ngui.cc/images/no-images.jpg)
php7.4源码安装dbase7.1.1扩展
安装PHP开发工具 首先,你需要安装PHP开发工具,包括php-devel(或php7.4-devel,取决于你的PHP版本)和其他编译工具。 bash sudo yum install php7.4-devel gcc make 注意:如果你使用的是不同的PHP版本&#…...
![](https://img-blog.csdnimg.cn/direct/7a5afa6baccf446c8f6e5b2657ee0c2f.png)
OkHttp的源码解读1
介绍 OkHttp 是 Square 公司开源的一款高效的 HTTP 客户端,用于与服务器进行 HTTP 请求和响应。它具有高效的连接池、透明的 GZIP 压缩和响应缓存等功能,是 Android 开发中广泛使用的网络库。 本文将详细解读 OkHttp 的源码,包括其主要组件…...
![](https://img-blog.csdnimg.cn/direct/92f1672cd5f541cf84822641231fd7c6.png)
08:结构体
结构体 1、为什么需要结构体2、如何定义结构体3、怎么使用结构体变量3.1、赋值和初始化3.2、结构体变量的输出 1、为什么需要结构体 为了表示一些复杂的事物,而普通的基本类型无法满足实际要求。什么叫结构体 把一些基本类型数据组合在一起形成的一个新的数据类型&…...
![](https://img-blog.csdnimg.cn/img_convert/dcbce96bfec4e71822b45a59be0e9832.jpeg)
喜讯!安全狗荣获“2023年网络安全技术支撑优秀单位”称号
6月6日,由中共厦门市委网络安全和信息化委员会办公室(以下简称“厦门市委网信办”)主办的2023年网络安全技术支撑优秀单位颁奖仪式在厦门成功举行。 作为国内云原生安全领导厂商,安全狗受邀出席此次活动。 会上,安全狗…...
![](https://www.ngui.cc/images/no-images.jpg)
android里面json操作
1.读取assets下面xzhd/aikit/pck.json String json = null; try { InputStream is = activity.getAssets().open(aikitPathInData+"xzhd/aikit/pck.json"); int size = is.available(); byte[] buffer = new byte…...
![](https://www.ngui.cc/images/no-images.jpg)
MATLAB的.m文件与Python的.py文件:比较与互参
simulink MATLAB的.m文件与Python的.py文件:比较与互参相似之处**1. 基本结构****2. 执行逻辑****3. 可读性和维护性** 差异性**1. 语法特性****2. 性能和应用****3. 开发环境** 互相学习的可能性结论 MATLAB的.m文件与Python的.py文件:比较与互参 在编…...
![](https://img-blog.csdnimg.cn/direct/88913d39578245abb04df4c23aba41cd.jpeg)
武汉星起航:自运营团队精准把握亚马逊红利,引领跨境电商新潮流
在全球化的浪潮下,跨境电商行业蓬勃发展,为众多企业带来了前所未有的机遇。武汉星起航电子商务有限公司便是其中的佼佼者,其自运营团队凭借对亚马逊平台的深入了解和丰富的运营经验,成功抓住了亚马逊的流量红利,为公司…...
![](https://img-blog.csdnimg.cn/img_convert/f4131d1569eed21e2ec68428bb6014ea.png)
嵌入式计算器模块实现
嵌入式计算器模块规划 计算器混合算法解析 上面我们的算法理论已经完善, 我们只用给一个混合运算式, 计算器就可以帮助我们计算出结果. 但是存在一个痛点, 每次计算算式,都要重新编译程序, 所以我们想到了, 利用单片机, 读取用户输入的按键, 组成算式, 输入给机器, 这样我们就…...
![](https://www.ngui.cc/images/no-images.jpg)
tomcat定时重启
Tomcat定时重启(linux) 1. 编写脚本 在tomcat的bin目录下,使用vim restart.sh,编写restart.sh脚本,插入一下内容,最后并保存! #!/bin/bash# 初始化全局环境变量 . /etc/profilecd /usr/loca…...
![](https://www.ngui.cc/images/no-images.jpg)
构建LangChain应用程序的示例代码:48、如何使用非文本生成工具创建多模态代理
多模态输出:图像和文本 这个示例展示了如何使用非文本生成工具来创建多模态代理。 本例仅限于文本和图像输出,并使用UUID在工具和代理之间传输内容。 本例使用Steamship生成和存储生成的图像。生成的内容默认受到身份验证保护。 您可以在这里获取Ste…...
![](https://www.ngui.cc/images/no-images.jpg)
【笔记】记录一次全新的Java项目部署过程
记录一次全新的Java项目部署过程 环境:CentOS7一、初始环境准备 yum install wget -y yum install vim -y yum install net-tools -y mkdir /data mkdir /data/html mkdir /data/backend一、安装JDK 17 安装JDK17# 下载rpm wget https://download.oracle.com/java/17/latest/…...
![](https://www.ngui.cc/images/no-images.jpg)
达梦数据库系列—14. 表空间的备份和还原
目录 1、表空间备份 2、表空间还原 3、表空间恢复 4、增量还原恢复 1、表空间备份 表空间只能在联机状态下进行备份。 BACKUP TABLESPACE TBS BACKUPSET /dm/backup/dm_bak/ts_bak_01; 完全备份 BACKUP TABLESPACE TBS FULL BACKUPSET /dm/backup/dm_bak/ts_full_bak_01…...
![](https://img-blog.csdnimg.cn/direct/87a871fe0dee4954a08909b9e1ff229d.jpeg)
奔驰G350升级原厂自适应悬挂系统有哪些作用
奔驰 G350 升级自适应悬挂系统后,可根据行车路况自动调整悬架高度和弹性,从而提升驾乘的舒适性和稳定性。 这套系统的具体功能包括: • 多种模式选择:一般有舒适、弯道、运动及越野等模式。例如,弯道模式在过弯时能为…...
![](https://www.ngui.cc/images/no-images.jpg)
一个启动脚本例子
一、全部代码 #!/bin/bash DATE$(date %Y%m%d)SOURCE"abc.jar" TARGET"backup/abc.jar.jew.$DATE"if [ -f "$SOURCE" ]; thencp "$SOURCE" "$TARGET" firm -f abc.jar mv abc_1.jar abc.jarpidNumps -ef | grep $SOURCE |…...
![](https://img-blog.csdnimg.cn/direct/ce99c7214e924e0eb9552a91e53d062b.png#pic_center)
grpc学习golang版( 六、服务器流式传输 )
系列文章目录 第一章 grpc基本概念与安装 第二章 grpc入门示例 第三章 proto文件数据类型 第四章 多服务示例 第五章 多proto文件示例 第六章 服务器流式传输 第七章 客户端流式传输 第八章 双向流示例 文章目录 一、前言二、定义proto文件三、拷贝任意文件进项目四、编写serve…...
![](https://www.ngui.cc/images/no-images.jpg)
ubuntu语音库ALSA报错具体原因
在ubuntu中使用pyaudio或portaudio时总会有下面的提示,不胜其烦。 ALSA lib pcm_dsnoop.c:612:(snd_pcm_dsnoop_open) unable to open slave ALSA lib pcm_dmix.c:1018:(snd_pcm_dmix_open) unable to open slave ALSA lib pcm.c:2217:(snd_pcm_open_noupdate) Unkn…...
![](https://img-blog.csdnimg.cn/direct/df203bafe119437aa444759dce29987b.png)
Java高级重点知识点-17-异常
文章目录 异常异常处理自定义异常 异常 指的是程序在执行过程中,出现的非正常的情况,最终会导致JVM的非正常停止。Java处 理异常的方式是中断处理。 异常体系 异常的根类是 java.lang.Throwable,,其下有两个子类:ja…...
![](https://www.ngui.cc/images/no-images.jpg)
DM达梦数据库函数分析(与mysql对应函数区别及用法分析)
💝💝💝首先,欢迎各位来到我的博客,很高兴能够在这里和您见面!希望您在这里不仅可以有所收获,同时也能感受到一份轻松欢乐的氛围,祝你生活愉快! 💝💝💝如有需要请大家订阅我的专栏【数据库系列】哟!我会定期更新相关系列的文章 💝💝💝关注!关注!!请…...
![](https://img-blog.csdnimg.cn/direct/beef7953658e4b44b0b9d5346f8b3c89.png)
ROS2用c++开发参数节点通信
1.创建节点 cd chapt4/chapt4_ws/ ros2 pkg create example_parameters_rclcpp --build-type ament_cmake --dependencies rclcpp --destination-directory src --node-name parameters_basic --maintainer-name "joe" --maintainer-email "1027038527qq.com&…...
![](https://img-blog.csdnimg.cn/direct/20b10ac80bd949c1812829d3fe54f2ab.png)
docker 部署jitsi meet
1. 部署环境: 1.1 vm 虚拟机 安装的 centos 7 1.2 centos7安装docker 和 docker-compose 2.docker命令 官网部署文档地址:(文档地址有可能失效) Self-Hosting Guide - Docker | Jitsi Meet 2.1Download and extract the late…...
![](https://img-blog.csdnimg.cn/direct/18e7e45f1a7444bbaed3c6369e524b2a.png)
【Pytest自动化测试详解】
目录 一、前言pytest是一个非常成熟的全功能的Python测试框架,主要特点: 二、pytest安装 2.1、安装 pip install -U pytest 2.2、验证安装 pytest --version # 会展示当前已安装版本 2.3、pytest文档 官方文档:https:…...
![](https://img-blog.csdnimg.cn/direct/d0c16fe4b5274be89ae40be752132a45.png)
6-14题连接 - 高频 SQL 50 题基础版
目录 1. 相关知识点2. 例子2.6. 使用唯一标识码替换员工ID2.7- 产品销售分析 I2.8 - 进店却未进行过交易的顾客2.9 - 上升的温度2.10 - 每台机器的进程平均运行时间2.11- 员工奖金2.12-学生们参加各科测试的次数2.13-至少有5名直接下属的经理2.14 - 确认率 1. 相关知识点 left …...
![](https://img-blog.csdnimg.cn/direct/7ec4ec20b96045a38468202d89f15e36.png)
深度挖掘数据资产,洞察业务先机:利用先进的数据分析技术,精准把握市场趋势,洞悉客户需求,为业务决策提供有力支持,实现持续增长与创新
在当今日益激烈的商业竞争环境中,企业想要实现持续增长与创新,必须深入挖掘和有效运用自身的数据资产。数据不仅是企业运营过程中的副产品,更是洞察市场趋势、理解客户需求、优化业务决策的重要资源。本文将探讨如何通过利用先进的数据分析技…...
![](https://img-blog.csdnimg.cn/direct/394bd6fe487049dfa6909e795d5d2485.png)
亚马逊广告如何设置关键词竞价获取最优广告投入产出比 (ACOS)
在投放亚马逊商品广告的时候,从我们通常的理解来说,关键词竞价CPC设置的越高,广告投入产出比 (ACOS)越高,所以我们通常希望CPC越低越好,但是从我们实际投放广告来看,CPC与ACOS并不是线性相关。有时候CPC设定…...
![](https://img-blog.csdnimg.cn/direct/c649a9c925cf455ca5e3654a46d6d822.png)
vision mamba-yolov8:结合Vmamba的yolov8目标检测改进实现
1.vision mamba结构与原理 Mamba成功的关键在于S6模型,该模型为NLP任务设计,通过选择性扫描空间状态序列模型,将二次复杂度降低至线性。但由于视觉信号(如图像)的无序性,Mamba的S6模型不能直接应用…...
![](https://www.ngui.cc/images/no-images.jpg)
2025秋招NLP算法面试真题(十一)-Transformer的并行化
正文 本文主要谈一下关于 Transformer的并行化。文章比较短,适合大家碎片化阅读。 Decoder不用多说,没有并行,只能一个一个的解码,很类似于RNN,这个时刻的输入依赖于上一个时刻的输出。 对于Encoder侧: …...
![](https://img-blog.csdnimg.cn/img_convert/cdf98f1ce487de5e3056c98011e36600.png)
如何在本地一键配置最强国产大模型
自从OpenAI的ChatGPT横空出世以来,国内外各类大语言模型(LLM)层出不穷,其中不乏Google的Gemini、Claude、文心一言等等。相较于竞争激烈的商业模型赛道,以Llama为代表的开源大模型的进步速度也十分惊人。 伴随着大语言…...
![](https://img-blog.csdnimg.cn/direct/48831c8952374e2297381f153c771dce.png#pic_center)
代码随想录算法训练营第九天|151.翻转字符串里的单词、右旋字符串、28. 实现 strStr()、459.重复的子字符串
打卡Day9 1.151.翻转字符串里的单词2.右旋字符串3.28. 实现 strStr()4.459.重复的子字符串 1.151.翻转字符串里的单词 题目链接:翻转字符串里的单词 文档讲解: 代码随想录 思路:首先,移除多余的空格;然后,…...
![](https://www.ngui.cc/images/no-images.jpg)
第6天:文件操作和异常处理
学习目标 掌握如何在Python中进行文件读写操作理解文件的打开模式学习如何处理文件中的数据理解异常处理的基本概念掌握使用try、except、else和finally进行异常处理 学习内容 1. 文件操作 在Python中,文件操作包括打开文件、读写文件内容和关闭文件。 文件的打…...
![](https://img-blog.csdnimg.cn/direct/49e31ec70e6d40d584a3e87337ce3f15.png)
关于freesql 频繁报“【主库】状态不可用,等待后台检查程序恢复方可使用”异常的解决。
我的项目仓储FreeSqlRepository中同时引用了“FreeSql.Provider.MySql” 和“FreeSql.Provider.MySqlConnector” 两个组件。 当我使用freesql操作数据库增删改查时,系统总是报类似如下错误:【主库】状态不可用,等待后台检查程序恢复方可使用…...
![](https://www.ngui.cc/images/no-images.jpg)
Spring Boot中如何使用Flyway进行数据库版本控制
Spring Boot中如何使用Flyway进行数据库版本控制 大家好,我是免费搭建查券返利机器人省钱赚佣金就用微赚淘客系统3.0的小编,也是冬天不穿秋裤,天冷也要风度的程序猿!在现代的软件开发中,数据库版本控制是保证应用程序…...
![](https://www.ngui.cc/images/no-images.jpg)
心理学|人格心理学——人格心理学单科作业(中科院)
一、单选题(第1-40小题,每题1.5分,共计60分。) 1、没有两个人能对同一事物做出相同的反应,反映的是人格的( ) 分值1.5分 A、稳定性 B、独特性 C、统合性 D、功能性 正确答案: B、独特性 2、人格决定一个人的生活方式,甚至有时会决定一个人的命运,反映的…...
![](https://img-blog.csdnimg.cn/direct/89ac9f344f3c4473964353a081a0e872.jpeg)
第三方服务提供商的五大风险
亚马逊如何应对网络安全挑战 关键网络安全统计数据和趋势 移动优先世界中安全和隐私策略 当今数字时代网络安全的重要性 用户无法停止犯安全错误的 3 个原因 首席安全官可能过于依赖 EDR/XDR 防御 随着业务流程变得越来越复杂,公司开始转向第三方来提高其提供关…...
![](https://img-blog.csdnimg.cn/direct/f7243a109e48454f91d7a6186a57506e.png)
海康视频播放,包含h5和web插件
自行下载 海康开放平台 demo 都写得很清楚,不多描述 1.视频web插件 vue2写法,公共vue文件写法,调用文件即可 开始时需要以下配置,不知道的找对接平台数据的人,必须要,否则播不了 getParameterData: {po…...
![](https://www.ngui.cc/images/no-images.jpg)
数据库-python SQLite3
数据库-python SQLite3 一:sqlite3 简介二: sqlite3 流程1> demo2> sqlite3 流程 三:sqlite3 step1> create table2> insert into3> update4> select1. fetchall()2. fetchone()3. fetchmany() 5> delete6> other step 四&#…...
![](https://www.ngui.cc/images/no-images.jpg)
FFMpeg rtmp 推送本地yuv文件
可以借鉴的:C使用FFmpeg实现YUV数据编码转视频文件_C 语言_脚本之家 yuv文件下载地址:YUV Sequences 代码: #include <stdio.h> #include <unistd.h> #include <iostream> extern "C" { #include "libav…...
![](https://www.ngui.cc/images/no-images.jpg)
websocket使用,spring boot + vite + vue3
websocket使用,spring boot vite vue3 Websocket是什么WebSocket 服务端构建websocket 服务实现处理器pom文件 客户端仓库地址 Websocket是什么 WebSocket 是一种网络传输协议,可在单个 TCP 连接上进行全双工通信,位于 OSI 模型的应用层。…...
![](https://www.ngui.cc/images/no-images.jpg)
基础位运算
基础知识点: 1.判断2的幂 n&(n-1)0 2.每次减一处理 n&(n-1) 3.判断出现1次次数的数 x^0x,x^x0,a^bc则ab^c,ba^c 力扣练习题: 136.只出现一次的数字 class Solution { public:int si…...
![](https://img-blog.csdnimg.cn/img_convert/c838236f7f6d4a439a921ee2ab24a997.png)
性价比高真无线蓝牙耳机有哪些?性价比真无线蓝牙耳机推荐
目前真无线蓝牙耳机的音质和性能已经越来越接近甚至超越传统有线耳机。然而,市面上的TWS耳机品牌和型号繁多,价格也从几十元到几千元不等,性价比自然成了消费者选择时的重要考量因素,究竟哪些真无线蓝牙耳机既能够提供满意的音质和…...
![](https://img-blog.csdnimg.cn/direct/ab176f4abbfa42ea95d00d16815e90aa.png)
Big Data Tools插件
一些介绍 在Jetbrains的产品中,均可以安装插件,其中:Big Data Tools插件可以帮助我们方便的操作HDFS,比如 IntelliJ IDEA(Java IDE) PyCharm(Python IDE) DataGrip(SQL …...
![](https://www.ngui.cc/images/no-images.jpg)
两个li标签之间有空格这是什么原因
<li> 标签之间出现的空格可能由多种原因造成。以下是一些常见的原因: HTML源代码中的空格:如果你在HTML源代码中直接在两个 <li> 标签之间输入了空格或制表符(Tab),这些空格可能会被浏览器渲染出来。不过&…...
![](https://img-blog.csdnimg.cn/img_convert/e7b00c920f02115c3e64702038fa7ce7.png)
使用Colly库进行高效的网络爬虫开发
引言 随着互联网技术的飞速发展,网络数据已成为信息获取的重要来源。网络爬虫作为自动获取网页内容的工具,在数据分析、市场研究、信息聚合等领域发挥着重要作用。本文将介绍如何使用Go语言中的Colly库来开发高效的网络爬虫。 什么是Colly库࿱…...
![](https://img-blog.csdnimg.cn/direct/2296c64a11e04b6c8af6a514abfb96db.png)
爬虫-网页基础
HTML 基本语法 HTML:Hyper Text Markup Language, 超文本标记语言,是计算机语言的一种,由元素构成。 p元素 <p>Web 真好玩!</p> 由三大部分组成 开始标签:一对尖括号中间包裹这元素名称元素内容&#x…...
![](https://img-blog.csdnimg.cn/direct/1c955f4164d64b9e865b7b9519a757d4.png)
MIX OTP——使用 GenServer 进行客户端-服务器通信
在上一章中,我们使用代理来表示存储容器。在 mix 的介绍中,我们指定要命名每个存储容器,以便我们可以执行以下操作: 在上面的会话中,我们与“购物”存储容器进行了交互。 由于代理是进程,因此每个存储容器…...
![](https://www.ngui.cc/images/no-images.jpg)
c++初级-2-引用
文章目录 引用一、引用的定义二、引用做函数参数三、引用作为返回对象四、引用的本质五、常量引用 引用 即给一个变量起别名。 一、引用的定义 int a 10;//引用int& b a;cout << "a " << a << endl;cout << "b " <&l…...
![](https://img-blog.csdnimg.cn/direct/d4ef97dd55da4e8ea07b01e951606b57.png)
Python实现万花筒效果:创造炫目的动态图案
文章目录 引言准备工作前置条件 代码实现与解析导入必要的库初始化Pygame定义绘制万花筒图案的函数主循环 完整代码 引言 万花筒效果通过反射和旋转图案创造出美丽的对称图案。在这篇博客中,我们将使用Python来实现一个动态的万花筒效果。通过利用Pygame库…...
![](https://img-blog.csdnimg.cn/direct/5bc7473d4a4c4096998eb3c068f76631.png)
算法基础-----【动态规划】
动态规划(待完善) 动规五部曲分别为: 确定dp数组(dp table)以及下标的含义确定递推公式(状态转移公式)dp数组如何初始化确定遍历顺序举例推导dp数组、 动态规划的核心就是递归剪枝(存储键值,…...
![](https://i-blog.csdnimg.cn/direct/6120748723d04797b9f3d47f87bf6ef9.png)
Yolov8可视化界面使用说明,含代码
⭐⭐ YOLOv8改进专栏|包含主干、模块、注意力机制、检测头等前沿创新 ⭐⭐ YOLOv8可视化界面如下 使用需要安装opencv-python、torch、numpy及PySide6(python版本>3.9) pip install PySide6 pip install numpy pip install opencv-python 使用说明 运行下方代码…...
![](https://mz.eastday.com/64152928.jpeg)
夜读朱大建:海菜花,清水的精灵
海菜花不光美丽,还是美味。去年6月5日世界环境日当天,我写的生态纪实文学《海菜花开》,由上海交通大学出版社召开出版座谈会,全国有十多家媒体刊发报道或书评。当月,该书就印了三次。去年9月,由上海交大创作、学生主演的校园话剧《海菜花开》在闵行校区菁菁堂演出。今年3…...
![](https://www.ngui.cc/images/no-images.jpg)
被冷落的美系中级车!迈锐宝XL跌幅达6万,可惜30天才卖311辆
这两年国内新能源的崛起,让曾经在中级车销量边缘的车型,真的是更加艰难了,其中典型的例子就有迈锐宝XL、起亚K5、现代索纳塔、别克君威等车型,如果没有新势力的崛起,或许它们还能够在市场上取得不错的销量表现,但是从现在的汽车市场局面来看,它们已经很难有一番作为了。…...
![](https://img-blog.csdnimg.cn/direct/b2b3de69827a4ec1be47dcb8a821648e.jpeg)
Three.js 中的场景与相机基础
Three.js 中的场景与相机基础 一、场景(Scene) 在 Three.js 中,场景是所有 3D 对象存在和交互的容器。艾斯视觉作为行业ui设计与前端开发服务商很高兴能在这里与你共同探讨:它就像是一个虚拟的 3D 空间,我们可以在其中…...
![](https://www.ngui.cc/images/no-images.jpg)
命令行如何设置openkylin os(UKUI)的壁纸
命令行执行 gsettings set org.mate.background picture-filename ‘path’ path就是图片路径 即可将path路径的图片设置为壁纸 我在研究做kylin的动态壁纸的时候发现的, gsettings set org.mate.background picture-filename ‘path’ 设置桌面背景纯色 gsetting…...
![](https://www.ngui.cc/images/no-images.jpg)
可变参数函数
可变参数函数指的是函数的参数个数可变,参数类型不定的函数。 C提供了两种主要的方法: (1)如果所有的实参类型相同,可以传递一个名为initializer_list的标准库类型。 (2)如果所有的实参类型不完…...
![](https://img-blog.csdnimg.cn/direct/655b1421140f4c279b78ece063cd31b0.png)
nginx 安全配置
1、前言 前后端分离后,nginx 作为跨域转发工具在日常应用中越来越广泛,它的安全性不能不能忽略。 2、nginx 安装相关说明 2.1 直接下载安装包 在nginx官网下载编译好的安装包,链接地址为nginx: download。如果是linux系统,直接使…...