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

今天遇到一个大屏需求：
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 = 0this._stopMove()// 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.pswp.cn/bicheng/82926.shtml

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

相关文章

[Protobuf] 快速上手:安全高效的序列化指南

[Protobuf] 快速上手:安全高效的序列化指南

标题&#xff1a;[Protobuf] (1)快速上手 水墨不写bug 文章目录 一、什么是protobuf&#xff1f;二、protobuf的特点三、使用protobuf的过程&#xff1f;1、定义消息格式&#xff08;.proto文件&#xff09;(1)指定语法版本(2)package 声明符 2、使用protoc编译器生成代码&…
阅读更多...
uniapp调用java接口 跨域问题

uniapp调用java接口 跨域问题

前言 之前在Windows10本地 调试一个旧项目&#xff0c;手机移动端用的是Uni-app&#xff0c;vue的版本是v2。后端是java spring-boot。运行手机移动端的首页请求后台接口老是提示错误信息。 错误信息如下&#xff1a; Access to XMLHttpRequest at http://localhost:8080/api/…
阅读更多...
[ Qt ] | Qlabel使用

[ Qt ] | Qlabel使用

目录 属性 setTextFormat 插入图片 设置图片根据窗口大小实时变化 边框和对其方式 ​编辑 设置缩进 设置伙伴 Qlabel可以用来显式图片和文字 属性 text textFormat Qlabel独有的机制&#xff1a;buddy setTextFormat 插入图片 设置图片根据窗口大小实时变化 Qt中表…
阅读更多...
Springboot 项目一启动就获取HttpSession

Springboot 项目一启动就获取HttpSession

在 Spring Boot 项目中&#xff0c;HttpSession 是有状态的&#xff0c;通常只有在用户发起 HTTP 请求并建立会话后才会创建。因此&#xff0c;在项目启动时&#xff08;即应用刚启动还未处理任何请求&#xff09;是无法获取到 HttpSession 的。 方法一&#xff1a;使用 HttpS…
阅读更多...
Step9—Ambari Web UI 初始化安装 （Ambari3.0.0）

Step9—Ambari Web UI 初始化安装 （Ambari3.0.0）

Ambari Web UI 安装 如果还不会系统性的部署&#xff0c;或者前置内容不熟悉&#xff0c;建议从Step1 开始阅读。不通版本针对于不同操作系统可能存在差异&#xff01;这里我也整理好了 https://doc.janettr.com/install/manual/ 1. 进入 Ambari Web UI 并登录 在浏览器中访…
阅读更多...
热门大型语言模型（LLM）应用开发框架

热门大型语言模型（LLM）应用开发框架

我们来深入探索这些强大的大型语言模型&#xff08;LLM&#xff09;应用开发框架&#xff0c;并且我会尝试用文本形式描述一些核心的流程图&#xff0c;帮助您更好地理解它们的工作机制。由于我无法直接生成图片&#xff0c;我会用文字清晰地描述流程图的各个步骤和连接。 Lang…
阅读更多...
机器学习数据降维方法

机器学习数据降维方法

1.数据类型 2.如何选择降维方法进行数据降维 3.线性降维&#xff1a;主成分分析&#xff08;PCA&#xff09;、线性判别分析&#xff08;LDA&#xff09; 4.非线性降维 5.基于特征选择的降维 6.基于神经网络的降维 数据降维是将高维数据转换为低维表示的过程&#xff0c;旨在保…
阅读更多...
太阳系运行模拟程序-html动画

太阳系运行模拟程序-html动画

太阳系运行模拟程序-html动画 by AI: <!DOCTYPE html> <html lang"zh"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>交互式太阳系…
阅读更多...
2025年全国青少年信息素养大赛 scratch图形化编程挑战赛 小低组初赛 内部集训模拟题解析

2025年全国青少年信息素养大赛 scratch图形化编程挑战赛 小低组初赛 内部集训模拟题解析

2025年信息素养大赛初赛scratch模拟题解析 博主推荐 所有考级比赛学习相关资料合集【推荐收藏】 scratch资料 Scratch3.0系列视频课程资料零基础学习scratch3.0【入门教学 免费】零基础学习scratch3.0【视频教程 114节 免费】 历届蓝桥杯scratch国赛真题解析历届蓝桥杯scr…
阅读更多...
grid网格布局

grid网格布局

使用flex布局的痛点 如果使用justify-content: space-between;让子元素两端对齐&#xff0c;自动分配中间间距&#xff0c;假设一行4个&#xff0c;如果每一行都是4的倍数那没任何问题&#xff0c;但如果最后一行是2、3个的时候就会出现下面的状况&#xff1a; /* flex布局 两…
阅读更多...
通义灵码2.5——基于MCP实现我的12306火车票智能查询小助手

通义灵码2.5——基于MCP实现我的12306火车票智能查询小助手

本文因排版显示问题&#xff0c;为保证阅读体验&#xff0c;请大家访问&#xff1a; 通义灵码2.5——基于MCP打造我的12306火车票智能查询小助手-CSDN博客 前沿技术应用全景图 本项目作为通义灵码2.5的标杆实践案例&#xff0c;展现了AI辅助开发在复杂业务系统中的革命性突破…
阅读更多...
Unity Button 交互动画

Unity Button 交互动画

在UGUI的Button组件中&#xff0c;有一个过渡动画表现的功能。可以对按钮的不同交互状态添加交互反馈动画&#xff0c;来提高玩家的交互体验。 交互状态 名称 描述 Normal 正常情况 Highlighted 高亮显示&#xff0c;例如鼠标触碰到按钮点击范围 Pressed 按钮被按下的时…
阅读更多...
钉钉热点实时推送助理-思路篇

钉钉热点实时推送助理-思路篇

以下是针对热点实时推送助理的功能描述&#xff0c;结合机器学习技术栈与用户场景的通俗化解释&#xff1a; 快速体验的话直接用钉钉扫描下方二维码体验 1. 核心功能 &#xff08;1&#xff09;热点抓取引擎 类比&#xff1a;像蜘蛛爬取全网信息&#xff08;网络爬虫信息抽取…
阅读更多...
remote: error: hook declined to update refs/heads.....

remote: error: hook declined to update refs/heads.....

gitee拉取分支&#xff0c;修改上传出现的问题&#xff0c;折腾了好久&#xff0c;浅浅记录. 1. 首次克隆仓库 # 克隆仓库&#xff08;使用 HTTPS 或 SSH&#xff09; git clone ------------ cd xxx-project2. 配置正确的用户信息&#xff08;关键步骤&#xff01;&#xff…
阅读更多...
使用Vue + Element Plus实现可多行编辑的分页表格

使用Vue + Element Plus实现可多行编辑的分页表格

需求背景&#xff1a; 在现代前端开发中&#xff0c;表格作为数据展示和交互的重要组件&#xff0c;在各类管理系统、数据平台中有着广泛的应用。随着用户对数据操作便捷性要求的不断提高&#xff0c;具备灵活编辑功能的表格成为了开发中的常见需求。特别是在需求处理大…
阅读更多...
奥威BI+AI——高效智能数据分析工具，引领数据分析新时代

奥威BI+AI——高效智能数据分析工具，引领数据分析新时代

随着数据量的激增&#xff0c;企业对高效、智能的数据分析工具——奥威BIAI的需求日益迫切。奥威BIAI&#xff0c;作为一款颠覆性的数据分析工具&#xff0c;凭借其独特功能&#xff0c;正在引领数据分析领域的新纪元。 一、‌零报表环境下的极致体验‌ 奥威BIAI突破传统报表限…
阅读更多...
【机器学习基础】机器学习入门核心算法：K均值（K-Means）

【机器学习基础】机器学习入门核心算法：K均值（K-Means）

机器学习入门核心算法&#xff1a;K均值&#xff08;K-Means&#xff09; 1. 算法逻辑2. 算法原理与数学推导2.1 目标函数2.2 数学推导2.3 时间复杂度 3. 模型评估内部评估指标外部评估指标&#xff08;需真实标签&#xff09; 4. 应用案例4.1 客户细分4.2 图像压缩4.3 文档聚类…
阅读更多...
springboot多模块父pom打包正常，单模块报错

springboot多模块父pom打包正常，单模块报错

背景&#xff1a;因为项目开发中经常发测试环境&#xff0c;发现使用阿里的插件能一键上传&#xff0c;不用手动上传比较方便。但是多模块有多个启动jar的时候&#xff0c;全局打包太慢&#xff0c;单独打发现报错。这里贴一下我使用这个插件的方式&#xff1a; 附带一个我感觉…
阅读更多...
通义灵码2.5——基于MCP打造我的12306火车票智能查询小助手

通义灵码2.5——基于MCP打造我的12306火车票智能查询小助手

前沿技术应用全景图 本项目作为通义灵码2.5的标杆实践案例&#xff0c;展现了AI辅助开发在复杂业务系统中的革命性突破。通过深度集成12306 MCP服务体系&#xff0c;我们构建了一个融合智能决策、环境感知和自主优化的新一代火车票查询系统。 #mermaid-svg-4D7QqwJjsQRdKVP7 {…
阅读更多...
进程间通信(共享内存)

进程间通信(共享内存)

目录 前置&#xff1a; 一 原理 二 API 1. shmgetr 2. shmctl 3. 指令操作 2. 删除 3. 挂接 4. 断开挂接 三 demo代码 四 共享内存的特征 前置&#xff1a; 1.前面说的不管是匿名管道还是命名管道都是基于文件的思想构建的一套进程间通信的方案&#xff0c;那有没有…
阅读更多...
最新文章

Copyright @ 2022~2023