惯性聚合 高效追踪和阅读你感兴趣的博客、新闻、科技资讯
阅读原文 在惯性聚合中打开

推荐订阅源

G
Google Developers Blog
Cisco Talos Blog
Cisco Talos Blog
Y
Y Combinator Blog
罗磊的独立博客
Stack Overflow Blog
Stack Overflow Blog
MongoDB | Blog
MongoDB | Blog
GbyAI
GbyAI
The GitHub Blog
The GitHub Blog
S
SegmentFault 最新的问题
J
Java Code Geeks
C
CXSECURITY Database RSS Feed - CXSecurity.com
cs.AI updates on arXiv.org
cs.AI updates on arXiv.org
博客园 - 聂微东
B
Blog RSS Feed
Cyber Security Advisories - MS-ISAC
Cyber Security Advisories - MS-ISAC
P
Privacy & Cybersecurity Law Blog
L
LangChain Blog
L
LINUX DO - 热门话题
Hugging Face - Blog
Hugging Face - Blog
CTFtime.org: upcoming CTF events
CTFtime.org: upcoming CTF events
P
Privacy International News Feed
F
Full Disclosure
S
Schneier on Security
T
Tenable Blog
量子位
NISL@THU
NISL@THU
Latest news
Latest news
V
Visual Studio Blog
C
Check Point Blog
aimingoo的专栏
aimingoo的专栏
博客园_首页
K
Kaspersky official blog
L
Lohrmann on Cybersecurity
美团技术团队
P
Proofpoint News Feed
P
Palo Alto Networks Blog
Spread Privacy
Spread Privacy
cs.CL updates on arXiv.org
cs.CL updates on arXiv.org
Vercel News
Vercel News
人人都是产品经理
人人都是产品经理
The Hacker News
The Hacker News
AWS News Blog
AWS News Blog
S
Securelist
The Register - Security
The Register - Security
G
GRAHAM CLULEY
Project Zero
Project Zero
T
The Blog of Author Tim Ferriss
Recent Announcements
Recent Announcements
Engineering at Meta
Engineering at Meta
C
Cisco Blogs

博客园 - 代码小伙

gin框架使用zap,在日志中加入trace_id gorm使用gen自动生成模型和查询文件 Go使用base64Captcha生成字母验证码 GoFrame框架查询数据表时对字段取别名 GoFrame框架使用WherePri报错原因 GoFrame框架使用BindHandler设置路由失效的原因 GoFrame框架WebServer默认端口号是什么 GoFrame框架SetFileServerEnabled关闭静态服务不生效 vite修改端口号 用路由方式写一个通用的微信小程序校验文件验证 手机网页通过微信deeplink实现wap支付 position:sticky失效原因分析 mysql把一个表的字段赋值到另一张表 基于jquery的countdown插件实现毫秒倒计时 Vue打包代码如何部署在ThinkPHP项目里 保姆级教程,centos7安装erlang和rabbitmq Element Plus表单resetFields重置表单无效 thinkphp6通过中间件设置跨域 centos7安装jdk
vue3中使用swiper6实现轮播
代码小伙 · 2021-01-03 · via 博客园 - 代码小伙

vue用的3.0版本,swiper用的swiper6

模板html代码

<swiper :autoplay="swiper_options.autoplay" :loop="swiper_options.loop" :speed="swiper_options.speed" :pagination="swiper_options.pagination">
      <swiper-slide><img src="@/assets/img/ce0752e83e81a006.jpg" alt=""></swiper-slide>
      <swiper-slide><img src="@/assets/img/9c7efaa9adbea26f.jpg" alt=""></swiper-slide>
</swiper>

js代码

import {reactive,ref} from 'vue';
// 使用swiper的compositon API
import SwiperCore, {Autoplay,Pagination} from 'swiper';
import {Swiper,SwiperSlide} from 'swiper/vue';
import 'swiper/swiper.min.css';
import 'swiper/components/pagination/pagination.scss';
SwiperCore.use([Autoplay,Pagination]);
export default {
	name:'Home',
	components:{
	      Swiper,
	      SwiperSlide,
	},
	setup() {
                // swiper相关配置属性放在swiper_options这个变量里
		let swiper_options = reactive({
			autoplay:{
				delay:3000,
				disableOnInteraction: false
			},
			loop:true,
			speed:1000,	
			pagination:{
				clickable: true
			}
		})
                // 将swiper_options返回给模板中的swiper组件使用
		return {swiper_options};
	}
}