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
繁體地址，請注明出處：http://hk.pswp.cn/bicheng/82926.shtml
英文地址，請注明出處：http://en.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