快捷導航

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

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

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

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

首先在data中定義一個圖片數(shù)據(jù)的對象數(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標簽循環(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是一個uniapp專用的輪播圖組件 indicator-dots屬性表示允許組件展示切換圖片的小點這個肯定是要的

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

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

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

autoplay 設(shè)置用戶沒有操作時輪播圖自動循環(huán)播放

然后你們會發(fā)現(xiàn) 這里面的圖片沒有占滿整個屏幕寬度

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

image{
    width: 750rpx;
}

前面說過 rpx是按屏幕寬度計算的 750rpx為整個屏幕的寬度

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

補充：uniapp swiper 自定義輪播圖指示點

前言

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

uni-swipper-dot

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

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

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

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

swiper組件支持對指示點換顏色

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