uni-app使用swiper实现轮播图的方法
作者：-耿瑞-
做音乐播放器小程序时,因为swiper的问题耽误不少时间,所以下面这篇文章主要给大家介绍了关于uni-app使用swiper实现轮播图的相关资料,需要的朋友可以参考下
uni-app轮播图实现之swiper
首先在data中定义一个图片数据的对象数组
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标签循环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 控制这几个小点的颜色 默认是黑色 这里我设置了白色
circular 是否循环轮播 比如 我们这里四张图片 我们向右拉 顺序是 1 2 3 4 当拉到第四张图 如果没设置circular 那就拉不动了
如果设置了circular 则会回到第一张
autoplay 设置用户没有操作时 轮播图自动循环播放
然后你们会发现 这里面的图片没有占满整个屏幕宽度
我们需要去给image设置一点css样式
image{
width: 750rpx;
}
前面说过 rpx是按屏幕宽度计算的 750rpx为整个屏幕的宽度
完成这些操作后我们就会得到这样一搞效果
补充：uniapp swiper 自定义轮播图指示点
前言
- 调试基础库 2.12.0
- 微信开发者工具 1.03.2008270
- uniapp 开发者工具 HBuilderX 2.9.8
uni-swipper-dot
uniapp官方推荐的swiper组件，该组件能够更换轮播图指示点，比如这样：
插件地址： https://ext.dcloud.net.cn/plugin?id=284
这里想说的是，在微信小程序发现该组件有时在切换图片时会有抖动现象（一直在高速反复切换图片）。
要想获得美美的轮播图指示点，可以参考如下方案
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>
- indicator-color ：指示点颜色
- indicator-active-color ： 当前指示点颜色
总结
到此这篇关于uni-app使用swiper实现轮播图的文章就介绍到这了,更多相关uni-app轮播图swiper内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！