轮播卡片切换实现

背景

 如上图，实现一个轮播卡片能力，支持手动滑动，手动拖动，已经点击两端切换按钮。

实现

<template><div class="top-menu"><!-- Swiper --><div v-if="headerMenuList.length > 9" class="swiper-button-prev" @click="goPre" /><div :class="['swiper-container', (headerMenuList.length < 10 ? 'swiper-no-swiping':'')]"><div class="swiper-wrapper"><div v-for="(item,index) in headerMenuList" :class="['swiper-slide', (currentIndex === index ? 'activeBtn':''),((headerMenuList && headerMenuList.length) > 9 ? '':'defaultWidth')]" :key="index" @click="clickMenuItem(item,index)"><div class="swiper-slide-container"><div class="swiper-slide-title">{{ item.name }}</div><div class="swiper-slide-content"><div>{{ item.status }}</div><div v-if="item.des">{{ item.des || '' }} {{ item.time || '' }} </div></div></div></div></div></div><div v-if="headerMenuList.length > 9" class="swiper-button-next" @click="goNextPage" /></div>
</template><script>
import Swiper from 'swiper';
import '@/assets/style/swiper.min.css';export default {name: 'TopMenu',filters: {beyondHiding(value) {const regex = /[\u4e00-\u9fa5]/g;if (!value) return '';if (regex.test(value)) {if (value.length > 7) {return value.substring(0, 5) + '...';} else {return value;}} else {if (value.length > 10) {return value.substring(0, 8) + '...';} else {return value;}}}},props: {handleSelectMenu: {type: Function,default: () => {}}},data() {return {swiper: null,currentIndex: 0,windowWidth: window.innerWidth,};},computed: {headerMenuList() {console.log(this.currentTenant, 'this.currentTenantthis.currentTenant');return [{name: '孙悟空',status: 1,}, {name: '孙悟空2',status: 2,des: '较上个月',time: 50}, {name: '孙悟空3',status: 1,}, {name: '孙悟空4',status: 3,des: '大家可能就'}, {name: '孙悟空5',status: 1,}, {name: '孙悟空6',status: 1,}, {name: '孙悟空7',status: 11,}, {name: '孙悟空8',status: 1,des: '平均响应时常',time: 80}, {name: '孙悟空9',status: 1,}, {name: '孙悟空10',status: 12,}, {name: '孙悟空11',status: 1,des: '大家可能得我就测九年级可男可女缴纳哦就弄v额靓女呢哦法令纹'}, {name: '孙悟空12',status: 14,}];},},mounted() {this.initSwiper();},methods: {initSwiper() {this.swiper = new Swiper('.swiper-container', {// 在这里配置Swiper选项，例如自动播放、分页器、导航等loop: false,speed: 50,noSwiping: true,mousewheel: true,slidesPerView: 6,spaceBetween: 16,navigation: {nextEl: '.swiper-button-next',prevEl: '.swiper-button-prev',disabledClass: 'my-button-disabled',},pagination: {el: '.swiper-pagination',clickable: true,}});},goPre() {// 每次跳转10条// console.log(this.currentIndex, "前进");if (this.currentIndex < 10) {this.swiper.slideTo(1);} else if (this.currentIndex > 10 <= 20) {this.swiper.slideTo(1);} else if (this.currentIndex > 20 <= 30) {this.swiper.slideTo(10);} else {return;}// this.swiper.slidePrev()},goNextPage() {// if(this.currentIndex < 10){//    this.swiper.slideTo(10)// }else if( 10 < this.currentIndex <= 20){//     this.swiper.slideTo(20)// }else if( 20 < this.currentIndex <= 30){//     this.swiper.slideTo(30)// }else{//   return;// }this.swiper.slideNext();},getQueryVariable() {const url = window.location.href;if (url.includes('#')) {return url.split('#')[0].split('/')[5];} else {return '';}},clickMenuItem(val, index) {this.currentIndex = index;console.log(val, index, '234567');}}
};
</script><style rel="stylesheet/scss" lang="scss" scoped>
.top-menu {width: 100%;height: 85px;position: relative;// border: 1px solid red;
}.swiper-container {width: 100%;margin-left: auto;margin-right: auto;}
.swiper-slide {text-align: center;font-size: 14px;height: 85px;width: 180px !important;cursor: pointer;border-radius: 12px;background: rgba(245, 237, 253, 1);/* Center slide text vertically */display: -webkit-box;display: -ms-flexbox;display: -webkit-flex;display: flex;-webkit-box-pack: center;-ms-flex-pack: center;-webkit-justify-content: center;justify-content: center;-webkit-box-align: center;-ms-flex-align: center;-webkit-align-items: center;align-items: center;transition-property: all;flex-direction:column;
}
.defaultWidth{width:180px;text-overflow: ellipsis;overflow: hidden;white-space: nowrap;
}
.defaultWidthMax{width:180px;text-overflow: ellipsis;overflow: hidden;white-space: nowrap;
}
.swiper-slide-container {width:100%;white-space: nowrap;text-overflow: ellipsis;overflow: hidden;display: flex;flex-direction: column;align-items: start;margin-left: 24px;.swiper-slide-title{color: rgba(27, 29, 31, 1);font-family: Poppins;font-weight: 500;font-size: 12px;}.swiper-slide-content{display: flex;color: rgba(27, 29, 31, 1);font-family: Poppins-SemiBold;font-size: 18px;margin-top: 8px;:nth-child(2){margin-left: 16px;padding: 0px 4px;border-radius: 12px;background: rgba(255, 255, 255, 1);max-width: 129px;white-space: nowrap;text-overflow: ellipsis;overflow: hidden;color: rgba(27, 29, 31, 1);font-family: Poppins;font-weight: 500;font-size: 12px;transform: scale(0.9);}}
}.swiper-button-next:after, .swiper-button-prev:after {font-family: swiper-icons;font-size: 12px;text-transform: none;letter-spacing: 0;text-transform: none;font-variant: initial;line-height: 1;color: rgb(114, 120, 128);font-weight: 500;margin-top: 4px;
}
.swiper-button-next, .swiper-button-prev{width: 32px;height: 32px;border-radius: 32px;border: 0.5px solid rgba(234, 234, 234, 1);box-sizing: border-box;background: rgba(255, 255, 255, 1);// background-color: red;
}
.my-button-disabled{opacity: 0.3;
}
.swiper-button-prev {left: -13px;right: auto;
}
.swiper-button-next{right: -13px;left: auto;
}
</style>

依赖版本

"swiper": "^5.4.5",

swiper.min.css

/*** Swiper 5.4.5* Most modern mobile touch slider and framework with hardware accelerated transitions* http://swiperjs.com** Copyright 2014-2020 Vladimir Kharlampidi** Released under the MIT License** Released on: June 16, 2020*/@font-face {font-family: swiper-icons;src: url("data:application/font-woff;charset=utf-8;base64, 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") format("woff");font-weight: 400;font-style: normal
}:root {--swiper-theme-color: #007aff
}.swiper-container {margin-left: auto;margin-right: auto;position: relative;overflow: hidden;list-style: none;padding: 0;z-index: 1
}.swiper-container-vertical>.swiper-wrapper {flex-direction: column
}.swiper-wrapper {position: relative;width: 100%;height: 100%;z-index: 1;display: flex;transition-property: transform;box-sizing: content-box
}.swiper-container-android .swiper-slide,
.swiper-wrapper {transform: translate3d(0px, 0, 0)
}.swiper-container-multirow>.swiper-wrapper {flex-wrap: wrap
}.swiper-container-multirow-column>.swiper-wrapper {flex-wrap: wrap;flex-direction: column
}.swiper-container-free-mode>.swiper-wrapper {transition-timing-function: ease-out;margin: 0 auto
}.swiper-slide {flex-shrink: 0;width: 100%;height: 100%;position: relative;transition-property: transform
}.swiper-slide-invisible-blank {visibility: hidden
}.swiper-container-autoheight,
.swiper-container-autoheight .swiper-slide {height: auto
}.swiper-container-autoheight .swiper-wrapper {align-items: flex-start;transition-property: transform, height
}.swiper-container-3d {perspective: 1200px
}.swiper-container-3d .swiper-cube-shadow,
.swiper-container-3d .swiper-slide,
.swiper-container-3d .swiper-slide-shadow-bottom,
.swiper-container-3d .swiper-slide-shadow-left,
.swiper-container-3d .swiper-slide-shadow-right,
.swiper-container-3d .swiper-slide-shadow-top,
.swiper-container-3d .swiper-wrapper {transform-style: preserve-3d
}.swiper-container-3d .swiper-slide-shadow-bottom,
.swiper-container-3d .swiper-slide-shadow-left,
.swiper-container-3d .swiper-slide-shadow-right,
.swiper-container-3d .swiper-slide-shadow-top {position: absolute;left: 0;top: 0;width: 100%;height: 100%;pointer-events: none;z-index: 10
}.swiper-container-3d .swiper-slide-shadow-left {background-image: linear-gradient(to left, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0))
}.swiper-container-3d .swiper-slide-shadow-right {background-image: linear-gradient(to right, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0))
}.swiper-container-3d .swiper-slide-shadow-top {background-image: linear-gradient(to top, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0))
}.swiper-container-3d .swiper-slide-shadow-bottom {background-image: linear-gradient(to bottom, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0))
}.swiper-container-css-mode>.swiper-wrapper {overflow: auto;scrollbar-width: none;-ms-overflow-style: none
}.swiper-container-css-mode>.swiper-wrapper::-webkit-scrollbar {display: none
}.swiper-container-css-mode>.swiper-wrapper>.swiper-slide {scroll-snap-align: start start
}.swiper-container-horizontal.swiper-container-css-mode>.swiper-wrapper {scroll-snap-type: x mandatory
}.swiper-container-vertical.swiper-container-css-mode>.swiper-wrapper {scroll-snap-type: y mandatory
}:root {--swiper-navigation-size: 44px
}.swiper-button-next,
.swiper-button-prev {position: absolute;top: 50%;width: calc(var(--swiper-navigation-size)/ 44 * 27);height: var(--swiper-navigation-size);margin-top: calc(-1 * var(--swiper-navigation-size)/ 2);z-index: 10;cursor: pointer;display: flex;align-items: center;justify-content: center;color: var(--swiper-navigation-color, var(--swiper-theme-color))
}.swiper-button-next.swiper-button-disabled,
.swiper-button-prev.swiper-button-disabled {opacity: .35;cursor: auto;pointer-events: none
}.swiper-button-next:after,
.swiper-button-prev:after {font-family: swiper-icons;font-size: var(--swiper-navigation-size);text-transform: none !important;letter-spacing: 0;text-transform: none;font-variant: initial;line-height: 1
}.swiper-button-prev,
.swiper-container-rtl .swiper-button-next {left: 10px;right: auto
}.swiper-button-prev:after,
.swiper-container-rtl .swiper-button-next:after {content: 'prev'
}.swiper-button-next,
.swiper-container-rtl .swiper-button-prev {right: 10px;left: auto
}.swiper-button-next:after,
.swiper-container-rtl .swiper-button-prev:after {content: 'next'
}.swiper-button-next.swiper-button-white,
.swiper-button-prev.swiper-button-white {--swiper-navigation-color: #ffffff
}.swiper-button-next.swiper-button-black,
.swiper-button-prev.swiper-button-black {--swiper-navigation-color: #000000
}.swiper-button-lock {display: none
}.swiper-pagination {position: absolute;text-align: center;transition: .3s opacity;transform: translate3d(0, 0, 0);z-index: 10
}.swiper-pagination.swiper-pagination-hidden {opacity: 0
}.swiper-container-horizontal>.swiper-pagination-bullets,
.swiper-pagination-custom,
.swiper-pagination-fraction {bottom: 10px;left: 0;width: 100%
}.swiper-pagination-bullets-dynamic {overflow: hidden;font-size: 0
}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {transform: scale(.33);position: relative
}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active {transform: scale(1)
}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-main {transform: scale(1)
}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev {transform: scale(.66)
}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev-prev {transform: scale(.33)
}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next {transform: scale(.66)
}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next-next {transform: scale(.33)
}.swiper-pagination-bullet {width: 8px;height: 8px;display: inline-block;border-radius: 100%;background: #000;opacity: .2
}button.swiper-pagination-bullet {border: none;margin: 0;padding: 0;box-shadow: none;-webkit-appearance: none;-moz-appearance: none;appearance: none
}.swiper-pagination-clickable .swiper-pagination-bullet {cursor: pointer
}.swiper-pagination-bullet-active {opacity: 1;background: var(--swiper-pagination-color, var(--swiper-theme-color))
}.swiper-container-vertical>.swiper-pagination-bullets {right: 10px;top: 50%;transform: translate3d(0px, -50%, 0)
}.swiper-container-vertical>.swiper-pagination-bullets .swiper-pagination-bullet {margin: 6px 0;display: block
}.swiper-container-vertical>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic {top: 50%;transform: translateY(-50%);width: 8px
}.swiper-container-vertical>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {display: inline-block;transition: .2s transform, .2s top
}.swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet {margin: 0 4px
}.swiper-container-horizontal>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic {left: 50%;transform: translateX(-50%);white-space: nowrap
}.swiper-container-horizontal>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {transition: .2s transform, .2s left
}.swiper-container-horizontal.swiper-container-rtl>.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {transition: .2s transform, .2s right
}.swiper-pagination-progressbar {background: rgba(0, 0, 0, .25);position: absolute
}.swiper-pagination-progressbar .swiper-pagination-progressbar-fill {background: var(--swiper-pagination-color, var(--swiper-theme-color));position: absolute;left: 0;top: 0;width: 100%;height: 100%;transform: scale(0);transform-origin: left top
}.swiper-container-rtl .swiper-pagination-progressbar .swiper-pagination-progressbar-fill {transform-origin: right top
}.swiper-container-horizontal>.swiper-pagination-progressbar,
.swiper-container-vertical>.swiper-pagination-progressbar.swiper-pagination-progressbar-opposite {width: 100%;height: 4px;left: 0;top: 0
}.swiper-container-horizontal>.swiper-pagination-progressbar.swiper-pagination-progressbar-opposite,
.swiper-container-vertical>.swiper-pagination-progressbar {width: 4px;height: 100%;left: 0;top: 0
}.swiper-pagination-white {--swiper-pagination-color: #ffffff
}.swiper-pagination-black {--swiper-pagination-color: #000000
}.swiper-pagination-lock {display: none
}.swiper-scrollbar {border-radius: 10px;position: relative;-ms-touch-action: none;background: rgba(0, 0, 0, .1)
}.swiper-container-horizontal>.swiper-scrollbar {position: absolute;left: 1%;bottom: 3px;z-index: 50;height: 5px;width: 98%
}.swiper-container-vertical>.swiper-scrollbar {position: absolute;right: 3px;top: 1%;z-index: 50;width: 5px;height: 98%
}.swiper-scrollbar-drag {height: 100%;width: 100%;position: relative;background: rgba(0, 0, 0, .5);border-radius: 10px;left: 0;top: 0
}.swiper-scrollbar-cursor-drag {cursor: move
}.swiper-scrollbar-lock {display: none
}.swiper-zoom-container {width: 100%;height: 100%;display: flex;justify-content: center;align-items: center;text-align: center
}.swiper-zoom-container>canvas,
.swiper-zoom-container>img,
.swiper-zoom-container>svg {max-width: 100%;max-height: 100%;object-fit: contain
}.swiper-slide-zoomed {cursor: move
}.swiper-lazy-preloader {width: 42px;height: 42px;position: absolute;left: 50%;top: 50%;margin-left: -21px;margin-top: -21px;z-index: 10;transform-origin: 50%;animation: swiper-preloader-spin 1s infinite linear;box-sizing: border-box;border: 4px solid var(--swiper-preloader-color, var(--swiper-theme-color));border-radius: 50%;border-top-color: transparent
}.swiper-lazy-preloader-white {--swiper-preloader-color: #fff
}.swiper-lazy-preloader-black {--swiper-preloader-color: #000
}@keyframes swiper-preloader-spin {100% {transform: rotate(360deg)}
}.swiper-container .swiper-notification {position: absolute;left: 0;top: 0;pointer-events: none;opacity: 0;z-index: -1000
}.swiper-container-fade.swiper-container-free-mode .swiper-slide {transition-timing-function: ease-out
}.swiper-container-fade .swiper-slide {pointer-events: none;transition-property: opacity
}.swiper-container-fade .swiper-slide .swiper-slide {pointer-events: none
}.swiper-container-fade .swiper-slide-active,
.swiper-container-fade .swiper-slide-active .swiper-slide-active {pointer-events: auto
}.swiper-container-cube {overflow: visible
}.swiper-container-cube .swiper-slide {pointer-events: none;-webkit-backface-visibility: hidden;backface-visibility: hidden;z-index: 1;visibility: hidden;transform-origin: 0 0;width: 100%;height: 100%
}.swiper-container-cube .swiper-slide .swiper-slide {pointer-events: none
}.swiper-container-cube.swiper-container-rtl .swiper-slide {transform-origin: 100% 0
}.swiper-container-cube .swiper-slide-active,
.swiper-container-cube .swiper-slide-active .swiper-slide-active {pointer-events: auto
}.swiper-container-cube .swiper-slide-active,
.swiper-container-cube .swiper-slide-next,
.swiper-container-cube .swiper-slide-next+.swiper-slide,
.swiper-container-cube .swiper-slide-prev {pointer-events: auto;visibility: visible
}.swiper-container-cube .swiper-slide-shadow-bottom,
.swiper-container-cube .swiper-slide-shadow-left,
.swiper-container-cube .swiper-slide-shadow-right,
.swiper-container-cube .swiper-slide-shadow-top {z-index: 0;-webkit-backface-visibility: hidden;backface-visibility: hidden
}.swiper-container-cube .swiper-cube-shadow {position: absolute;left: 0;bottom: 0px;width: 100%;height: 100%;background: #000;opacity: .6;-webkit-filter: blur(50px);filter: blur(50px);z-index: 0
}.swiper-container-flip {overflow: visible
}.swiper-container-flip .swiper-slide {pointer-events: none;-webkit-backface-visibility: hidden;backface-visibility: hidden;z-index: 1
}.swiper-container-flip .swiper-slide .swiper-slide {pointer-events: none
}.swiper-container-flip .swiper-slide-active,
.swiper-container-flip .swiper-slide-active .swiper-slide-active {pointer-events: auto
}.swiper-container-flip .swiper-slide-shadow-bottom,
.swiper-container-flip .swiper-slide-shadow-left,
.swiper-container-flip .swiper-slide-shadow-right,
.swiper-container-flip .swiper-slide-shadow-top {z-index: 0;-webkit-backface-visibility: hidden;backface-visibility: hidden
}

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

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

相关文章

并查集----格子游戏

并查集----格子游戏

并查集中最重要的是要搞懂&#xff1a; 不明白的可以拿纸自己先演示一番&#xff0c;find函数不仅能找到他们的祖先数&#xff0c;而且同时也能更新路径的子结点都等于祖先&#xff0c;然后以后寻找时会更加的方便&#xff01;
阅读更多...
蓝桥杯单片机速成4-温度传感器DS18B20

蓝桥杯单片机速成4-温度传感器DS18B20

目录 一、电路图 二、底层驱动代码 三、温度读取实现 四、实际使用 一、电路图 二、底层驱动代码 时序是单总线 我们需要修改的地方是单总线内部延时函数&#xff0c;改成 void Delay_OneWire(unsigned int t) { t*12; while(t--); } #ifndef __ONEWIRE_H #defi…
阅读更多...
Unity TrailRenderer的基本了解

Unity TrailRenderer的基本了解

在Unity中&#xff0c;TrailRenderer组件用于在对象移动时创建轨迹效果。通常用于增强游戏中的动态物体&#xff0c;比如子弹、飞行道具或者角色移动时的拖尾效果。 下面来了解下它的基本信息。 1、创建 法1&#xff1a;通过代码创建 using UnityEngine;public class Trail…
阅读更多...
动态规划刷题（算法竞赛、蓝桥杯）--合唱队形（线性DP）

动态规划刷题（算法竞赛、蓝桥杯）--合唱队形（线性DP）

1、题目链接&#xff1a;[NOIP2004 提高组] 合唱队形 - 洛谷 #include <bits/stdc.h> using namespace std; int n,ans; int a[105],f[105][2];//f[i][2]中2表示正反两个方向int main(){cin>>n;for(int i1;i<n;i){cin>>a[i];}//正方向求最长上升子序列 a[…
阅读更多...
[flink 实时流基础] 输出算子（Sink）

[flink 实时流基础] 输出算子（Sink）

学习笔记 Flink作为数据处理框架&#xff0c;最终还是要把计算处理的结果写入外部存储&#xff0c;为外部应用提供支持。 文章目录 **连接到外部系统****输出到文件**输出到 Kafka输出到 mysql自定义 sink 连接到外部系统 Flink的DataStream API专门提供了向外部写入数据的方…
阅读更多...
HTTP，Servlet

HTTP，Servlet

HTTP 概念&#xff1a;HyperTextTransferProtocol&#xff0c;超文本传输协议&#xff0c;规定了浏览器和服务器之间数据传输的规则 HTTP协议特点&#xff1a; 1.基于TCP协议&#xff1a;面向连接&#xff0c;安全 2.基于请求-响应模型的&#xff1a;一次请求对应一次响应 …
阅读更多...
【学习笔记】java项目—苍穹外卖day06

【学习笔记】java项目—苍穹外卖day06

文章目录 苍穹外卖-day06课程内容1. HttpClient1.1 介绍1.2 入门案例1.2.1 GET方式请求1.2.2 POST方式请求 2. 微信小程序开发2.1 介绍2.2 准备工作2.3 入门案例2.3.1 小程序目录结构2.3.2 编写和编译小程序2.3.3 发布小程序 3. 微信登录3.1 导入小程序代码3.2 微信登录流程3.3…
阅读更多...
基于Java的车辆出入校预约管理系统设计与实现(论文+源码)_kaic

基于Java的车辆出入校预约管理系统设计与实现(论文+源码)_kaic

摘 要 二十一世纪以来我国科技水平得到很大提升&#xff0c;人们对于生活的美好向往更加强烈&#xff0c;而目前的车辆出入校预约管理由于存在管理不规范等缺点&#xff0c;严重影响了校园的安全&#xff0c;因此&#xff0c;需要设计一个车辆出入校预约管理系统对人们出入校园…
阅读更多...
帝国CMS十合一源码/字典/成语/古诗词/二十四节气/英语单词/百家姓/范文文库/词语等

帝国CMS十合一源码/字典/成语/古诗词/二十四节气/英语单词/百家姓/范文文库/词语等

帝国CMS十合一源码/字典/成语/古诗词/二十四节气/英语单词/百家姓/范文文库/词语等 功能包含： 成语大全 二十四节气 英语单词 古诗词 近反义词 词语造句 汉语字典 英文缩写 百家姓 范文文库 文件目录：1个数据库 1个系统源码 1个伪静态规则 安装方式：把1.2G的…
阅读更多...
跑spark的yarn模式时RM连不上的情况

跑spark的yarn模式时RM连不上的情况

在linux控制台跑spark on yarn一个测试案例&#xff0c;日志中总显示RM连yarn服务的时候是&#xff1a;0.0.0.0:8032 具体情况如下图&#xff1a; 我问题出现的原因&#xff0c;总结如下&#xff1a; 1.防火墙没关闭&#xff0c;关闭 2.spark-env.sh这个文件的YARN_CONF_DIR…
阅读更多...
T1 神奇苹果桶 (25分) - 小米前端笔试编程题解

T1 神奇苹果桶 (25分) - 小米前端笔试编程题解

考试平台&#xff1a; 赛码 题目类型&#xff1a; 20道选择 2道编程题 考试时间&#xff1a; 2024-03-23 &#xff08;两小时&#xff09; 题目描述 小希在森林冒险的时候发现一个神奇的木桶&#xff0c;某些时会凭空出现一些苹果&#xff0c;小希很解地大家分享了这一个神奇…
阅读更多...
CCIE-01-VLAN-Trunk

CCIE-01-VLAN-Trunk

目录 实验条件网络拓朴逻辑拓扑物理拓扑实验目的 开始配置配置SW1配置SW2检验证配置结果 实验条件 网络拓朴 逻辑拓扑 物理拓扑 实验目的 SW1和SW2之间的E2/0-3配置为trunk&#xff0c;使用802.1q协议&#xff0c;不需要配置捆绑根据逻辑图和物理图标识&#xff0c;使得R1~R7…
阅读更多...
蓝桥杯（更新中）

蓝桥杯（更新中）

递归与递推 递归 1.指数型枚举 解析&#xff1a;从 1 ∼ n 这 n 个整数中随机选取任意多个&#xff0c;输出所有可能的选择方案。 思路&#xff1a;枚举每一位对应的数字选与不选&#xff0c;例如&#xff1a;第一位对应的数字为1&#xff0c;有一种方案是选1&#xff0c;另…
阅读更多...
Gitea的简单介绍

Gitea的简单介绍

1、Gitea&#xff08;Gitea - 轻量级全功能 DevSecOps 平台&#xff09; Gitea 是一个基于 Go 语言编写的轻量级、开源、自托管的 Git 服务软件&#xff0c;它的设计目标是易于安装、快速运行并且提供出色的用户体验。Gitea 提供了一个类似于 GitHub 或 GitLab 的 web 界面&…
阅读更多...
ZKFair 步入Dargon Slayer 新阶段，未来还有哪些财富效应？

ZKFair 步入Dargon Slayer 新阶段，未来还有哪些财富效应？

在当前区块链技术的发展中&#xff0c;Layer 2&#xff08;L2&#xff09;解决方案已成为提高区块链扩容性、降低交易成本和提升交易速度的关键技术&#xff0c;但它仍面临一些关键问题和挑战&#xff0c;例如用户体验的改进、跨链互操作性、安全性以及去中心化程度。在这些背景…
阅读更多...
Python 全栈体系【四阶】（十八）

Python 全栈体系【四阶】（十八）

第五章 深度学习 一、基本理论 4. 神经网络的改进 4.1 神经网络的局限 全连接神经网络的局限&#xff08;一&#xff09; 未考虑数据的“形状”&#xff0c;会破坏数据空间结构。例如&#xff0c;输入数据是图像时&#xff0c;图像通常是高长通道方向上的 3 维形状。但是&a…
阅读更多...
皓学IT：WEB07_ JSP

皓学IT：WEB07_ JSP

一、Jsp基础语法 1.1. JSP模板元素 JSP页面中的HTML内容称之为JSP模版元素。 JSP模版元素定义了网页的基本骨架&#xff0c;即定义了页面的结构和外观。 1.2. JSP脚本片段 JSP脚本片断用于在JSP页面中编写多行Java代码&#xff08;在<%%>不能定义方法&#xff09;。…
阅读更多...
VisionOS应用开发需要哪些工具

VisionOS应用开发需要哪些工具

标题: VisionOS应用开发需要哪些工具 标签: [VisionOS, 空间计算] 分类: [VisionOS, 开发工具] 说下开发visionOS空间应用需要哪些准备&#xff0c;这里我找了下&#xff0c;列出来给大家。 xcode 15.22d: SwiftUI3d: RealityKit/Unity 3D实体空间: ARKitIntel Mac上可以运行X…
阅读更多...
mysql8.0下载安装详细步骤 图文教程

mysql8.0下载安装详细步骤 图文教程

下载mysql 保证电脑上之前没有安装过mysql&#xff0c;或者已经卸载完毕。 mysqk8.0 下载地址 解压 新建一个专门存放mysql文件夹&#xff0c;将下载的压缩包解压到这个文件夹里面。 配置 添加一个data文件夹&#xff0c;用来存放数据 新建一个my.txt文本&#xff0c;复制…
阅读更多...
C++语言·入门

C++语言·入门

现在我们讲完了数据结构初阶部分的内容&#xff0c;数据结构剩下的内容会在C语言讲解的差不多的时候加入。 1. 什么是C C语言是结构化模块化的语言&#xff0c;适合处理较小规模的程序。对于复杂的问题&#xff0c;规模较大的程序&#xff0c;需要高度抽象和建模时&#xff0c…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023