uniapp simple carousel map, the indicator point is hidden, and the number of display pages is displayed
super easy! Static interface!
1. HTML code
<template>
<view >
<!--顶部banner轮播-->
<view class="uni-margin-wrap">
<swiper @change="changeItem" class="swiper box" circular :indicator-dots="indicatorDots" :autoplay="autoplay">
<swiper-item >
<view class="swiper-item uni-bg-red">
<image class="bannerimg" src="../../static/shop/boy.png" mode="widthFix"></image>
</view>
</swiper-item>
<swiper-item>
<view class="swiper-item uni-bg-green">
<image class="bannerimg" src="../../static/shop/boy.png" mode="widthFix"></image>
</view>
</swiper-item>
<swiper-item>
<view class="swiper-item uni-bg-blue">
<image class="bannerimg" src="../../static/shop/boy.png" mode="widthFix" ></image>
</view>
</swiper-item>
</swiper>
<!--页数展示数字-->
<span class="item-num" v-if="showLength>1">{
{activeIndex}} | 3</span>
<span class="item-num" v-else>1|3</span>
</view>
</view>
</template>Two, js code
export default{
data(){
return{
indicatorDots: false,
autoplay: true,
activeIndex: 1,
imglength:3,
}
},
computed: {
showLength () {
return 3;
}
},
methods:{
//切换图，更换数字
changeItem (e) {
var activeIndex=this.activeIndex;
var imglength=this.imglength;
if(activeIndex>=imglength){
this.activeIndex= 1;
}else{
this.activeIndex= this.activeIndex+1;
}
}
}
}Three, css code
/**顶部banner*/
.uni-margin-wrap {
width: 690rpx;
width: 100%;
position: relative;
}
.swiper {
height: 800rpx;
position: relative;
}
.swiper-item {
display: block;
height: 800rpx;
line-height: 800rpx;
text-align: center;
}
.bannerimg{
width: 100vw;
}
.indexShow{
position: absolute;
right: 20rpx;
bottom: 20rpx;
background:rgba(255,255,255,0.31);
color: #FFF;
font-size: 24rpx;
padding: 5rpx 30rpx;
border-radius: 30rpx;
}
.box{
position:relative;
}
.item-num{
z-index: 9;
position: absolute;
margin-top: -200rpx;
right: 20rpx;
background: #969696;
padding: 0 22rpx;
height: 40rpx;
line-height: 40rpx;
border-radius: 20rpx;
font-size: 30rpx;
color: #FFF;
}
Display of results:
