效果圖：
wxml:
<!-- 輪播圖-->
<swiper class='swiper' autoplay="auto" interval="5000" duration="500" current="{{swiperCurrent}}" bindchange="swiperChange">
<block wx:for="{{swiper}}">
<swiper-item>
<image src="{{item.swiper_url}}" class='simg' />
</swiper-item>
</block>
</swiper>
<view class='swiper_title'>
<view class='title'>
<text>{{swiper[swiperTag].title}}</text>
</view>
<view class="dots">
<block wx:for="{{swiper}}">
<image class='dot' src='{{index == swiperTag?"/pages/image/point2.png":"/pages/image/point.png"}}'></image>
</block>
</view>
</view>
js:
/**
* 輪播圖的切換事件
*/
swiperChange: function (e) {
this.setData({
swiperTag: e.detail.current, //獲取當前輪播圖片的下標
})
},
//輪播圖2
swiper:[
{ swiper_url: '/pages/image/iamchan.jpg', title: 'iamchan' },
{ swiper_url: '/pages/image/iamchan.jpg', title: 'iamchan2' }
],
swiperTag: 0,//標記是哪個title
wxss:
/* 輪播圖 */
.swiper{
height: 270rpx;
width:100%
}
.simg{
width: 100%;
height: 100%;
}
.swiper_title{
height: 50rpx;
display: flex;
background: #f0f0f0;
padding-left: 16rpx;
padding-right: 16rpx;
}
.title{
line-height: 50rpx;
font-size: 30rpx;
width: 100%;
color: #515151;
}
.dots{
float: right;
display: flex;
}
.dot{
margin-top: 7.5rpx;
width:35rpx;
height:35rpx
}