一、轮播图（官方）
代码：
<template>
<view class="content">
<!-- <cu-custom bgColor="bg-gradual-blue">
<block slot="content">个人技能</block>
</cu-custom> -->
<swiper class="swiper-box" :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval" :duration="duration">
<swiper-item v-for="(item, index) in info" :key="index">
<view :class="item.colorClass" class="swiper-item">
<image class="image" :src="item.url" mode="aspectFill" />
</view>
</swiper-item>
</swiper>
</view>
</template>
<script>
// import uniSwiperDot from '@/components/uni-swiper-dot/uni-swiper-dot.vue'
export default {
data() {
return {
indicatorDots: true,
autoplay: true,
interval: 2000,//切换的间隔时间
duration: 500,//滑动动画时长
info: [{
colorClass: 'uni-bg-red',
url: 'https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/shuijiao.jpg',
content: '内容 A'
},
{
colorClass: 'uni-bg-green',
url: 'https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/muwu.jpg',
content: '内容 B'
},
{
colorClass: 'uni-bg-blue',
url: 'https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/cbd.jpg',
content: '内容 C'
}
],
}
},
onLoad() {
},
methods: {
}
}
</script>
<style>
page {
width: 100%;
height: 100%;
}
.content {
/* text-align: center; */
height: 100vw;
}
.swiper-box {
height: 200px;
}
.swiper-item {
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex-direction: column;
justify-content: center;
align-items: center;
background-color: #999;
color: #fff;
}
.image {
width: 750rpx;
height: 400upx;
}
</style>
二、轮播图插件,只是改变3个黑点的样式（官方）
1、导入组件uni-swiper-dot代码
2、全部代码
<template>
<uni-swiper-dot :info="info" :current="current" :mode="mode" :dots-styles="dotsStyles" field="content">
<swiper class="swiper-box" @change="change" :autoplay="true" :interval="1000">
<swiper-item v-for="(item, index) in info" :key="index">
<view :class="item.colorClass" class="swiper-item">
<image class="image" :src="item.url" mode="aspectFill" />
</view>
</swiper-item>
</swiper>
</uni-swiper-dot>
</template>
<script>
// import uniSwiperDot from '@/components/uni-swiper-dot/uni-swiper-dot.vue'
export default {
data() {
return {
info: [{
colorClass: 'uni-bg-red',
url: 'https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/shuijiao.jpg',
content: '内容 A'
},
{
colorClass: 'uni-bg-green',
url: 'https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/muwu.jpg',
content: '内容 B'
},
{
colorClass: 'uni-bg-blue',
url: 'https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/cbd.jpg',
content: '内容 C'
}
],
current: 0,
mode: 'default',
dotsStyles: {}//为空是加载默认的模式
}
},
onLoad() {
},
methods: {
change(e) {
this.current = e.detail.current
},
}
}
</script>
<style>
.image {
width: 750rpx;
height: 400upx;
}
.swiper-box {
height: 200px;
}
.swiper-item {
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex-direction: column;
justify-content: center;
align-items: center;
background-color: #999;
color: #fff;
}
</style>
三、卡片形式的轮播图
代码：
<template>
<view class="content">
<cu-custom bgColor="bg-gradual-blue">
<block slot="content">个人技能</block>
</cu-custom>
<swiper class="swiper-box" :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval" :duration="duration" circular="true" previous-margin="20px" next-margin="20px">
<swiper-item v-for="(item, index) in info" :key="index" >
<view :class="item.colorClass" class="swiper-item">
<image class="image" :src="item.url" mode="aspectFill" />
</view>
</swiper-item>
</swiper>
</view>
</template>
<script>
// import uniSwiperDot from '@/components/uni-swiper-dot/uni-swiper-dot.vue'
export default {
data() {
return {
indicatorDots: true,
autoplay: true,
interval: 2000,//切换的间隔时间
duration: 500,//滑动动画时长
info: [{
colorClass: 'uni-bg-red',
url: 'https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/shuijiao.jpg',
content: '内容 A'
},
{
colorClass: 'uni-bg-green',
url: 'https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/muwu.jpg',
content: '内容 B'
},
{
colorClass: 'uni-bg-blue',
url: 'https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/cbd.jpg',
content: '内容 C'
}
],
}
},
onLoad() {
},
methods: {
}
}
</script>
<style>
page {
width: 100%;
height: 100%;
}
.content {
/* text-align: center; */
height: 100vw;
}
.swiper-box {
/* width: 95%; */
height: 200px;
}
.swiper-item {
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex-direction: column;
justify-content: center;
align-items: center;
background-color: #999;
color: #fff;
margin: 10px;
border-radius: 15upx;
/* app上运行不显示图片，就需要加下面这行，设置高度 */
height: 380upx;
}
.image {
/* width: 750rpx; */
height: 380upx;
border-radius: 15upx;
}
</style>
顶部渐变色的是需要引入colorUI的控件，不需要的同学可以注释掉
版权声明：本文为wy313622821原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接和本声明。