vue-seamless-scroll 结束从头开始，加延时后滚动

article/2025/8/27 9:55:29

今天遇到一个大屏需求：
1️⃣初始进入页面停留5秒，然后开始滚动

2️⃣最后一条数据出现在最后一行时候暂停5秒，然后返回1️⃣

依次循环，发现vue-seamless-scroll的方法 ScrollEnd是监测最后一条数据消失在第一行才回调，不能满足我的需求，于是在node_modules里面找到他的文件重写

主要优化点

// 上

 if (Math.abs(this.yPos) >= this.realBoxHeight - 520) 

this.realBoxHeight是你所有数据加起来的行高， 520是可视区域的行高， yPos是向上滚动的距离，是个负值，滚动了一行，假设行高40，那就是  -40

 // 到达底部时暂停5秒

              this._stopMove()

              setTimeout(() => {

                this.yPos = 0

                // 重置位置后也暂停5秒再开始滚动

                setTimeout(() => {

                  this._startMove()

                }, 5000)

              }, 5000)

我修改完成的文件

<template><div ref="wrap"><div:style="leftSwitch"v-if="navigation":class="leftSwitchClass"@click="leftSwitchClick"><slot name="left-switch"></slot></div><div:style="rightSwitch"v-if="navigation":class="rightSwitchClass"@click="rightSwitchClick"><slot name="right-switch"></slot></div><divref="realBox":style="pos"@mouseenter="enter"@mouseleave="leave"@touchstart="touchStart"@touchmove="touchMove"@touchend="touchEnd"><div ref="slotList" :style="float"><slot></slot></div><div v-html="copyHtml" :style="float"></div></div></div>
</template><script>
require('comutils/animationFrame')()
const arrayEqual = require('comutils/arrayEqual')
const copyObj = require('comutils/copyObj')
export default {name: 'vue-seamless-scroll',data() {return {xPos: 0,yPos: 0,delay: 0,copyHtml: '',height: 0,width: 0, // 外容器宽度realBoxWidth: 0 // 内容实际宽度}},props: {data: {type: Array,default: () => {return []}},classOption: {type: Object,default: () => {return {}}}},computed: {leftSwitchState() {return this.xPos < 0},rightSwitchState() {return Math.abs(this.xPos) < this.realBoxWidth - this.width},leftSwitchClass() {return this.leftSwitchState ? '' : this.options.switchDisabledClass},rightSwitchClass() {return this.rightSwitchState ? '' : this.options.switchDisabledClass},leftSwitch() {return {position: 'absolute',margin: `${this.height / 2}px 0 0 -${this.options.switchOffset}px`,transform: 'translate(-100%,-50%)'}},rightSwitch() {return {position: 'absolute',margin: `${this.height / 2}px 0 0 ${this.width +this.options.switchOffset}px`,transform: 'translateY(-50%)'}},float() {return this.isHorizontal? { float: 'left', overflow: 'hidden' }: { overflow: 'hidden' }},pos() {return {transform: `translate(${this.xPos}px,${this.yPos}px)`,transition: `all ${this.ease} ${this.delay}ms`,overflow: 'hidden'}},defaultOption() {return {step: 0.25, //步长limitMoveNum: 14, //启动无缝滚动最小数据数hoverStop: true, //是否启用鼠标hover控制direction: 1, // 0 往下 1 往上 2向左 3向右openTouch: true, //开启移动端touchsingleHeight: 0, //单条数据高度有值hoverStop关闭singleWidth: 0, //单条数据宽度有值hoverStop关闭waitTime: 1000, //单步停止等待时间switchOffset: 30,autoPlay: true,navigation: false,switchSingleStep: 134,switchDelay: 400,switchDisabledClass: 'disabled',isSingleRemUnit: false // singleWidth/singleHeight 是否开启rem度量}},options() {return copyObj({}, this.defaultOption, this.classOption)},navigation() {return this.options.navigation},autoPlay() {if (this.navigation) return falsereturn this.options.autoPlay},scrollSwitch() {return this.data.length >= this.options.limitMoveNum},hoverStopSwitch() {return this.options.hoverStop && this.autoPlay && this.scrollSwitch},canTouchScroll() {return this.options.openTouch},isHorizontal() {return this.options.direction > 1},baseFontSize() {return this.options.isSingleRemUnit? parseInt(window.getComputedStyle(document.documentElement, null).fontSize): 1},realSingleStopWidth() {return this.options.singleWidth * this.baseFontSize},realSingleStopHeight() {return this.options.singleHeight * this.baseFontSize},step() {let singleSteplet step = this.options.stepif (this.isHorizontal) {singleStep = this.realSingleStopWidth} else {singleStep = this.realSingleStopHeight}if (singleStep > 0 && singleStep % step > 0) {console.error('如果设置了单步滚动,step需是单步大小的约数,否则无法保证单步滚动结束的位置是否准确。~~~~~')}return step}},methods: {reset() {this._cancle()this._initMove()},leftSwitchClick() {if (!this.leftSwitchState) return// 小于单步距离if (Math.abs(this.xPos) < this.options.switchSingleStep) {this.xPos = 0return}this.xPos += this.options.switchSingleStep},rightSwitchClick() {if (!this.rightSwitchState) return// 小于单步距离if (this.realBoxWidth - this.width + this.xPos <this.options.switchSingleStep) {this.xPos = this.width - this.realBoxWidthreturn}this.xPos -= this.options.switchSingleStep},_cancle() {cancelAnimationFrame(this.reqFrame || '')},touchStart(e) {if (!this.canTouchScroll) returnlet timerconst touch = e.targetTouches[0] //touches数组对象获得屏幕上所有的touch，取第一个touchconst { waitTime, singleHeight, singleWidth } = this.optionsthis.startPos = {x: touch.pageX,y: touch.pageY} //取第一个touch的坐标值this.startPosY = this.yPos //记录touchStart时候的posYthis.startPosX = this.xPos //记录touchStart时候的posXif (!!singleHeight && !!singleWidth) {if (timer) clearTimeout(timer)timer = setTimeout(() => {this._cancle()}, waitTime + 20)} else {this._cancle()}},touchMove(e) {//当屏幕有多个touch或者页面被缩放过，就不执行move操作if (!this.canTouchScroll ||e.targetTouches.length > 1 ||(e.scale && e.scale !== 1))returnconst touch = e.targetTouches[0]const { direction } = this.optionsthis.endPos = {x: touch.pageX - this.startPos.x,y: touch.pageY - this.startPos.y}event.preventDefault() //阻止触摸事件的默认行为，即阻止滚屏const dir = Math.abs(this.endPos.x) < Math.abs(this.endPos.y) ? 1 : 0 //dir，1表示纵向滑动，0为横向滑动if (dir === 1 && direction < 2) {// 表示纵向滑动 && 运动方向为上下this.yPos = this.startPosY + this.endPos.y} else if (dir === 0 && direction > 1) {// 为横向滑动 && 运动方向为左右this.xPos = this.startPosX + this.endPos.x}},touchEnd() {if (!this.canTouchScroll) returnlet timerconst direction = this.options.directionthis.delay = 50if (direction === 1) {if (this.yPos > 0) this.yPos = 0} else if (direction === 0) {let h = (this.realBoxHeight / 2) * -1if (this.yPos < h) this.yPos = h} else if (direction === 2) {if (this.xPos > 0) this.xPos = 0} else if (direction === 3) {let w = this.realBoxWidth * -1if (this.xPos < w) this.xPos = w}if (timer) clearTimeout(timer)timer = setTimeout(() => {this.delay = 0this._move()}, this.delay)},enter() {if (this.hoverStopSwitch) this._stopMove()},leave() {if (this.hoverStopSwitch) this._startMove()},_move() {// 鼠标移入时拦截_move()if (this.isHover) returnthis._cancle() //进入move立即先清除动画 防止频繁touchMove导致多动画同时进行this.reqFrame = requestAnimationFrame(function() {const h = this.realBoxHeight / 2 //实际高度const w = this.realBoxWidth / 2 //宽度let { direction, waitTime } = this.optionslet { step } = thisif (direction === 1) {// 上if (Math.abs(this.yPos) >= this.realBoxHeight - 520) {this.$emit('ScrollEnd')// 到达底部时暂停5秒this._stopMove()setTimeout(() => {this.yPos = 0// 重置位置后也暂停5秒再开始滚动setTimeout(() => {this._startMove()}, 5000)}, 5000)return}this.yPos -= step} else if (direction === 0) {// 下if (this.yPos >= 0) {this.$emit('ScrollEnd')// 到达顶部时暂停5秒this._stopMove()setTimeout(() => {this.yPos = h * -1// 重置位置后也暂停5秒再开始滚动setTimeout(() => {this._startMove()}, 5000)}, 5000)return}this.yPos += step} else if (direction === 2) {// 左if (Math.abs(this.xPos) >= w) {this.$emit('ScrollEnd')// 到达左边界时暂停5秒this._stopMove()setTimeout(() => {this.xPos = 0// 重置位置后也暂停5秒再开始滚动setTimeout(() => {this._startMove()}, 5000)}, 5000)return}this.xPos -= step} else if (direction === 3) {// 右if (this.xPos >= 0) {this.$emit('ScrollEnd')// 到达右边界时暂停5秒this._stopMove()setTimeout(() => {this.xPos = w * -1// 重置位置后也暂停5秒再开始滚动setTimeout(() => {this._startMove()}, 5000)}, 5000)return}this.xPos += step}// 移除单步滚动逻辑，改为连续滚动this._move()}.bind(this))},_initMove() {this.$nextTick(() => {const { switchDelay } = this.optionsconst { autoPlay, isHorizontal } = thisthis._dataWarm(this.data)this.copyHtml = '' //清空copyif (isHorizontal) {this.height = this.$refs.wrap.offsetHeightthis.width = this.$refs.wrap.offsetWidthlet slotListWidth = this.$refs.slotList.offsetWidththis.$refs.realBox.style.width = slotListWidth + 'px'this.realBoxWidth = slotListWidth}if (autoPlay) {this.ease = 'ease-in'this.delay = 0} else {this.ease = 'linear'this.delay = switchDelayreturn}// 是否可以滚动判断if (this.scrollSwitch) {let timerif (timer) clearTimeout(timer)this.realBoxHeight = this.$refs.realBox.offsetHeight// 初始化时暂停5秒后开始滚动setTimeout(() => {this._move()}, 5000)} else {this._cancle()this.yPos = this.xPos = 0}})},_dataWarm(data) {if (data.length > 100) {console.warn(`数据达到了${data.length}条有点多哦~,可能会造成部分老旧浏览器卡顿。`)}},_startMove() {this.isHover = false //开启_movethis._move()},_stopMove() {this.isHover = true //关闭_movethis._cancle()}},watch: {data(newData, oldData) {this._dataWarm(newData)// 每次数据更新都重置滚动this.yPos = 0this.xPos = 0// 5秒后开始新的滚动setTimeout(() => {if (this.data.length >= this.options.limitMoveNum) {this._initMove()this._startMove()}}, 5000)},autoPlay(bol) {if (bol) {this.reset()} else {this._stopMove()}}},beforeCreate() {this.reqFrame = null // move动画的animationFrame定时器this.isHover = false // mouseenter mouseleave 控制this._move()的开关this.ease = 'ease-in'},beforeDestroy() {this._cancle()}
}
</script>

源文件

<template><div ref="wrap"><div:style="leftSwitch"v-if="navigation":class="leftSwitchClass"@click="leftSwitchClick"><slot name="left-switch"></slot></div><div:style="rightSwitch"v-if="navigation":class="rightSwitchClass"@click="rightSwitchClick"><slot name="right-switch"></slot></div><divref="realBox":style="pos"@mouseenter="enter"@mouseleave="leave"@touchstart="touchStart"@touchmove="touchMove"@touchend="touchEnd"><div ref="slotList" :style="float"><slot></slot></div><div v-html="copyHtml" :style="float"></div></div></div>
</template><script>require('comutils/animationFrame')()const arrayEqual = require('comutils/arrayEqual')const copyObj = require('comutils/copyObj')export default {name: 'vue-seamless-scroll',data () {return {xPos: 0,yPos: 0,delay: 0,copyHtml: '',height: 0,width: 0, // 外容器宽度realBoxWidth: 0, // 内容实际宽度}},props: {data: {type: Array,default: () => {return []}},classOption: {type: Object,default: () => {return {}}}},computed: {leftSwitchState () {return this.xPos < 0},rightSwitchState () {return Math.abs(this.xPos) < (this.realBoxWidth - this.width)},leftSwitchClass () {return this.leftSwitchState ? '' : this.options.switchDisabledClass},rightSwitchClass () {return this.rightSwitchState ? '' : this.options.switchDisabledClass},leftSwitch () {return {position: 'absolute',margin: `${this.height / 2}px 0 0 -${this.options.switchOffset}px`,transform: 'translate(-100%,-50%)'}},rightSwitch () {return {position: 'absolute',margin: `${this.height / 2}px 0 0 ${this.width + this.options.switchOffset}px`,transform: 'translateY(-50%)'}},float () {return this.isHorizontal ? { float: 'left', overflow: 'hidden' } : { overflow: 'hidden' }},pos () {return {transform: `translate(${this.xPos}px,${this.yPos}px)`,transition: `all ${this.ease} ${this.delay}ms`,overflow: 'hidden'}},defaultOption () {return {step: 1, //步长limitMoveNum: 5, //启动无缝滚动最小数据数hoverStop: true, //是否启用鼠标hover控制direction: 1, // 0 往下 1 往上 2向左 3向右openTouch: true, //开启移动端touchsingleHeight: 0, //单条数据高度有值hoverStop关闭singleWidth: 0, //单条数据宽度有值hoverStop关闭waitTime: 1000, //单步停止等待时间switchOffset: 30,autoPlay: true,navigation: false,switchSingleStep: 134,switchDelay: 400,switchDisabledClass: 'disabled',isSingleRemUnit: false // singleWidth/singleHeight 是否开启rem度量}},options () {return copyObj({}, this.defaultOption, this.classOption)},navigation () {return this.options.navigation},autoPlay () {if (this.navigation) return falsereturn this.options.autoPlay},scrollSwitch () {return this.data.length >= this.options.limitMoveNum},hoverStopSwitch () {return this.options.hoverStop && this.autoPlay && this.scrollSwitch},canTouchScroll () {return this.options.openTouch},isHorizontal () {return this.options.direction > 1},baseFontSize () {return this.options.isSingleRemUnit ? parseInt(window.getComputedStyle(document.documentElement, null).fontSize) : 1},realSingleStopWidth () {return this.options.singleWidth * this.baseFontSize},realSingleStopHeight () {return this.options.singleHeight * this.baseFontSize},step () {let singleSteplet step = this.options.stepif (this.isHorizontal) {singleStep = this.realSingleStopWidth} else {singleStep = this.realSingleStopHeight}if (singleStep > 0 && singleStep % step > 0) {console.error('如果设置了单步滚动,step需是单步大小的约数,否则无法保证单步滚动结束的位置是否准确。~~~~~')}return step}},methods: {reset () {this._cancle()this._initMove()},leftSwitchClick () {if (!this.leftSwitchState) return// 小于单步距离if (Math.abs(this.xPos) < this.options.switchSingleStep) {this.xPos = 0return}this.xPos += this.options.switchSingleStep},rightSwitchClick () {if (!this.rightSwitchState) return// 小于单步距离if ((this.realBoxWidth - this.width + this.xPos) < this.options.switchSingleStep) {this.xPos = this.width - this.realBoxWidthreturn}this.xPos -= this.options.switchSingleStep},_cancle () {cancelAnimationFrame(this.reqFrame || '')},touchStart (e) {if (!this.canTouchScroll) returnlet timerconst touch = e.targetTouches[0] //touches数组对象获得屏幕上所有的touch，取第一个touchconst { waitTime, singleHeight, singleWidth } = this.optionsthis.startPos = {x: touch.pageX,y: touch.pageY} //取第一个touch的坐标值this.startPosY = this.yPos //记录touchStart时候的posYthis.startPosX = this.xPos //记录touchStart时候的posXif (!!singleHeight && !!singleWidth) {if (timer) clearTimeout(timer)timer = setTimeout(() => {this._cancle()}, waitTime + 20)} else {this._cancle()}},touchMove (e) {//当屏幕有多个touch或者页面被缩放过，就不执行move操作if (!this.canTouchScroll || e.targetTouches.length > 1 || e.scale && e.scale !== 1) returnconst touch = e.targetTouches[0]const { direction } = this.optionsthis.endPos = {x: touch.pageX - this.startPos.x,y: touch.pageY - this.startPos.y}event.preventDefault(); //阻止触摸事件的默认行为，即阻止滚屏const dir = Math.abs(this.endPos.x) < Math.abs(this.endPos.y) ? 1 : 0 //dir，1表示纵向滑动，0为横向滑动if (dir === 1 && direction < 2) {  // 表示纵向滑动 && 运动方向为上下this.yPos = this.startPosY + this.endPos.y} else if (dir === 0 && direction > 1) { // 为横向滑动 && 运动方向为左右this.xPos = this.startPosX + this.endPos.x}},touchEnd () {if (!this.canTouchScroll) returnlet timerconst direction = this.options.directionthis.delay = 50if (direction === 1) {if (this.yPos > 0) this.yPos = 0} else if (direction === 0) {let h = this.realBoxHeight / 2 * -1if (this.yPos < h) this.yPos = h} else if (direction === 2) {if (this.xPos > 0) this.xPos = 0} else if (direction === 3) {let w = this.realBoxWidth * -1if (this.xPos < w) this.xPos = w}if (timer) clearTimeout(timer)timer = setTimeout(() => {this.delay = 0this._move()}, this.delay)},enter () {if (this.hoverStopSwitch) this._stopMove()},leave () {if (this.hoverStopSwitch) this._startMove()},_move () {// 鼠标移入时拦截_move()if (this.isHover) returnthis._cancle() //进入move立即先清除动画 防止频繁touchMove导致多动画同时进行this.reqFrame = requestAnimationFrame(function () {const h = this.realBoxHeight / 2  //实际高度const w = this.realBoxWidth / 2 //宽度let { direction, waitTime } = this.optionslet { step } = thisif (direction === 1) { // 上if (Math.abs(this.yPos) >= h) {this.$emit('ScrollEnd')this.yPos = 0}this.yPos -= step} else if (direction === 0) { // 下if (this.yPos >= 0) {this.$emit('ScrollEnd')this.yPos = h * -1}this.yPos += step} else if (direction === 2) { // 左if (Math.abs(this.xPos) >= w) {this.$emit('ScrollEnd')this.xPos = 0}this.xPos -= step} else if (direction === 3) { // 右if (this.xPos >= 0) {this.$emit('ScrollEnd')this.xPos = w * -1}this.xPos += step}if (this.singleWaitTime) clearTimeout(this.singleWaitTime)if (!!this.realSingleStopHeight) { //是否启动了单行暂停配置if (Math.abs(this.yPos) % this.realSingleStopHeight < step) { // 符合条件暂停waitTimethis.singleWaitTime = setTimeout(() => {this._move()}, waitTime)} else {this._move()}} else if (!!this.realSingleStopWidth) {if (Math.abs(this.xPos) % this.realSingleStopWidth < step) { // 符合条件暂停waitTimethis.singleWaitTime = setTimeout(() => {this._move()}, waitTime)} else {this._move()}} else {this._move()}}.bind(this))},_initMove () {this.$nextTick(() => {const { switchDelay } = this.optionsconst { autoPlay, isHorizontal } = thisthis._dataWarm(this.data)this.copyHtml = '' //清空copyif (isHorizontal) {this.height = this.$refs.wrap.offsetHeightthis.width = this.$refs.wrap.offsetWidthlet slotListWidth = this.$refs.slotList.offsetWidth// 水平滚动设置warp widthif (autoPlay) {// 修正offsetWidth四舍五入slotListWidth = slotListWidth * 2 + 1}this.$refs.realBox.style.width = slotListWidth + 'px'this.realBoxWidth = slotListWidth}if (autoPlay) {this.ease = 'ease-in'this.delay = 0} else {this.ease = 'linear'this.delay = switchDelayreturn}// 是否可以滚动判断if (this.scrollSwitch) {let timerif (timer) clearTimeout(timer)this.copyHtml = this.$refs.slotList.innerHTMLsetTimeout(() => {this.realBoxHeight = this.$refs.realBox.offsetHeightthis._move()}, 0);} else {this._cancle()this.yPos = this.xPos = 0}})},_dataWarm (data) {if (data.length > 100) {console.warn(`数据达到了${data.length}条有点多哦~,可能会造成部分老旧浏览器卡顿。`);}},_startMove () {this.isHover = false //开启_movethis._move()},_stopMove () {this.isHover = true //关闭_move// 防止频频hover进出单步滚动,导致定时器乱掉if (this.singleWaitTime) clearTimeout(this.singleWaitTime)this._cancle()},},mounted () {this._initMove()},watch: {data (newData, oldData) {this._dataWarm(newData)//监听data是否有变更if (!arrayEqual(newData, oldData)) {this.reset()}},autoPlay (bol) {if (bol) {this.reset()} else {this._stopMove()}}},beforeCreate () {this.reqFrame = null // move动画的animationFrame定时器this.singleWaitTime = null // single 单步滚动的定时器this.isHover = false // mouseenter mouseleave 控制this._move()的开关this.ease = 'ease-in'},beforeDestroy () {this._cancle()clearTimeout(this.singleWaitTime)}}
</script>


http://www.hkcw.cn/article/REbsemTyZv.shtml

相关文章

【实证分析】上市公司全要素生产率+5种测算方式（1999-2024年）

【实证分析】上市公司全要素生产率+5种测算方式（1999-2024年）

上市公司的全要素生产率&#xff08;TFP&#xff09;衡量企业在资本、劳动及中间投入之外&#xff0c;通过技术进步、管理效率和规模效应等因素提升产出的能力。与单纯的劳动生产率或资本生产率不同&#xff0c;TFP综合反映了企业创新能力、资源配置效率和组织优化水平&#xf…
阅读更多...
在 Ubuntu 上安装 NVM (Node Version Manager) 的步骤

在 Ubuntu 上安装 NVM (Node Version Manager) 的步骤

NVM (Node Version Manager) 是一个用于管理多个 Node.js 版本的工具&#xff0c;它允许您在同一台设备上安装、切换和管理不同版本的 Node.js。以下是在 Ubuntu 上安装 NVM 的详细步骤&#xff1a; 安装前准备 可先在windows上安装ubuntu 参考链接&#xff1a;https://blog.…
阅读更多...
4. Observer / Event（观察者模式） C++

4. Observer / Event（观察者模式） C++

4. Observer / Event（观察者模式） C++ 1. 动机（场景） 适用于观察者对象（可以有多个）在观察某个对象（目标对象）的状态，如果该对象的状态发生改变，观察者对象都将收到通知。 举个例子，当我们要做一个文件分割器（就是将一个大文件分割成指定大小的小文件），这时还需…
阅读更多...
多模态融合新方向：光学+AI如何智能分拣，提升塑料回收率？

多模态融合新方向：光学+AI如何智能分拣，提升塑料回收率？

【导读】 面对触目惊心的全球塑料污染&#xff08;每分钟百万瓶、年耗五万亿袋&#xff09;以及较低的塑料回收率&#xff0c;本研究聚焦提升回收效率的核心环节——自动分拣技术。尽管AMP Robotics等公司利用结合现代机器学习&#xff08;如R-CNN、YOLO系列&#xff09;的光学…
阅读更多...
GlobalExceptionHandler 自定义异常类 + 处理validation的异常

GlobalExceptionHandler 自定义异常类 + 处理validation的异常

在 Spring Boot 项目中&#xff0c;​自定义异常通常用于处理特定的业务逻辑错误&#xff0c;并结合全局异常处理器&#xff08;ControllerAdvice&#xff09;统一返回结构化的错误信息。 一.全局异常处理器&#xff1a; 1. 自定义异常类​ 定义一个继承自 RuntimeExceptio…
阅读更多...
零基础设计模式——结构型模式 - 代理模式

零基础设计模式——结构型模式 - 代理模式

第三部分&#xff1a;结构型模式 - 代理模式 (Proxy Pattern) 在学习了享元模式如何通过共享对象来优化资源使用后&#xff0c;我们来探讨结构型模式的最后一个模式——代理模式。代理模式为另一个对象提供一个替身或占位符以控制对这个对象的访问。 核心思想&#xff1a;为其…
阅读更多...
从 0 到 1 的显示革命：九天画芯张锦解码铁电液晶技术进化史

从 0 到 1 的显示革命：九天画芯张锦解码铁电液晶技术进化史

一、显示技术困局&#xff1a;传统液晶的天花板在哪里&#xff1f; 在消费电子与工业显示高速发展的今天&#xff0c;传统液晶技术正遭遇物理极限挑战。受 “边缘场效应” 制约&#xff0c;液晶分子因粘附像素格电极边框&#xff0c;仅中心区域可自由旋转&#xff0c;边缘分子的…
阅读更多...
MySql（六）

MySql（六）

插入数据 对mysql的表中的数据进行插入数据操作 语法格式&#xff1a; insert into 表名 &#xff08;字段名1&#xff0c;字段名2..&#xff09; values (字段值1&#xff0c;字段值2...) 这个有点类似键值对的关系。 一对一 1&#xff09;首先准备一张表 /* Navicat Pre…
阅读更多...
leetcode:372. 超级次方（python3解法，数学相关算法题）

leetcode:372. 超级次方（python3解法，数学相关算法题）

难度&#xff1a;中等 你的任务是计算 ab 对 1337 取模&#xff0c;a 是一个正整数&#xff0c;b 是一个非常大的正整数且会以数组形式给出。 示例 1&#xff1a; 输入&#xff1a;a 2, b [3] 输出&#xff1a;8示例 2&#xff1a; 输入&#xff1a;a 2, b [1,0] 输出&…
阅读更多...
C++ —（详述c++特性）

C++ —（详述c++特性）

一 namespeace&#xff08;命名空间&#xff09; namespace是一个自定义的空间&#xff0c;这个空间相当于一个总文件夹&#xff0c;总文件可以有好多个&#xff0c;里面的小文件夹或者其他文件&#xff0c;也可以有其他各种各样的文件&#xff0c; 定义&#xff1a;命名空间是…
阅读更多...
20250529-C#知识：属性

20250529-C#知识：属性

C#知识&#xff1a;属性 在开发过程中&#xff0c;在需要public读取并且不允许从外界修改的情况下经常会用到属性。本文简单介绍一下属性。 1、主要内容及代码示例 属性类似成员变量属性包括get和set语句块属性能单独为get和set设置访问权限属性能为get和set操作添加处理逻辑g…
阅读更多...
知识课堂|sCMOS相机可编程快门模式解析

知识课堂|sCMOS相机可编程快门模式解析

sCMOS相机凭借高灵敏度、高动态、低读出噪声特性&#xff0c;成为生命科学成像领域的核心设备。在光片荧光显微镜LSFM成像应用中&#xff0c;传统卷帘快门的时序限制可能引发运动伪影或光片照明不均匀问题。可编程快门模式通过精确控制传感器曝光时序&#xff0c;实现与激光扫描…
阅读更多...
Apache Kafka 实现原理深度解析：生产、存储与消费全流程

Apache Kafka 实现原理深度解析：生产、存储与消费全流程

Apache Kafka 实现原理深度解析&#xff1a;生产、存储与消费全流程 引言 Apache Kafka 作为分布式流处理平台的核心&#xff0c;其高吞吐、低延迟、持久化存储的设计使其成为现代数据管道的事实标准。本文将从消息生产、持久化存储、消息消费三个阶段拆解 Kafka 的核心实现原…
阅读更多...
已解决：.NetCore控制台程序(WebAPI)假死,程序挂起接口不通

已解决：.NetCore控制台程序(WebAPI)假死,程序挂起接口不通

本问题已得到解决&#xff0c;请看以下小结&#xff1a; 关于《.NetCore控制台程序(WebAPI)假死,程序暂停接口不通》的解决方案 记录备注报错时间2025年报错版本VS2022 WINDOWS10报错复现鼠标点一下控制台&#xff0c;会卡死报错描述——报错截图——报错原因 控制台启用了“快…
阅读更多...
π0-通用VLA模型-2024.11.13-开源

π0-通用VLA模型-2024.11.13-开源

π 0 π0 π0在2025.2.4开源&#xff0c;目前在github有3.4k的星标&#xff0c;说他是通用策略表现在两点上&#xff1a; 做的任务是多元的而且都比较复杂&#xff0c;比如叠衣服&#xff0c;从洗衣机里拿出衣服等等既可以控制单臂&#xff0c;又可以双臂&#xff0c;还可以控…
阅读更多...
基于本地化大模型的智能编程助手全栈实践：从模型部署到IDE深度集成学习心得

基于本地化大模型的智能编程助手全栈实践：从模型部署到IDE深度集成学习心得

近年来&#xff0c;随着ChatGPT、Copilot等AI编程工具的爆发式增长&#xff0c;开发者生产力获得了前所未有的提升。然而&#xff0c;云服务的延迟、隐私顾虑及API调用成本促使我探索一种更自主可控的方案&#xff1a;基于开源大模型构建本地化智能编程助手。本文将分享我构建本…
阅读更多...
机器视觉2，硬件选型

机器视觉2，硬件选型

机器视觉1&#xff0c;学习了硬件的基本知识和选型&#xff0c;现在另外的教材巩固知识 选相机 工业相机选型的保姆级教程_哔哩哔哩_bilibili 1.先看精度多少mm&#xff0c;被检测物体长宽多少mm》分辨率&#xff0c; 选出合理范围内的相机 2.靶面尺寸&#xff0c;得出分…
阅读更多...
预处理，咕咕咕

预处理，咕咕咕

1.预定义符号 _FILE_ //编译的源文件 _LINE_ //文件行号 _DATA_ //文件编译日期 _TIME_ //文件编译时间 _STDC_ //如果文件编译遵循ANSI C,其值为一&#xff0c;否则未定义 printf("%d",_FILE_,_LINE_);2.#define定义常量 #define name stuff #define MAX 100…
阅读更多...
UI自动化测试的革新，新一代AI工具MidScene.js实测！

UI自动化测试的革新，新一代AI工具MidScene.js实测！

前言 AI已经越来越深入地走入我们的实际工作，在软件测试领域，和AI相关的新测试工具、方法也层出不穷。在之前我们介绍过结合 mcp server 实现 AI 驱动测试的案例，本文我们将介绍一个近期崭露头角的国产AI测试工具 Midscene.js Midscene.js简介 MidScene.js 是由字节跳动 w…
阅读更多...
什么是CVSD

什么是CVSD

CVSD&#xff08;Continuous Variable Slope Delta Modulation&#xff0c;连续可变斜率增量调制&#xff09; 是一种用于蓝牙语音通话的超低复杂度音频编码技术。它通过1比特量化实时跟踪音频信号的变化趋势&#xff0c;是早期蓝牙设备&#xff08;HSP/HFP 1.0-1.5&#xff09…
阅读更多...
推荐文章

Copyright @ 2022~2023