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

推荐订阅源

让小产品的独立变现更简单 - ezindie.com
让小产品的独立变现更简单 - ezindie.com
L
LangChain Blog
雷峰网
雷峰网
罗磊的独立博客
Hugging Face - Blog
Hugging Face - Blog
T
Tailwind CSS Blog
V
Visual Studio Blog
博客园_首页
Apple Machine Learning Research
Apple Machine Learning Research
Last Week in AI
Last Week in AI
OSCHINA 社区最新新闻
OSCHINA 社区最新新闻
博客园 - 司徒正美
有赞技术团队
有赞技术团队
J
Java Code Geeks
酷 壳 – CoolShell
酷 壳 – CoolShell
大猫的无限游戏
大猫的无限游戏
Engineering at Meta
Engineering at Meta
B
Blog
Recent Announcements
Recent Announcements
C
Check Point Blog
MongoDB | Blog
MongoDB | Blog
GbyAI
GbyAI
奇客Solidot–传递最新科技情报
奇客Solidot–传递最新科技情报
F
Full Disclosure
Microsoft Security Blog
Microsoft Security Blog
N
Netflix TechBlog - Medium
I
InfoQ
云风的 BLOG
云风的 BLOG
量子位
D
Docker
D
DataBreaches.Net
Vercel News
Vercel News
Blog — PlanetScale
Blog — PlanetScale
宝玉的分享
宝玉的分享
V
V2EX
Cyber Security Advisories - MS-ISAC
Cyber Security Advisories - MS-ISAC
Y
Y Combinator Blog
美团技术团队
小众软件
小众软件
阮一峰的网络日志
阮一峰的网络日志
博客园 - 聂微东
B
Blog RSS Feed
MyScale Blog
MyScale Blog
月光博客
月光博客
T
The Blog of Author Tim Ferriss
WordPress大学
WordPress大学
aimingoo的专栏
aimingoo的专栏
M
MIT News - Artificial intelligence
U
Unit 42
Google DeepMind News
Google DeepMind News

博客园 - 代码小伙

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