快捷導(dǎo)航

uni-app使用swiper實(shí)現(xiàn)輪播圖的方法

更新時(shí)間：2022年11月28日 11:36:17 作者：-耿瑞-

做音樂(lè)播放器小程序時(shí),因?yàn)閟wiper的問(wèn)題耽誤不少時(shí)間,所以下面這篇文章主要給大家介紹了關(guān)于uni-app使用swiper實(shí)現(xiàn)輪播圖的相關(guān)資料,需要的朋友可以參考下

uni-app輪播圖實(shí)現(xiàn)之swiper

首先在data中定義一個(gè)圖片數(shù)據(jù)的對(duì)象數(shù)組

data() {
	return {
		rotation: [
			{
				id: 1,
				url: 'https://imgcps.jd.com/ling4/100035927374/5Lqs6YCJ5aW96LSn/5L2g5YC85b6X5oul5pyJ/p-5bd8253082acdd181d02fa42/60f03300/cr/s/q.jpg'
			},
			{
				id: 2,
				url: 'https://img12.360buyimg.com/pop/s1180x940_jfs/t1/217650/27/18929/95548/627b69e5E7f4c1ff2/1a6be6e037e34e5c.jpg.webp'
			},
			{
				id: 3,
				url: 'https://imgcps.jd.com/ling4/100012043978/5Lqs6YCJ5aW96LSn/5L2g5YC85b6X5oul5pyJ/p-5bd8253082acdd181d02fa09/00d13111/cr/s/q.jpg'
			},
			{
				id: 4,
				url: 'https://imgcps.jd.com/ling4/100014348458/5Lqs6YCJ5aW96LSn/5L2g5YC85b6X5oul5pyJ/p-5bd8253082acdd181d02fa7f/aa5a1911/cr/s/q.jpg'
			}
		]
	}
},

然后利用
swiper標(biāo)簽循環(huán)rotation

<template>
	<view>
		<swiper
		  indicator-dots
		  indicator-active-color="#FFFFFF"
		  circular
		  autoplay
		>
			<swiper-item
			  v-for="item in rotation"
			  :key="item.id"
			>
				<image :src = "item.url"></image>
			</swiper-item>
		</swiper>
	</view>
</template>

swiper是一個(gè)uniapp專(zhuān)用的輪播圖組件 indicator-dots屬性表示允許組件展示切換圖片的小點(diǎn) 這個(gè)肯定是要的

indicator-active-color 控制這幾個(gè)小點(diǎn)的顏色默認(rèn)是黑色這里我設(shè)置了白色

circular 是否循環(huán)輪播比如我們這里四張圖片我們向右拉順序是 1 2 3 4 當(dāng)拉到第四張圖如果沒(méi)設(shè)置circular 那就拉不動(dòng)了

如果設(shè)置了circular 則會(huì)回到第一張

autoplay 設(shè)置用戶(hù)沒(méi)有操作時(shí) 輪播圖自動(dòng)循環(huán)播放

然后你們會(huì)發(fā)現(xiàn) 這里面的圖片沒(méi)有占滿(mǎn)整個(gè)屏幕寬度

我們需要去給image設(shè)置一點(diǎn)css樣式

image{
    width: 750rpx;
}

前面說(shuō)過(guò) rpx是按屏幕寬度計(jì)算的 750rpx為整個(gè)屏幕的寬度

完成這些操作后我們就會(huì)得到這樣一搞效果

補(bǔ)充：uniapp swiper 自定義輪播圖指示點(diǎn)

前言

調(diào)試基礎(chǔ)庫(kù) 2.12.0
微信開(kāi)發(fā)者工具 1.03.2008270
uniapp 開(kāi)發(fā)者工具 HBuilderX 2.9.8

uni-swipper-dot

uniapp官方推薦的swiper組件，該組件能夠更換輪播圖指示點(diǎn)，比如這樣：

插件地址： https://ext.dcloud.net.cn/plugin?id=284

這里想說(shuō)的是，在微信小程序發(fā)現(xiàn)該組件有時(shí)在切換圖片時(shí)會(huì)有抖動(dòng)現(xiàn)象（一直在高速反復(fù)切換圖片）。

要想獲得美美的輪播圖指示點(diǎn)，可以參考如下方案

swiper組件支持對(duì)指示點(diǎn)換顏色

<swiper 
    :autoplay="true" :circular="true" :interval="5000" :duration="1000" 
    :indicator-dots="true" indicator-color="rgba(255, 255, 255, 0.6)" indicator-active-color="rgba(7, 193, 96, 0.7)" >
    <swiper-item v-for="(item, index) in bannerList" :key="index" @click="clickItem(item)">
        <view>
            <image :src="item.coverImg" mode="widthFix" />
        </view>
    </swiper-item>
</swiper>