直接上预览图
首先是外层页面文件WXML
<view class="container">
<banner bannerList="{{bannerList}}"></banner>
</view>
然后是外层页面文件JS
Page({
data: {
//模拟数据
bannerList: [
{type: 1, list: [
{ imgsrc: "http://www.heiyun.xyz/groupbanner/d1.jpg" },
{ imgsrc: "http://www.heiyun.xyz/groupbanner/d2.jpg" },
{ imgsrc: "http://www.heiyun.xyz/groupbanner/d3.jpg" },
{ imgsrc: "http://www.heiyun.xyz/groupbanner/d4.jpg" },
]},
{type: 2, list: [
{ imgsrc: "http://www.heiyun.xyz/groupbanner/m1.jpg" },
]},
{type: 3, list: [
{ imgsrc: "http://www.heiyun.xyz/groupbanner/l1.jpg" },
{ imgsrc: "http://www.heiyun.xyz/groupbanner/l2.jpg" },
{ imgsrc: "http://www.heiyun.xyz/groupbanner/l3.jpg" },
]},
{type: 4, list: [
{ imgsrc: "http://www.heiyun.xyz/groupbanner/z1.jpg" },
{ imgsrc: "http://www.heiyun.xyz/groupbanner/z2.jpg" },
]},
]
},
onLoad() {
},
})
然后是组件部分wxml
<view class="banner">
<swiper class="swiper" current="{{current}}" bindchange="changeBanner" autoplay="{{true}}" interval='4000'>
<block wx:for='{{bannerList}}' wx:key='index'>
<block wx:for='{{item.list}}' wx:for-item="list" wx:for-index='nindex' wx:key='nindex'>
<swiper-item>
<view class="item" data-index="{{index}}" data-nindex="{{nindex}}" catchtap="toPreview"
data-type="{{item.type}}">
<image class="pic" src="{{list.imgsrc}}" mode="aspectFill" lazy-load></image>
</view>
</swiper-item>
</block>
</block>
</swiper>
<view class="tabs">
<view class="item {{tabCurrent==index ? 'on' : ''}}" wx:for='{{bannerList}}' wx:key='index'
data-index="{{index}}" bindtap="moveTo">
<block wx:if='{{item.type ==1}}'>
<text class="text">狗狗</text>
</block>
<block wx:if='{{item.type ==2}}'>
<text class="text">猫咪</text>
</block>
<block wx:if='{{item.type ==3}}'>
<text class="text">七龙珠</text>
</block>
<block wx:if='{{item.type ==4}}'>
<text class="text">植物</text>
</block>
</view>
</view>
<view class="tips">
<text>共 {{bannerList[tabCurrent].list.length}} 张</text>
</view>
</view>
JS
import '../../utils/util';
Component({
properties: {
bannerList: {
type: Array,
value: [],
}
},
data: {
current: 0,
tabCurrent: 0,
},
methods: {
moveTo(event) {
let tabsIndex = event.currentTarget.dataset.index + 1,
nubs = 0,
bannerList = this.data.bannerList;
for (let i = 0; i < tabsIndex; i++) {
nubs += Number(bannerList[i].list.length)
}
nubs -= Number(bannerList[tabsIndex - 1].list.length)
this.setData({
current: nubs,
tabCurrent: tabsIndex - 1
})
},
changeBanner(event) {
this.setData({
current: event.detail.current
})
let current = this.data.current,
_that = this.data.bannerList,
btnIndex = 0;
let arr = []
_that.forEach((item) => {
let leng = item.list.length
arr.push(leng)
})
for (let i = arr.length - 1; i >= 0; i--) {
let num = arr.getNumArrayTotal(i + 1);
if (current >= num - arr[i]) {
btnIndex = i;
break;
}
}
this.setData({
tabCurrent: btnIndex
})
},
}
})
css
.banner {
position: relative;
}
.swiper {
height: 500rpx;
width: 750rpx;
}
.banner .item {
position: relative;
}
.banner .pic {
height: 500rpx;
width: 100%;
}
.tabs {
position: absolute;
bottom: 30rpx;
left: 0;
right: 0;
margin: 0 auto;
display: flex;
justify-content: center;
}
.tabs .item {
display: inline-block;
width: 82rpx;
height: 40rpx;
text-align: center;
line-height: 40rpx;
font-size: 20rpx;
color: #333;
background-color: rgba(255, 255, 255, 0.6);
}
.tabs .item:first-child {
border-top-left-radius: 26rpx;
border-bottom-left-radius: 26rpx;
}
.tabs .item:last-child {
border-top-right-radius: 26rpx;
border-bottom-right-radius: 26rpx;
}
.tabs .on .text {
z-index: 9;
position: relative;
color: #fff;
}
.tabs .on::after {
display: block;
content: '';
width: 82rpx;
height: 40rpx;
position: absolute;
left: 0;
top: 0;
z-index: 8;
background: #4395ff;
border-radius: 40rpx;
}
.tips {
display: flex;
position: absolute;
height: 40rpx;
text-align: center;
bottom: 30rpx;
right: 24rpx;
background-color: rgba(0, 0, 0, 0.4);
color: #FFFFFF;
font-size: 20rpx;
padding: 0 20rpx;
font-size: 20rpx;
border-radius: 40rpx;
align-items: center;
}
最后附上gitee
https://gitee.com/nantianbaiyun/group-banner.git
最后的最后—点个赞呗,老铁!