鸿蒙 HarmonyOS 下拉控件

news2024/9/22 19:38:51

✍️作者简介：小北编程（专注于HarmonyOS、Android、Java、Web、TCP/IP等技术方向）
🐳博客主页： 开源中国、稀土掘金、51cto博客、博客园、知乎、简书、慕课网、CSDN
🔔如果文章对您有一定的帮助请👉关注✨、点赞👍、收藏📂、评论💬。
🔥如需转载请参考【转载须知】

文章目录

  • 一、前言
  • 二、先看功能
  • 二、第三方 HarmonyOsRefresh
    • 开发环境
    • 使用指南
      • 1. 远程依赖方式使用（推荐）
      • 2. 本地静态共享包使用（不推荐）
    • ListView（列表视图）
      • 属性
      • RefreshController（刷新控制器）
        • 属性
      • RefreshDataSource（刷新数据源）
        • 概述
        • 使用方式
        • 方法
    • GridView（网格视图）
      • 1. 懒加载数据使用（LazyForEach）
        • 示例代码
      • 2. 普通使用（ForEach）
        • 示例代码
      • 3. 相关属性介绍
        • GridView属性
        • GridAttr属性
        • GridItemAttr属性
    • StaggeredGridView（瀑布流视图）
      • 1. 懒加载数据使用（LazyForEach）
        • 示例代码
      • 2. 普通使用（ForEach）
        • 示例代码
      • 3. 相关属性介绍
        • StaggeredGridView属性
        • StaggeredGridView方法
    • RefreshLayout（刷新布局）
      • 功能描述
      • 示例代码
    • 侧滑展示按钮
      • 方式一：使用`slideRightMenuLayout`
        • 示例代码
      • 方式二：使用`swipeRightMenuLayout`和`swipeLeftMenuLayout`
        • 示例代码
    • 下滑二楼功能
      • 功能描述
      • 示例代码
      • RefreshLayoutStatus状态
      • RefreshHeaderAttr属性
    • 列表数据操作（增删改查）
      • 概述
      • 1. 普通数据列表操作
        • 定义与使用
        • 操作方法
        • 示例操作
      • 2. 懒加载数据列表操作
        • 定义与使用
        • 操作方法
        • 示例操作
    • 三、总结

一、前言

在移动开发中，列表刷新是常见的功能，用户可以通过下拉刷新或上拉加载更多数据来更新内容。在 HarmonyOS 中，虽然系统提供了一些基本的刷新控件，但其功能和定制性可能无法满足复杂的需求。为了解决这个问题，社区中也有一些第三方刷新控件，其中 HarmonyOsRefresh 是一个优秀的解决方案。本文将介绍如何在 HarmonyOS 项目中使用 HarmonyOsRefresh 实现自定义的列表刷新功能。

HarmonyOS 提供了 PullToRefresh 等基础控件用于下拉刷新操作。这些控件适合基础的列表刷新场景，但在定制性上较为有限。比如：

  • 控件样式不可自由修改；
  • 无法灵活地控制加载更多的行为；
  • 对于复杂的刷新动画，支持度有限；
  • 下拉刷新与上拉加载更多功能需要自己实现。

这些限制使得开发者在面对特定需求时不得不寻找替代方案。

二、先看功能

二、第三方 HarmonyOsRefresh

本文档详细介绍了多个UI组件（如ListView、GridView、StaggeredGridView、RefreshLayout）的属性、方法及使用方法，包括懒加载和普通数据操作的实现方式。

开发环境

  • 开发工具: DevEco Studio NEXT Developer Beta1，Build Version: 5.0.3.403
  • API版本: 11
  • Model版本: 5.0.0

使用指南

1. 远程依赖方式使用（推荐）

方法一: 在项目的模块路径下，打开 Terminal 窗口并执行以下命令：

ohpm install @abner/refresh

方法二: 直接在项目的 oh-package.json5 中添加依赖：

"dependencies": {
  "@abner/refresh": "^1.3.4"
}

2. 本地静态共享包使用（不推荐）

下载 har 包并将其复制到项目目录中（如 libs 目录），然后在项目中同步依赖。

ListView（列表视图）

属性

属性类型概述
enableRefreshboolean是否禁止刷新，也可通过onRefresh控制。onRefresh表示需要刷新。
enableLoadMoreboolean是否禁止上拉加载，也可通过onLoadMore控制。onLoadMore表示需要上拉加载。
initialIndexnumber设置当前List初次加载时视口起始位置显示的item的索引值。
scrollerScroller可滚动组件的控制器，用于与可滚动组件绑定。
emptyLayout@BuilderParam空布局
errorLayout@BuilderParam错误布局
loadingLayout@BuilderParam加载布局
showEmptyLayoutboolean是否显示空布局
showErrorLayoutboolean是否显示错误布局
showLoadingLayoutboolean是否显示加载布局

RefreshController（刷新控制器）

属性
方法名称类型概述
finishRefresh()无参关闭下拉刷新
finishLoadMore(ooterNothing?: boolean)boolean关闭上拉加载，参数默认为false。若为true则显示无数据。
autoRefresh(isAutoRefresh?: boolean)boolean自动刷新，默认为true。
markStartLocation(start?: boolean)boolean标记开始位置
markEndLocation(isEnd?: boolean)boolean标记结束位置
getRefreshLayoutStatus()无参获取下拉刷新状态
getLoadMoreLayoutStatus()无参获取上拉加载状态
scrollToIndex(value: number)number滑动到某一个位置
scrollEdge(value: Edge)Edge滚动到容器边缘

RefreshDataSource（刷新数据源）

概述

数据懒加载操作对象。使用懒加载时，必须通过此对象进行数据的增删改查，否则无法生效。需要实现onLazyDataSource属性。

使用方式

  1. 直接设置

    lazyDataSource: this.lazyDataSource

  2. 通过onLazyDataSource回调设置

    onLazyDataSource: (dataSource: RefreshDataSource) => {
  this.dataSource = dataSource;
}
方法
方法名称参数概述
initData(items: Array)Array初始化数据
pushData(item: Object)Object添加单条数据
pushDataPosition(position: number, item: Object)number, Object指定位置添加数据
pushDataVariable(...items: Object[])可变参数数据添加多个数据
pushDataArray(items: Object[])Object[]添加数组数据
deleteFirst()无参删除第一条数据
deleteLast()无参删除最后一条数据
deleteData(position: number)number删除指定位置的数据
deleteAll(callback?: Function)回调接口（可选）删除全部数据
changeData(position: number, item: Object)number, Object修改指定位置的数据
getDataAll()无参返回所有数据（Object[]）
getData(index: number)number返回指定索引的数据
totalCount()无参返回数据数量（number）
reloadData()无参重置所有子组件的索引
moveData(from: number, to: number)number, number交换数据位置

GridView（网格视图）

1. 懒加载数据使用（LazyForEach）

示例代码
// 声明全局变量
controller: RefreshController = new RefreshController();
dataSource: RefreshDataSource = new RefreshDataSource();

// 使用GridView
GridView({
  lazyDataSource: this.dataSource,
  itemLayout: (item, index) => this.itemLayout(item, index), // 条目布局
  controller: this.controller, // 控制器，负责关闭下拉和上拉
  onRefresh: () => {
    // 下拉刷新
    // 数据懒加载操作
    this.dataSource.pushDataArray([...]); // 添加数组数据
    this.controller.finishRefresh(); // 关闭下拉刷新
  },
  onLoadMore: () => {
    // 上拉加载
    // 数据懒加载操作
    this.dataSource.pushDataArray([...]); // 添加数组数据
    this.controller.finishLoadMore(); // 关闭上拉加载
  }
});

/**
 * 条目布局
 * @param item 数据对象
 * @param index 数据索引
 */
@Builder
itemLayout(item: Object, index: number): void {
  // 构建条目视图，使用任意组件
}

2. 普通使用（ForEach）

示例代码
// 声明全局变量
@State controller: RefreshController = new RefreshController();

// 使用GridView
GridView({
  items: this.array, // 数据源数组
  itemLayout: (item, index) => this.itemLayout(item, index),
  controller: this.controller, // 控制器
  isLazyData: false, // 禁用懒加载，使用ForEach加载
  onRefresh: () => {
    // 下拉刷新逻辑
    this.controller.finishRefresh();
  },
  onLoadMore: () => {
    // 上拉加载逻辑
    this.controller.finishLoadMore();
  }
});

/**
 * 条目布局
 * @param item 数据对象
 * @param index 数据索引
 */
@Builder
itemLayout(item: Object, index: number): void {
  // 构建条目视图，使用任意组件
}

3. 相关属性介绍

GridView属性
属性类型概述
itemsArray<Object>数据源数组
itemLayout@BuilderParam条目布局回调 (item: Object, index: number) => void
controllerRefreshController控制器，负责关闭下拉和上拉
onRefreshFunction刷新回调函数
onLoadMoreFunction上拉加载回调函数
gridAttributeGridAttrGridView相关属性
gridItemAttributeGridItemAttrGridView的Item相关属性
isLazyDataboolean是否使用懒加载，默认是懒加载
lazyCachedCountnumber懒加载缓存数据量，默认为1
onLazyDataSourceFunction懒加载数据回调函数
lazyDataSourceRefreshDataSource懒加载数据操作对象
itemHeaderLayout@BuilderParam头组件布局回调
headerRefreshLayout@BuilderParam自定义刷新头组件布局回调
footerLoadLayout@BuilderParam自定义加载尾组件布局回调
refreshHeaderAttributeRefreshHeaderAttr默认的刷新头属性配置
loadMoreFooterAttributeLoadMoreFooterAttr默认的加载尾属性配置
enableRefreshboolean是否禁止刷新，可通过onRefresh控制
enableLoadMoreboolean是否禁止上拉加载，可通过onLoadMore控制
scrollerScroller可滚动组件的控制器，用于与可滚动组件绑定
emptyLayout@BuilderParam空布局
errorLayout@BuilderParam错误布局
showEmptyLayoutboolean是否显示空布局
showErrorLayoutboolean是否显示错误布局
GridAttr属性
属性类型概述
widthLength宽度
heightLength高度
backgroundColorResourceColor背景颜色，默认透明
columnsTemplatestring网格列模板，如1fr 1fr表示两列
rowsTemplatestring网格行模板，如1fr 1fr表示两行
columnsGapLength列与列的间距，默认值为0
rowsGapLength行与行的间距，默认值为0
scrollBarBarState滚动条状态，默认值为BarState.Off
scrollBarColor`stringnumber
scrollBarWidth`stringnumber`
cachedCountnumber预加载的GridItem数量，仅在懒加载中生效
scrollSpringHeightnumber弹性物理动效的最大高度基准值
GridItemAttr属性
属性类型概述
widthLength宽度
heightLength高度
margin`MarginLength`
padding`PaddingLength`
backgroundColorResourceColor背景颜色，默认透明
onClickFunction点击事件回调

StaggeredGridView（瀑布流视图）

1. 懒加载数据使用（LazyForEach）

示例代码
// 声明全局变量
controller: RefreshController = new RefreshController();
dataSource: RefreshDataSource = new RefreshDataSource();

// 使用StaggeredGridView
StaggeredGridView({
  lazyDataSource: this.dataSource,
  itemLayout: (item, index) => this.itemLayout(item, index), // 条目布局
  controller: this.controller, // 控制器
  onRefresh: () => {
    // 下拉刷新逻辑
    this.dataSource.pushDataArray([...]); // 添加数据
    this.controller.finishRefresh(); // 关闭下拉刷新
  },
  onLoadMore: () => {
    // 上拉加载逻辑
    this.dataSource.pushDataArray([...]); // 添加数据
    this.controller.finishLoadMore(); // 关闭上拉加载
  }
});

/**
 * 条目布局
 * @param item 数据对象
 * @param index 数据索引
 */
@Builder
itemLayout(item: Object, index: number): void {
  // 构建条目视图，使用任意组件
}

2. 普通使用（ForEach）

示例代码
// 声明全局变量
@State controller: RefreshController = new RefreshController();

// 使用StaggeredGridView
StaggeredGridView({
  items: this.array, // 数据源数组
  itemLayout: (item, index) => this.itemLayout(item, index),
  controller: this.controller, // 控制器
  isLazyData: false, // 禁用懒加载，使用ForEach加载
  onRefresh: () => {
    // 下拉刷新逻辑
    this.controller.finishRefresh();
  },
  onLoadMore: () => {
    // 上拉加载逻辑
    this.controller.finishLoadMore();
  }
});

/**
 * 条目布局
 * @param item 数据对象
 * @param index 数据索引
 */
@Builder
itemLayout(item: Object, index: number): void {
  // 构建条目视图，使用任意组件
}

3. 相关属性介绍

StaggeredGridView属性
属性类型概述
columnsTemplatestring展示几列，默认两列，如1fr 1fr
columnsGapLength列与列的间距，默认为0
rowsGapLength行与行的间距
bgColorResourceColor整体背景颜色
sWidthLength宽度
sHeightLength高度
itemsArray<Object>数据源数组
itemLayout@BuilderParam条目布局回调 (item: Object, index: number) => void
controllerRefreshController控制器，负责关闭下拉和上拉
onRefreshFunction刷新回调函数
onLoadMoreFunction上拉加载回调函数
isLazyDataboolean是否使用懒加载，默认是懒加载
lazyCachedCountnumber懒加载缓存数据量，默认为1
onLazyDataSourceFunction懒加载数据回调函数
lazyDataSourceRefreshDataSource懒加载数据操作对象
itemHeaderLayout@BuilderParam头组件布局回调
headerRefreshLayout@BuilderParam自定义刷新头组件布局回调
footerLoadLayout@BuilderParam自定义加载尾组件布局回调
refreshHeaderAttributeRefreshHeaderAttr默认的刷新头属性配置
loadMoreFooterAttributeLoadMoreFooterAttr默认的加载尾属性配置
enableRefreshboolean是否禁止刷新，可通过onRefresh控制
enableLoadMoreboolean是否禁止上拉加载，可通过onLoadMore控制
scrollerScroller可滚动组件的控制器，用于与可滚动组件绑定
emptyLayout@BuilderParam空布局
errorLayout@BuilderParam错误布局
showEmptyLayoutboolean是否显示空布局
showErrorLayoutboolean是否显示错误布局
scrollSpringHeightnumber弹性物理动效的最大高度基准值
StaggeredGridView方法

与GridView相同，详见RefreshController和RefreshDataSource。

RefreshLayout（刷新布局）

功能描述

支持任何组件的刷新和加载，前提是遇到滑动组件时，需要自行控制起始位置。

示例代码

RefreshLayout({
  controller: this.controller,
  itemLayout: () => this.itemLayout(), // 条目布局
  onRefresh: () => {
    // 刷新逻辑
    this.controller.finishRefresh();
  },
  onLoadMore: () => {
    // 加载更多逻辑
    this.controller.finishLoadMore();
  }
});

侧滑展示按钮

支持懒加载和普通模式，建议使用懒加载。

方式一：使用slideRightMenuLayout

示例代码
ListView({
  items: this.array, // 数据源数组
  controller: this.controller,
  dataController: this.dataController,
  itemLayout: (item, index) => this.itemLayout(item, index), // 条目视图
  slideRightMenuLayout: this.slideRightMenuLayout, // 侧滑视图
  slideMenuAttr: (attr) => {
    // 设置侧滑属性
    attr.rightMenuWidth = 100;
  }
});

方式二：使用swipeRightMenuLayout和swipeLeftMenuLayout

示例代码
ListView({
  controller: this.controller,
  lazyDataSource: this.dataSource,
  itemLayout: (item, index) => this.itemLayout(item, index), // 条目视图
  swipeRightMenuLayout: (index: number) => {
    this.slideRightMenuLayout(this, index);
  }, // 右侧滑视图
  swipeLeftMenuLayout: (index: number) => {
    this.slideRightMenuLayout(this, index);
  } // 左侧滑视图
});

下滑二楼功能

功能描述

支持下滑显示二楼视图的功能，具体实现请参考Demo中的SecondFloorPage文件。

示例代码

SecondFloorLayout({
  firstFloorView: () => { // 一楼视图
    this.firstFloorView(this);
  },
  isNeedHalfFloor: false, // 是否需要半楼功能
  secondFloorView: this.secondFloorView, // 二楼视图
  enableScrollInteraction: (isInteraction: boolean) => {
    // 解决嵌套滑动组件冲突
    this.mScrollInteraction = isInteraction;
  },
  topFixedView: () => {
    // 顶部固定视图
    this.topFixedView(this);
  },
  sfController: this.sfController, // 刷新控制器
  refreshHeaderAttribute: (attr) => {
    // 刷新头及二楼滑动属性配置
    attr.fontColor = Color.White;
    attr.timeFontColor = Color.White;
  },
  onRefresh: () => {
    // 下拉刷新逻辑
    setTimeout(() => {
      this.sfController.finishRefresh();
    }, 2000);
  },
  onScrollStatus: (status) => {
    // 当前滑动状态
  }
});

RefreshLayoutStatus状态

  • Pulling：拖拽，下拉可以刷新
  • Release：释放立即刷新
  • Refreshing：正在刷新中
  • Finish：刷新结束
  • ReleaseHalfFloor：释放进入半楼
  • HalfFloor：进入半楼
  • FirstFloor：一楼
  • ReleaseSecondFloor：释放进入二楼
  • SecondFloor：二楼状态
  • SecondFloorSlideUp：二楼向上滑动状态

RefreshHeaderAttr属性

属性类型概述
widthLength刷新控件的宽度
heightLength刷新头的高度，默认80
timeFormatRefreshHeaderTimeFormat刷新头的时间格式，默认月日时分
timeLabelRefreshHeaderTimeLabel刷新头的标签格式
hideTimeboolean是否隐藏刷新头时间，默认展示
fontSize`numberstring
fontColorResourceColor刷新头的文字颜色
timeFontSize`numberstring
timeFontColorResourceColor刷新头的时间文字颜色
marginIconLeftLength刷新文字距离左边的距离
iconDown`PixelMapResourceStr
iconUpLoad`PixelMapResourceStr
pullingText`stringResource`
releaseText`stringResource`
refreshingText`stringResource`
finishText`stringResource`
releaseHalfFloorText`stringResource`
halfFloorText`stringResource`
firstFloorText`stringResource`
releaseSecondFloorText`stringResource`
secondFloorText`stringResource`
secondFloorSlideUpText`stringResource`
backgroundColorResourceColor刷新头背景颜色
headerTypeRefreshHeaderType默认刷新头样式，默认为RefreshHeaderType.DEFAULT

列表数据操作（增删改查）

概述

无论是懒加载数据方式还是普通列表加载方式，均提供了数据的增删改查操作。普通数据可直接操作传递的数组，而懒加载方式需通过RefreshDataSource或DataController进行操作。

自版本1.0.7起，对懒加载数据和普通数据进行了优化和扩展，提供了更便捷的操作类：

  • 普通数据列表使用：DataController
  • 懒加载数据列表使用：RefreshDataSource

1. 普通数据列表操作

定义与使用
// 定义DataController全局变量
dataController: DataController = new DataController();

// 使用ListView
ListView({
  items: this.array, // 数据源数组
  dataController: this.dataController,
  isLazyData: false, // 标记为普通加载，使用ForEach
  itemLayout: (item, index) => this.itemLayout(item, index)
});
操作方法
方法名称参数概述
add(item: Object)Object添加单条数据
addPosition(position: number, item: Object)number, Object指定位置添加数据
addVariable(...items: Object[])可变参数数据添加多个数据
addArray(items: Object[])Object[]添加数组数据
deleteFirst()无参删除第一条数据
deleteLast()无参删除最后一条数据
deleteData(position: number)number删除指定位置的数据
deleteAll()无参删除全部数据
change(position: number, item: Object)number, Object修改指定位置的数据
示例操作
// 增加一个数据
this.dataController.add(100);

// 指定位置增加一个数据
this.dataController.addPosition(2, 999);

// 数组添加
this.dataController.addArray([200, 300, 400]);

// 可变参数形式添加
this.dataController.addVariable(600, 700);

// 删除第一个
this.dataController.deleteFirst();

// 删除最后一个
this.dataController.deleteLast();

// 删除指定一个
this.dataController.deleteData(2);

// 删除全部
this.dataController.deleteAll();

// 修改某一条数据
this.dataController.change(6, 1000);

2. 懒加载数据列表操作

定义与使用
// 定义RefreshDataSource全局变量
@State dataSource: RefreshDataSource = new RefreshDataSource();

// 使用ListView
ListView({
  items: this.array, // 数据源数组
  itemLayout: (item, index) => this.itemLayout(item, index),
  onLazyDataSource: (dataSource: RefreshDataSource) => {
    // 必须实现此属性，通过RefreshDataSource操作数据
    this.dataSource = dataSource;
  }
});
操作方法
方法名称参数概述
pushData(item: Object)Object添加单条数据
pushDataPosition(position: number, item: Object)number, Object指定位置添加数据
pushDataVariable(...items: Object[])可变参数数据添加多个数据
pushDataArray(items: Object[])Object[]添加数组数据
deleteFirst()无参删除第一条数据
deleteLast()无参删除最后一条数据
deleteData(position: number)number删除指定位置的数据
deleteAll(callback?: Function)回调接口（可选）删除全部数据
changeData(position: number, item: Object)number, Object修改指定位置的数据
示例操作
// 增加一个数据
this.dataSource.pushData(100);

// 指定位置增加一个数据
this.dataSource.pushDataPosition(2, 200);

// 数组添加
this.dataSource.pushDataArray([300, 301, 302]);

// 可变参数形式添加
this.dataSource.pushDataVariable(400, 401, 402);

// 删除第一个
this.dataSource.deleteFirst();

// 删除最后一个
this.dataSource.deleteLast();

// 删除指定一个
this.dataSource.deleteData(2);

// 删除全部
this.dataSource.deleteAll();

// 修改数据
this.dataSource.changeData(3, 9999);

三、总结

本文档整理并优化了多个UI组件的使用方法，包括ListView、GridView、StaggeredGridView、RefreshLayout等，涵盖了它们的属性、方法及具体使用示例。同时，详细介绍了如何进行数据的增删改查操作，无论是懒加载数据还是普通数据，都提供了便捷的操作类RefreshDataSource和DataController，简化了开发流程。建议开发者根据具体需求选择适合的组件和数据操作方式，以提高开发效率和应用性能。

👍 点赞，是我创作的动力！
⭐️ 收藏，是我努力的指引！
✏️ 评论，是我进步的宝藏！
💖 衷心感谢你的阅读以及支持！

请添加图片描述请添加图片描述

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

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

Verilog和Matlab实现RGB888互转YUV444

Verilog和Matlab实现RGB888互转YUV444

文章目录 一、色彩空间1.1 RGB色彩空间1.2 CMYK色彩空间1.3 YUV色彩空间 二、色彩空间转换公式2.1 RGB转CMYK2.2 CMYK转RGB2.3 RGB888转YUV4442.4 YUV444转RGB888 三、MATLAB实现RGB888转YUV4443.1 matlab代码3.2 matlab结果 四、Verilog实现RGB888转YUV444 一、色彩空间 色彩空…
阅读更多...
python_openCV_计算图片中的区域的黑色比例

python_openCV_计算图片中的区域的黑色比例

希望对原始图片进行处理，然后计算图片上的黑色和白色的占比 上图， 原始图片 import numpy as np import cv2 import matplotlib.pyplot as pltdef cal_black(img_file):#功能： 计算图片中的区域的黑色比例#取图片中不同的位置进行计算，然后计算器数值#----------------p…
阅读更多...
如何使用事件流相关操作

如何使用事件流相关操作

文章目录 1. 概念介绍2. 使用方法StreamControllerStreamBuilder 3. 示例代码 我们在上一章回中介绍了管理Stream事件流相关的内容&#xff0c;本章回中将介绍如何使用Stream事件流输入输出数据 。闲话休提&#xff0c;言归正传&#xff0c;让我们一起Talk Flutter吧。 1. 概念…
阅读更多...
【VSCode v1.93.0】手动配置远程remote-ssh

【VSCode v1.93.0】手动配置远程remote-ssh

开发环境 VS Code版本&#xff1a;1.93.0 (Windows) Ubuntu版本&#xff1a;20.04 使用VS Code 插件remote-ssh远程访问Ubuntu服务器中的代码&#xff0c;若Ubuntu无法联网&#xff0c;在连接的时候会报错&#xff1a; Could not establish connection to "xxxx": F…
阅读更多...
前端玩Postgres数据库：Ai大法一把梭

前端玩Postgres数据库：Ai大法一把梭

大家好&#xff0c;我是程序员凌览。 前段时间分享如何白嫖一台服务器 &#x1f449;&#x1f3fc;&#x1f449;&#x1f3fc;白嫖不是梦&#xff0c;三分钟搞定一台服务器。 本文分享如何在平台Vercel白嫖服务器的同时蹭个postgres数据库。 创建数据库 切换到Storage&…
阅读更多...
828华为云征文|基于Flexus云服务器X实例的应用场景-部署自己的博客系统

828华为云征文|基于Flexus云服务器X实例的应用场景-部署自己的博客系统

&#x1f534;大家好&#xff0c;我是雄雄&#xff0c;欢迎关注微信公众号&#xff1a;雄雄的小课堂 先看这里 写在前面效果图部署拾壹博客系统项目架构项目特点详细介绍部署博客系统更改redis的信息打包后端上传jar到服务器中打包前端项目 总结 写在前面 华为云828云服务器活…
阅读更多...
【加密社】如何根据.dat文件恢复密钥

【加密社】如何根据.dat文件恢复密钥

加密社 看了这篇指南&#xff0c;你将了解助记词和密钥地址&#xff08;qianbao&#xff09;背后的基本原理。 以及&#xff0c;如何找回你的大饼密钥。 Not your key, not your coin 如果你不掌握自己加密货币钱包的私钥&#xff0c;那么你实际上并不能完全控制你的资产 在当今…
阅读更多...
每日OJ_牛客_走迷宫（简单bfs）

每日OJ_牛客_走迷宫（简单bfs）

目录 牛客_走迷宫&#xff08;简单bfs&#xff09; 解析代码&#xff1a; 牛客_走迷宫&#xff08;简单bfs&#xff09; 走迷宫__牛客网 解析代码&#xff1a; 采用一个二维数组&#xff0c;不断的接受迷宫地图(因为有多个地图)&#xff0c;获取到迷宫地图后&#xff0c;采…
阅读更多...
智能匹配新高度：相亲交友系统如何运用AI技术提升用户体验

智能匹配新高度：相亲交友系统如何运用AI技术提升用户体验

在数字化时代&#xff0c;相亲交友系统正逐渐融入人工智能&#xff08;AI&#xff09;技术&#xff0c;以提升用户体验和匹配效率。AI的引入不仅改变了传统的交友方式&#xff0c;还为用户带来了更加个性化和精准的交友体验。以下是一篇关于如何运用AI技术提升相亲交友系统用户…
阅读更多...
第L8周：机器学习｜K-means聚类算法

第L8周：机器学习｜K-means聚类算法

本文为&#x1f517;365天深度学习训练营中的学习记录博客 &#x1f356; 原作者&#xff1a;K同学啊 | 接辅导、项目定制 &#x1f680; 文章来源&#xff1a;K同学的学习圈子深度学习 聚类算法的定义&#xff1a; 聚类就是将一个庞杂数据集中具有相似特征的数据自动归类到一…
阅读更多...
YOLOV5入门教学-common.py文件

YOLOV5入门教学-common.py文件

在 YOLOv5 框架中&#xff0c;common.py 文件是一个核心组件&#xff0c;负责定义深度学习模型的基础模块和常用操作。无论是卷积层、激活函数、特征融合还是其他复杂的模型结构&#xff0c;common.py 都提供了灵活且高效的实现。在这篇文章中&#xff0c;我们将深入解析 commo…
阅读更多...
【科普知识】一体化电机掉电后“位置精准复位“机制与规律

【科普知识】一体化电机掉电后“位置精准复位“机制与规律

在工业自动化、机器人技术及精密控制领域&#xff0c;电机作为核心执行元件&#xff0c;其稳定运行和精确控制对于整个系统的性能至关重要。 然而&#xff0c;电机在运行过程中可能会遭遇突然断电的情况&#xff0c;这会导致电机失去驱动力并停止在当前位置&#xff0c;甚至在…
阅读更多...
基于YOLOv10的垃圾检测系统

基于YOLOv10的垃圾检测系统

基于YOLOv10的垃圾检测系统 (价格90) 包含 [CardBoard, Glass, Metal, Paper, Plastic] 5个类 [纸板, 玻璃, 金属, 纸张, 塑料] 通过PYQT构建UI界面&#xff0c;包含图片检测&#xff0c;视频检测&#xff0c;摄像头实时检测。 &#xff08;该系统可以根据数据训练出的…
阅读更多...
Minimax-秋招正式批-面经(计网)

Minimax-秋招正式批-面经(计网)

6. websocket和http区别 websocket知识点总结_防火墙 websocket-CSDN博客 相同点 都是基于TCP协议&#xff0c;都是可靠性传输协议都是应用层协议 不同点 HTTP 类型&#xff1a; 请求-响应式的无状态协议&#xff0c;半双工通信&#xff0c;同一时刻只能一个方向上有动作通…
阅读更多...
变阻箱和负载箱的区别

变阻箱和负载箱的区别

变阻箱和负载箱是两种常见的电力设备&#xff0c;它们在电力系统中起着重要的作用。虽然它们都是用来调节电流的&#xff0c;但是它们的工作原理和用途有很大的区别。 首先&#xff0c;我们来看看变阻箱。变阻箱是一种可以改变电阻值的设备&#xff0c;它的主要作用是调节电流…
阅读更多...
el-table使用type=“expand”根据数据条件隐藏展开按钮

el-table使用type=“expand”根据数据条件隐藏展开按钮

一&#xff1a;添加className <el-table :data"tableData" border :loading"loading" :row-class-name"getRowClass" expand-change"expandchange"><el-table-column type"expand"><template #default"…
阅读更多...
基于51单片机的智能小车转向控制系统设计与实现

基于51单片机的智能小车转向控制系统设计与实现

文章目录 前言资料获取设计介绍功能介绍具体实现截图参考文献设计获取 前言 &#x1f497;博主介绍&#xff1a;✌全网粉丝10W,CSDN特邀作者、博客专家、CSDN新星计划导师&#xff0c;一名热衷于单片机技术探索与分享的博主、专注于 精通51/STM32/MSP430/AVR等单片机设计 主要对…
阅读更多...
PCB散热设计

PCB散热设计

随着电子设备性能的不断提升&#xff0c;电路板上的元器件集成度越来越高&#xff0c;发热量也随之增加。如何有效管理这些热量&#xff0c;保证电路板在高温环境下的稳定运行&#xff0c;成为设计过程中一个不可忽视的问题。如果散热不佳&#xff0c;电子元件可能会因过热导致…
阅读更多...
python3删除es 45天前索引，生产环境验证过

python3删除es 45天前索引，生产环境验证过

本人es版本 环境 pip install --upgrade elasticsearch==7.16.3代码 from datetime import datetime, timedelta from elasticsearch import Elasticsearch
阅读更多...
通过15张图带你掌握网络抓包工具Wireshark必备使用技巧

通过15张图带你掌握网络抓包工具Wireshark必备使用技巧

学习TCP/IP等网络协议时异常枯燥&#xff0c;因为网络问题看不见摸不着&#xff0c;很难深入理解其工作原理&#xff0c;而Wireshark正是将这些知识以一种网络数据包、可视化的形式呈现给大家&#xff0c;接下来博主带大家掌握Wireshark的必备技能&#xff01;如有任何疑问&…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023