使用uniapp的swiper组件做一个轮播图

暗夜精灵191

于 2023-08-16 15:19:42 发布

阅读量417

点赞数

文章标签： uni-app 前端 javascript

本文链接：https://blog.youkuaiyun.com/qq_69893769/article/details/132320116

版权

本文介绍了如何使用uni-app的swiper组件创建一个轮播图效果，包括具体的代码实现步骤，帮助开发者理解并掌握uni-app前端框架中轮播图的创建技巧。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

效果：

代码：

export default {
		data() {
			return {
				indicatorDots: true,
				autoplay: true,
				interval:4000,
				duration:500,
				currentSwiper:0,
				swiperItemIndex:0,
				imgList:[{
						text:"图片"，
						img: 'https://img.zcool.cn/community/0167e05e0b1597a8012165187c5e9f.jpg@3000w_1l_0o_100sh.jpg'
					},
					{
						text: "图片",
						img: 'https://img.zcool.cn/community/01add45e0b1595a80121651829067f.jpg@1280w_1l_2o_100sh.jpg'
					},
					{
						text: "图片",
						img: 'https://img.zcool.cn/community/01ff685e0b15e3a80120a895326d92.jpg@2o.jpg'
					},
				]
			};
		},
		methods: {
			/**
			 * @swiperChangeFun:换取当前轮播图的index值
			swiperChangeFun(e) {
				this.swiperItemIndex = e.detail.current;
			},
		},

最低0.47元/天解锁文章