【组件封装】uniapp vue3 封装一个自定义下拉刷新组件pullRefresh，带刷新时间和加载动画教程

文章目录

  • 前言
  • 一、实现原理
  • 二、组件样式和功能设计
  • 三、scroll-view 自定义下拉刷新使用回顾
    • 相关属性：
    • 最终版完整代码：

前言

手把手教你封装一个移动端 自定义下拉刷新组件带更新时间和加载动画（PullRefresh），以uniapp vue3为代码示例。

在这里插入图片描述

请添加图片描述

在这里插入图片描述

一、实现原理

基于系统自带组件scroll-view封装，开启组件refresher-enabled属性支持自定义下拉刷新功能。下拉自定义UI容器默认状态下位于页面顶部外不可视区域，下拉时候自定义区域进入页面显示。并通过多个自定义下拉刷新回调函数refresherpulling、refresherrefresh、refresherrestore进行逻辑和UI控制。

二、组件样式和功能设计

请添加图片描述
1、如上述动图所示，下拉未达到阈值提示文字显示下拉可以刷新，到达或超过阈值显示释放立即刷新
2、释放后进入刷新状态，提示文字显示正在刷新，左边出现加载转圈动画，下拉区域卡住不动
3、数据刷新完成后设置更新时间，恢复到初始状态，再次下拉会显示上次更新时间

三、scroll-view 自定义下拉刷新使用回顾

相关属性：

属性名类型默认值说明
refresher-enabledBooleanfalse开启自定义下拉刷新
refresher-thresholdNumber45（单位px）设置自定义下拉刷新阈值
refresher-default-styleString“black”设置自定义下拉刷新默认样式，支持设置 black，white，none，none 表示不使用默认样式
refresher-backgroundString“#FFF”设置自定义下拉刷新区域背景颜色
refresher-triggeredBooleanfalse设置当前下拉刷新状态，true 表示下拉刷新已经被触发，false 表示下拉刷新未被触发
@refresherpullingEventHandle自定义下拉刷新控件被下拉
@refresherrefreshEventHandle自定义下拉刷新被触发
@refresherrestoreEventHandle自定义下拉刷新被复位

上面比较重要一个关系就是下拉松手那一刻下拉高度大于或等于refresher-threshold时（刷新阈值）会触发刷新事件@refresherrefresh

refresher-enabled用来控制下拉区域是否复位，当值从true转变为false才能复位。

分析下拉过程属性值变化和回调函数的触发时机：

1、初始状态refresher-triggered=false
2、 开始下拉@refresherpulling一直持续被触发，下拉松手那一刻当下拉距离大于或等于refresher-threshold（刷新阈值）时，@refresherrefresh 被触发一次，此时设置refresher-triggered=true,下拉区域卡住不复位进入加载中状态，数据加载完成设置refresher-triggered=false,下拉复位，触发@refresherrestore。

按上面描述我们很容易实现一个自定义下拉刷新简易版如下：

pullRefresh.vue

<template><view class="pull-refresh"><scroll-view style="height: 100%;" scroll-y refresher-enabled refresher-default-style="none"refresher-background="#ffffff" :refresher-threshold="threshold" :refresher-triggered="loading"@refresherpulling="onRefresherpulling" @refresherrefresh="onRefresherrefresh"@refresherrestore="onRefresherrestore" ><view class="main"><!-- 下拉提示内容 --><view class="content" :style="{top:`-${threshold}px`,height:`${threshold}px`}"><view class="tip-view"><view class="text">{{tipText}}</view></view></view></view></scroll-view></view>
</template><script setup>import {ref} from 'vue'//拉刷新阈值const threshold=ref(80)//是否正在刷新（加载数据）const loading = ref(false)//提示文字const tipText = ref('下拉可以刷新')//控件被下拉触发回调const onRefresherpulling = (e) => {console.log(e,'正在下拉')}//下拉刷新被触发回调const onRefresherrefresh = (e) => {loading.value=true;tipText.value="正在刷新..."//模拟接口请求数据setTimeout(()=>{loading.value=false uni.showToast({title:'刷新成功',icon:'none'})},1000)}//下拉刷新被复位回调const onRefresherrestore = () => {tipText.value = "下拉可以刷新"}</script><style lang="scss" scoped>.pull-refresh {height: 100vh;width: 100%;position: relative;}.main {position: relative;}.content {width: 100%;display: flex;align-items: center;justify-content: center;position: absolute;top: -80px;height: 80px;color: #000;z-index: 999;padding-bottom: 15px;box-sizing: border-box;.arrow {width: 45rpx;height: auto;}.tip-view {width: 10em;display: flex;font-size: 22rpx;flex-direction: column;align-items: center;margin-left: 20rpx;.text {font-size: 28rpx;color: #666;}}}</style>

运行效果：
请添加图片描述

通过运行效果可以看出除了图标、加载动画、更新时间外，和我们设想的效果最关键的区别在于释放刷新这个状态实现，组件无提供此状态，此时需要我们自己判断定义出来。

我们打印下来下拉刷新控件被下拉回调函数的参数

	//控件被下拉触发回调const onRefresherpulling = (e) => {console.log(e,'下拉触发')}

小程序端：
在这里插入图片描述
H5或APP：
![在这里插入图片描述](https://i-blog.csdnimg.cn/direct/3051ac201bdc4ba395b784f56521f24a.png

可以看到下拉过程中该回调一直被触发，小程序端内部有个dy字段而H5或APP端却变成了deltaY，dy或deltaY就是我们下拉区域的高度（单位px），当这个值大于等于下拉刷新阈值（ refresher-threshold）将触发下拉刷新回调（@refresherrefresh）

所以是否达到释放立即刷新这个状态就很容易判断，也即dy或deltaY>=refresher-threshold进入释放立即刷新状态

	//控件被下拉触发回调const onRefresherpulling = (e) => {//微信小程dy字段,H5和app deltaY字段//#ifdef H5||APPif (e.detail.deltaY >= threshold ) {tipText.value = props.loosingText || "释放立即刷新"}// #endif//#ifndef H5||APPif (e.detail.dy >= threshold) {tipText.value = props.loosingText || "释放立即刷新"}// #endif		else {tipText.value = props.pullingText || "下拉可以刷新"}}

为了更好控制下拉区域图标和文字我们定义3中状态：

/*** 状态：0：下拉状态 1：可释放刷新状态 2：正在刷新状态*/const status = ref(0)

通过不同状态来改变UI和执行逻辑。

完整代码如下：
pullRefresh.vue

<template><view class="pull-refresh"><scroll-view style="height: 100%;" scroll-y refresher-enabled refresher-default-style="none"refresher-background="#ffffff" :refresher-threshold="threshold" :refresher-triggered="loading"@refresherpulling="onRefresherpulling" @refresherrefresh="onRefresherrefresh"@refresherrestore="onRefresherrestore" @scrolltolower="onScrolltolower"><view class="main"><!-- 下拉提示内容 --><view class="content" :style="{top:`-${threshold}px`,height:`${threshold}px`}"><!-- 下拉或可释放状态 --><image v-if="status<2" class="arrow":src="status===0 ? '/static/arrow_down.png':'/static/arrow_up.png'" mode="widthFix"></image><!-- 正在刷新中 --><image v-else-if="status==2" class="arrow loading" src="/static/loading.png" mode="widthFix"></image><view class="tip-view"><view :class="['text',{start:!updateTime}]">{{tipText}}</view><view v-if="updateTime" class="update-time">上次更新 {{updateTime}}</view></view></view><slot></slot></view></scroll-view></view>
</template><script setup>import {ref,nextTick,computed} from 'vue'const props = defineProps({//下拉刷新阈值threshold: {type: Number,default: 80},//下拉刷新接口方法,cb:接口请求完成回调refreshMethod: {type: Function,default: cb => cb()},//下拉过程文案pullingText: {type: String,default: '下拉可以刷新'},//释放过程文案loosingText: {type: String,default: '释放立即刷新'},//刷新中文案loadingText: {type: String,default: '正在刷新...'},})const emits = defineEmits(['scrolltolower'])//是否正在刷新（加载数据）const loading = ref(false)/*** 状态：0：下拉状态 1：可释放刷新状态 2：正在刷新状态*/const status = ref(0)//提示文字const tipText = computed(()=>{let tips={0:props.pullingText,1:props.loosingText,2:props.loadingText}return tips[status.value]||props.pullingText})//上一次刷新时间const updateTime = ref('')//控件被下拉触发回调const onRefresherpulling = (e) => {//微信小程dy字段,H5和app deltaY字段//#ifdef H5||APPif (e.detail.deltaY >= props.threshold ) {status.value = 1}// #endif//#ifndef H5||APPif (e.detail.dy >= props.threshold) {status.value = 1}// #endifelse {status.value = 0}}//下拉刷新被触发回调const onRefresherrefresh = (e) => {//到达下拉阈值刷新数据if (status.value === 1) {loading.value = truestatus.value = 2;//接口获取数据props.refreshMethod(() => {nextTick(() => {uni.showToast({title: '刷新成功',icon: 'none'})updateTime.value = formatDateTime()loading.value = false})})}}//下拉刷新被复位回调const onRefresherrestore = () => {status.value = 0}//获取当前日期时间const formatDateTime = () => {let date = new Date()let month = (date.getMonth() + 1).toString().padStart(2, '0')let day = date.getDate().toString().padStart(2, '0')let hour = date.getHours().toString().padStart(2, '0')let minus = date.getMinutes().toString().padStart(2, '0')let second = date.getSeconds().toString().padStart(2, '0')return `${month}-${day} ${hour}:${minus}`}//触底const onScrolltolower = () => {emits('scrolltolower')}
</script><style lang="scss" scoped>.pull-refresh {height: 100%;width: 100%;position: relative;}.main {position: relative;}.content {width: 100%;display: flex;align-items: center;justify-content: center;position: absolute;top: -80px;height: 80px;color: #000;z-index: 999;padding-bottom: 15px;box-sizing: border-box;.arrow {width: 45rpx;height: auto;&.loading {animation: loadingFrames 1s linear infinite;}}.tip-view {width: 10em;display: flex;font-size: 22rpx;flex-direction: column;align-items: center;margin-left: 20rpx;.text {font-size: 28rpx;color: #666;&.start{align-self: flex-start;}}.update-time {font-size: 22rpx;margin-top: 10rpx;color: #808080;}}}@keyframes loadingFrames {from {transform: rotate(0deg);}to {transform: rotate(360deg);}}
</style>

页面调用：
index.vue

<template><view class="container"><PullRefresh :threshold="80"  :refreshMethod="getData" @scrolltolower="handleScrolltolower"><view class="item" v-for="(item,index) in 20">{{item}}</view></PullRefresh></view>
</template><script setup>import PullRefresh from '@/components/pullRefresh.vue';/*** 获取数据* cb:接口数据获取完成回调函数*/const getData=(cb)=>{//模拟接口请求数据setTimeout(()=>{cb()},2000)}//触底回调const handleScrolltolower=()=>{console.log('触底')}</script><style lang="scss" scoped>.container {height: 100vh;background-color: #f2f2f2;}.item {height: 90rpx;line-height: 90rpx;text-align: center;margin-top: 20rpx;}
</style>

说明：为了让用户自定义文字，我们提供了各种状态下的文案属性设置，下拉刷新阈值也暴露属性threshold给用户自定义，同时还定义了refreshMethod属性用来控制接口获取刷新数据是否完成，该属性是一个方法内部写入从接口获取刷新数据逻辑，入参cb是个回调函数，刷新数据获取完成调用回调函数组件即可复位。组件高度默认100%继承父容器，内部默认插槽可添加页面内容。

ps:scrollView组件外层必须设置高度或最大高度才能保证自定义下拉刷新或者滚动触底功能正常

在小程序端运行：
请添加图片描述

H5或APP运行：

请添加图片描述

从运行效果看出小程序运行正常，而H5或APP端存在bug，当下拉区域较长时正常，当下拉区域较短(刚处于立即释放刷新状态)就放开手指会出现异常，组件不进入刷新状态。

查阅uniapp官方文档，官方文档对下拉回调参数都是轻描淡写，没写详细，通过多次试验测试，发现当中的猫腻，原来是下拉触发回调@refresherpulling返回的当前下拉区域高度值deltaY在这2端是不准确的，经过测试发现跟实际误差10px左右（多了10px），因此判断这2端是否到达阈值需要减去10

	//控件被下拉触发回调const onRefresherpulling = (e) => {console.log(e,'e')//微信小程dy字段,H5和app deltaY字段//#ifdef H5||APP//H5或APP端值判断是否到达阈值需要额外加10if (e.detail.deltaY-10 >= props.threshold ) {status.value = 1}// #endif//#ifndef H5||APPif (e.detail.dy >= props.threshold) {status.value = 1}// #endifelse {status.value = 0}}

最终版完整代码：

pullRefresh.vue（自定义下拉刷新组件）

<template><view class="pull-refresh"><scroll-view style="height: 100%;" scroll-y refresher-enabled refresher-default-style="none"refresher-background="#ffffff" :refresher-threshold="threshold" :refresher-triggered="loading"@refresherpulling="onRefresherpulling" @refresherrefresh="onRefresherrefresh"@refresherrestore="onRefresherrestore" @scrolltolower="onScrolltolower"><view class="main"><!-- 下拉提示内容 --><view class="content" :style="{top:`-${threshold}px`,height:`${threshold}px`}"><!-- 下拉或可释放状态 --><image v-if="status<2" class="arrow":src="status===0 ? '/static/arrow_down.png':'/static/arrow_up.png'" mode="widthFix"></image><!-- 正在刷新中 --><image v-else-if="status==2" class="arrow loading" src="/static/loading.png" mode="widthFix"></image><view class="tip-view"><view :class="['text',{start:!updateTime}]">{{tipText}}</view><view v-if="updateTime" class="update-time">上次更新 {{updateTime}}</view></view></view><slot></slot></view></scroll-view></view>
</template><script setup>import {ref,nextTick,computed} from 'vue'const props = defineProps({//下拉刷新阈值threshold: {type: Number,default: 80},//下拉刷新接口方法,cb:接口请求完成回调refreshMethod: {type: Function,default: cb => cb()},//下拉过程文案pullingText: {type: String,default: '下拉可以刷新'},//释放过程文案loosingText: {type: String,default: '释放立即刷新'},//刷新中文案loadingText: {type: String,default: '正在刷新...'},})const emits = defineEmits(['scrolltolower'])//是否正在刷新（加载数据）const loading = ref(false)/*** 状态：0：下拉状态 1：可释放刷新状态 2：正在刷新状态*/const status = ref(0)//提示文字const tipText = computed(()=>{let tips={0:props.pullingText,1:props.loosingText,2:props.loadingText}return tips[status.value]||props.pullingText})//上一次刷新时间const updateTime = ref('')//控件被下拉触发回调const onRefresherpulling = (e) => {//微信小程dy字段,H5和app deltaY字段//#ifdef H5||APP//H5或APP端值判断是否到达阈值需要额外加10if (e.detail.deltaY-10 >= props.threshold ) {status.value = 1}// #endif//#ifndef H5||APPif (e.detail.dy >= props.threshold) {status.value = 1}// #endifelse {status.value = 0}}//下拉刷新被触发回调const onRefresherrefresh = (e) => {//到达下拉阈值刷新数据if (status.value === 1) {loading.value = truestatus.value = 2;//接口获取数据props.refreshMethod(() => {nextTick(() => {uni.showToast({title: '刷新成功',icon: 'none'})updateTime.value = formatDateTime()loading.value = false})})}//发现误差在1左右未到达下拉刷新阈值H5或APP也会触发，兼容处理恢复初态else {loading.value = falsestatus.value = 0}}//下拉刷新被复位回调const onRefresherrestore = () => {status.value = 0}//获取当前日期时间const formatDateTime = () => {let date = new Date()let month = (date.getMonth() + 1).toString().padStart(2, '0')let day = date.getDate().toString().padStart(2, '0')let hour = date.getHours().toString().padStart(2, '0')let minus = date.getMinutes().toString().padStart(2, '0')let second = date.getSeconds().toString().padStart(2, '0')return `${month}-${day} ${hour}:${minus}`}//触底const onScrolltolower = () => {emits('scrolltolower')}
</script><style lang="scss" scoped>.pull-refresh {height: 100%;width: 100%;position: relative;}.main {position: relative;}.content {width: 100%;display: flex;align-items: center;justify-content: center;position: absolute;top: -80px;height: 80px;color: #000;z-index: 999;padding-bottom: 15px;box-sizing: border-box;.arrow {width: 45rpx;height: auto;&.loading {animation: loadingFrames 1s linear infinite;}}.tip-view {width: 10em;display: flex;font-size: 22rpx;flex-direction: column;align-items: center;margin-left: 20rpx;.text {font-size: 28rpx;color: #666;&.start{align-self: flex-start;}}.update-time {font-size: 22rpx;margin-top: 10rpx;color: #808080;}}}@keyframes loadingFrames {from {transform: rotate(0deg);}to {transform: rotate(360deg);}}
</style>

页面调用：

<template><view class="container"><PullRefresh :threshold="80" :refreshMethod="getData" @scrolltolower="handleScrolltolower"><view class="item" v-for="(item,index) in 20">{{item}}</view></PullRefresh></view>
</template><script setup>import PullRefresh from '@/components/pullRefresh.vue';/*** 获取数据* cb:接口数据获取完成回调函数*/const getData=(cb)=>{//模拟接口请求数据setTimeout(()=>{cb()},2000)}//触底回调const handleScrolltolower=()=>{console.log('触底')}</script><style lang="scss" scoped>.container {height: 100vh;background-color: #f2f2f2;}.item {height: 90rpx;line-height: 90rpx;text-align: center;margin-top: 20rpx;}
</style>

H5或APP端运行效果：
请添加图片描述

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

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

相关文章

14、保存与加载PyTorch训练的模型和超参数

14、保存与加载PyTorch训练的模型和超参数

文章目录 1. state_dict2. 模型保存3. check_point4. 详细保存5. Docker6. 机器学习常用库 1. state_dict nn.Module 类是所有神经网络构建的基类&#xff0c;即自己构建一个深度神经网络也是需要继承自nn.Module类才行&#xff0c;并且nn.Module中的state_dict包含神经网络中…
阅读更多...
【Threejs进阶教程-着色器篇】9.顶点着色器入门

【Threejs进阶教程-着色器篇】9.顶点着色器入门

【Threejs进阶教程-着色器篇】9.顶点着色器入门 本系列教程第一篇地址&#xff0c;建议按顺序学习认识顶点着色器varying介绍顶点着色器与片元着色器分别的作用Threejs在Shader中的内置变量各种矩阵gl_Position 尝试使用顶点着色器增加分段数增强效果 制作平面鼓包效果鼓包效果…
阅读更多...
w058基于web的美发门店管理系统

w058基于web的美发门店管理系统

&#x1f64a;作者简介&#xff1a;拥有多年开发工作经验&#xff0c;分享技术代码帮助学生学习&#xff0c;独立完成自己的项目或者毕业设计。 代码可以查看文章末尾⬇️联系方式获取&#xff0c;记得注明来意哦~&#x1f339;赠送计算机毕业设计600个选题excel文件&#xff0…
阅读更多...
leetcode 二叉树的最大深度

leetcode 二叉树的最大深度

104. 二叉树的最大深度 已解答 简单 相关标签 相关企业 给定一个二叉树 root &#xff0c;返回其最大深度。 二叉树的 最大深度 是指从根节点到最远叶子节点的最长路径上的节点数。 示例 1&#xff1a; 输入&#xff1a;root [3,9,20,null,null,15,7] 输出&#xff1a;3…
阅读更多...
VMware ubuntu创建共享文件夹与Windows互传文件

VMware ubuntu创建共享文件夹与Windows互传文件

1.如图1所示&#xff0c;点击虚拟机&#xff0c;点击设置&#xff1b; 图1 2.如图2所示&#xff0c;点击选项&#xff0c;点击共享文件夹&#xff0c;如图3所示&#xff0c;点击总是启用&#xff0c;点击添加&#xff1b; 图2 图3 3.如图4所示&#xff0c;出现命名共享文件夹…
阅读更多...
matlab 实现混沌麻雀搜索算法的光伏MPPT控制仿真

matlab 实现混沌麻雀搜索算法的光伏MPPT控制仿真

1、内容简介 略 103-可以交流、咨询、答疑 2、内容说明 略 3、仿真分析 略 4、参考论文 略
阅读更多...
Unity3D 截图

Unity3D 截图

使用 Unity3D 自带的截图接口&#xff0c;制作截图工具。 截图 有时候我们想对 Unity 的窗口进行截图&#xff0c;如果直接使用一些截图工具&#xff0c;很难截取到一张完整分辨率的图片&#xff08;例如&#xff0c;我们想要截取一张 1920 * 1080 的图片&#xff09;。 其实…
阅读更多...
STM32F10x 定时器

STM32F10x 定时器

使用定时器实现&#xff1a;B5 E5的开关 添加相关的.h路径文件 添加相关的.c配置文件 led.h文件 用于声明LED函数 #ifndef __LED_H //没有定义__LED_H #define __LED_H //就定义__LED_H #define LED1_ON GPIO_ResetBits(GPIOB,GPIO_Pin_5) #defi…
阅读更多...
PMP好考吗，有多大的价值？

PMP好考吗，有多大的价值？

非常好考&#xff01;PMP目前大陆地区的笔试是只有选择题的&#xff0c;运气好的话 蒙一个都能对&#xff0c;所以PMP的通过率高&#xff0c;这也是很多人考了吐槽PMP没用&#xff0c;是“水证”&#xff0c;但是每年考PMP 的人不减反增&#xff0c;大家可以想一下&#xff0c;…
阅读更多...
css:项目

css:项目

这是一个完整的网站制作的流程 美工会先制作一个原型图&#xff1a; 原型图写的不详细&#xff0c;就是体现一个网页大致的布局 然后美工再做一个psd样例图片 然后再交给程序员 项目 模块化开发&#xff1a;把代码的不同的样式封装起来&#xff0c;需要用到相同样式的标签就…
阅读更多...
VsCode 插件推荐（个人常用）

VsCode 插件推荐（个人常用）

VsCode 插件推荐&#xff08;个人常用&#xff09;
阅读更多...
黑马程序员Java项目实战《苍穹外卖》Day01

黑马程序员Java项目实战《苍穹外卖》Day01

苍穹外卖-day01 课程内容 软件开发整体介绍苍穹外卖项目介绍开发环境搭建导入接口文档Swagger 项目整体效果展示&#xff1a; ​ 管理端-外卖商家使用 ​ 用户端-点餐用户使用 当我们完成该项目的学习&#xff0c;可以培养以下能力&#xff1a; 1. 软件开发整体介绍 作为一…
阅读更多...
Python双向链表、循环链表、栈

Python双向链表、循环链表、栈

一、双向链表 1.作用 双向链表也叫双面链表。 对于单向链表而言。只能通过头节点或者第一个节点出发&#xff0c;单向的访问后继节点&#xff0c;每个节点只能记录其后继节点的信息&#xff08;位置&#xff09;&#xff0c;不能向前遍历。 所以引入双向链表&#xff0c;双…
阅读更多...
k8s网络服务

k8s网络服务

k8s 中向外界提供服务的几种方法port-forward、NodePort&#xff0c;以及 更加常用的提供服务的资源ingress。 1 kubectl port-forward service/redis 6379:6379 现在k8s中有一个pod运行在6379&#xff0c;本机访问映射到6379上&#xff0c;它可以针对部署&#xff0c;服务&…
阅读更多...
eduSRC挖洞思路

eduSRC挖洞思路

声明 学习视频来自 B 站UP主泷羽sec&#xff0c;如涉及侵权马上删除文章。 笔记的只是方便各位师傅学习知识&#xff0c;以下网站只涉及学习内容&#xff0c;其他的都与本人无关&#xff0c;切莫逾越法律红线&#xff0c;否则后果自负。 ✍&#x1f3fb;作者简介&#xff1a;致…
阅读更多...
Leetcode - 周赛424

Leetcode - 周赛424

目录 一&#xff0c;3354. 使数组元素等于零 二&#xff0c; 3355. 零数组变换 I 三&#xff0c;3356. 零数组变换 II 四&#xff0c;3357. 最小化相邻元素的最大差值 一&#xff0c;3354. 使数组元素等于零 本题实际上是一个前/后缀和的问题&#xff0c;就是判断前缀和与后…
阅读更多...
Vue2中 vuex 的使用

Vue2中 vuex 的使用

1.安装 vuex 安装vuex与vue-router类似&#xff0c;vuex是一个独立存在的插件&#xff0c;如果脚手架初始化没有选 vuex&#xff0c;就需要额外安装。 yarn add vuex3 或者 npm i vuex3 233 Vue2 Vue-Router3 Vuex3 344 Vue3 Vue-Router4 Vuex4 2. 新建 store/index.j…
阅读更多...
数据结构C语言描述5(图文结合)--队列，数组、链式、优先队列的实现

数据结构C语言描述5(图文结合)--队列，数组、链式、优先队列的实现

前言 这个专栏将会用纯C实现常用的数据结构和简单的算法&#xff1b;有C基础即可跟着学习&#xff0c;代码均可运行&#xff1b;准备考研的也可跟着写&#xff0c;个人感觉&#xff0c;如果时间充裕&#xff0c;手写一遍比看书、刷题管用很多&#xff0c;这也是本人采用纯C语言…
阅读更多...
Windows修复SSL/TLS协议信息泄露漏洞(CVE-2016-2183) --亲测

Windows修复SSL/TLS协议信息泄露漏洞(CVE-2016-2183) --亲测

漏洞说明&#xff1a; 打开链接&#xff1a;https://docs.microsoft.com/zh-cn/troubleshoot/windows-server/windows-security/restrict-cryptographic-algorithms-protocols-schannel 可以看到&#xff1a; 找到&#xff1a;应通过配置密码套件顺序来控制 TLS/SSL 密码 我们…
阅读更多...
深度学习图像视觉 RKNN Toolkit2 部署 RK3588S边缘端 过程全记录

深度学习图像视觉 RKNN Toolkit2 部署 RK3588S边缘端 过程全记录

深度学习图像视觉 RKNN Toolkit2 部署 RK3588S边缘端 过程全记录 认识RKNN Toolkit2 工程文件学习路线&#xff1a; Anaconda Miniconda安装.condarc 文件配置镜像源自定义conda虚拟环境路径创建Conda虚拟环境 本地训练环境本地转换环境安装 RKNN-Toolkit2&#xff1a;添加 lin…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023