带分类的轮播图-小程序轮播图banner

直接上预览图

首先是外层页面文件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

最后的最后—点个赞呗，老铁！