swiper分类菜单双层效果demo（整理）

效果图：

<template>
	<view class="second-module-allicon">
		<swiper class="nav-bar" indicator-dots>
			<swiper-item class="nav-bar-wrap" v-for="(item,index) in list" :key="index">
				<!-- 金刚区内容 -->
				<view class="nav-bar-item" v-for="(item2,index2) in item.list2" :key="index2">
					<image :src="item2.src" />
					<text>{
    {
    item2.name}}</text>
				</view>
			</swiper-item>
		</swiper>
	</view>
</template>
 
<script>
export default {
    
	data() {
    
		return {
    
			list:[
				{
    
					list2:[{
    
						src:'/static/logo.png',
						name:'酒店/名宿'
					},{
    
						src:'/static/logo.png',
						name:'休闲/玩乐'
					},{
    
						src:'/static/logo.png',
						name:'烧电影/演出'
					},{
    
						src:'/static/logo.png',
						name:'美食'
					},{
    
						src:'/static/logo.png',
						name:'饮品/小吃'
					},{
    
						src:'/static/logo.png',
						name:'水果/果切'
					},{
    
						src:'/static/logo.png',
						name:'会员专享'
					},{
    
						src:'/static/logo.png',
						name:'新手指南'
					},{
    
						src:'/static/logo.png',
						name:'商家入驻'
					},{
    
						src:'/static/logo.png',
						name:'旅游'
					}]
				},{
    
					list2:[{
    
						src:'/static/logo.png',
						name:'电影'
					},{
    
						src:'/static/logo.png',
						name:'医疗'
					},{
    
						src:'/static/logo.png',
						name:'丽人/美发'
					},{
    
						src:'/static/logo.png',
						name:'宠物'
					},{
    
						src:'/static/logo.png',
						name:'KTV'
					},{
    
						src:'/static/logo.png',
						name:'按摩/足疗'
					},{
    
						src:'/static/logo.png',
						name:'母婴服务'
					},{
    
						src:'/static/logo.png',
						name:'核酸检测'
					},{
    
						src:'/static/logo.png',
						name:'养车/用车'
					},{
    
						src:'/static/logo.png',
						name:'核酸检测'
					},]
				}
			]
		}
	},
	methods: {
    
	},
}
</script>
 
<style>
	page{
    background: #f5f5f5;}
	.nav-bar{
    
		height: 100%;
	}
	/* 背景模块 */
	.second-module-allicon{
    
	  background: white;
	  border-radius:8px;
	  position: relative;
	  height: 360rpx;
	  overflow : hidden;
	}
	scroll-view {
    
	  white-space: nowrap;
	}
	.nav-bar-wrap {
    
	  display: flex;
	  flex-flow: column wrap;    /* 金刚区排序方式*/
	  height: 330rpx;
	}
	/* 图标区域 */
	.nav-bar-item {
    
	  width: 152rpx;
	  display: flex;
	  flex-direction: column;
	  align-items: center;
	  padding-top: 20rpx;
	}
	/* 图片 */
	.nav-bar-item image {
     
	  display: block;
	  height: 88rpx;
	  width: 88rpx;
	  margin: 0;
	  border-radius: 24rpx;
	}
	/* 文字 */
	.nav-bar-item text {
    
	  margin-top: 8rpx;
	  line-height: 34rpx;
	  color:rgba(51,51,51,1);
	  font-size: 24rpx;
	}
	
	/* 默认指示点的样式 */
	.nav-bar .wx-swiper-dot {
    
	  width: 15rpx;
	  height: 15rpx;
	  background: #eee;
	  border-radius: 15rpx;
	  margin-top: 30rpx;
	}
	 
	/* 选中指示点的样式 */
	.nav-bar .wx-swiper-dot.wx-swiper-dot-active {
    
	    width: 30rpx;
	    height: 15rpx;
	    background: #FED005;
	    border-radius: 15rpx;
		margin-top: 30rpx;
	}
</style>

原文更详细链接：https://blog.csdn.net/qq_59795720/article/details/125762512?spm=1001.2014.3001.5502