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

推荐订阅源

Security Latest
Security Latest
让小产品的独立变现更简单 - ezindie.com
让小产品的独立变现更简单 - ezindie.com
Stack Overflow Blog
Stack Overflow Blog
WordPress大学
WordPress大学
N
Netflix TechBlog - Medium
GbyAI
GbyAI
云风的 BLOG
云风的 BLOG
Threat Intelligence Blog | Flashpoint
Threat Intelligence Blog | Flashpoint
宝玉的分享
宝玉的分享
博客园 - 【当耐特】
C
Cyber Attacks, Cyber Crime and Cyber Security
雷峰网
雷峰网
奇客Solidot–传递最新科技情报
奇客Solidot–传递最新科技情报
T
Threat Research - Cisco Blogs
NISL@THU
NISL@THU
Spread Privacy
Spread Privacy
P
Proofpoint News Feed
J
Java Code Geeks
freeCodeCamp Programming Tutorials: Python, JavaScript, Git & More
MyScale Blog
MyScale Blog
T
Tor Project blog
P
Proofpoint News Feed
C
CERT Recently Published Vulnerability Notes
P
Privacy & Cybersecurity Law Blog
MongoDB | Blog
MongoDB | Blog
Simon Willison's Weblog
Simon Willison's Weblog
C
Cybersecurity and Infrastructure Security Agency CISA
L
LINUX DO - 热门话题
小众软件
小众软件
G
GRAHAM CLULEY
P
Privacy International News Feed
AWS News Blog
AWS News Blog
Know Your Adversary
Know Your Adversary
P
Palo Alto Networks Blog
人人都是产品经理
人人都是产品经理
S
Schneier on Security
Scott Helme
Scott Helme
OSCHINA 社区最新新闻
OSCHINA 社区最新新闻
B
Blog RSS Feed
T
The Exploit Database - CXSecurity.com
Recent Announcements
Recent Announcements
E
Exploit-DB.com RSS Feed
C
CXSECURITY Database RSS Feed - CXSecurity.com
U
Unit 42
The Register - Security
The Register - Security
S
Securelist
Martin Fowler
Martin Fowler
Project Zero
Project Zero
大猫的无限游戏
大猫的无限游戏
Cisco Talos Blog
Cisco Talos Blog

博客园 - 代码小伙

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};
	}
}