uniapp 金刚区菜单

uniapp 金刚区菜单 （含导航滑块）

html

<template>
	<!-- 菜单 -->
	<view class="menu">
		<scroll-view class="menu-scroll" scroll-x @scroll="scrollTap">
			<view class="list">
				<view class="list-row" v-for="(item,index) in formatList" :key="index">
					<view class="item" v-for="(itemc,indexc) in item" :key="indexc" @click="toPage(itemc.url)" :style="{width: width + '%'}">
						<image :src="itemc.icon" mode="widthFix" class="icon"></image>
						<view class="name">{{itemc.name}}</view>
					</view>
				</view>
			</view>
		</scroll-view>	
		<view class="progress" v-if="menusList.length > (rows * cols)">
			<view class="progress-inside" :style="{left:left}"></view>
		</view>
	</view>
</template>

js

<script>
export default {
		data() {
			return {
				menusList: [],
				formatList: [],
				rows: 2,//排列行数
				cols: 4,// 一行排列数
				showDot: true,
				width: 25, //菜单宽度 单位 %
				left: 62.5
			}
		},
		mounted() {
			this.formatMenu()
		},
		methods: {
			 scrollTap(e) {
			   let scrollLeft = e.detail.scrollLeft + 375;
			   let scrllWidth = e.detail.scrollWidth;
			   let left;
			   if (scrollLeft < 395) {
			     left = `65.625%`;
			   } else {
			     left = `${(scrollLeft / scrllWidth) * 100}%`;
			   }
			   this.left = left; 			   
			  },
			  formatMenu(){
				let that = this;
				this.width = 100 / this.cols;
				let arr = [];
				let nums = Math.ceil(this.menusList.length / this.rows) ;
				for (let i = 0; i < this.menusList.length; i += nums) {
				  arr.push(this.menusList.slice(i, i + nums));
				}
				this.formatList = arr;
			},
		}	  
}			
</script>

css

<style lang="scss" scoped>
	.menu {
		padding: 32rpx 0;
		.menu-scroll{
			width: 100%;
			background: #fff;
		}
		.list {
			// display: grid;
			// grid-template-columns: repeat(4, 1fr);
			// grid-gap: 18rpx;
			.list-row{
				white-space: nowrap;
			}
			// box-shadow: 0rpx 3rpx 6rpx rgba(0, 46, 37, 0.08);
			.item {
				// width: 100%;
				display: inline-block;
				.icon {
					display: block;
					width: 58%;
					aspect-ratio: 1 / 1;
					margin: auto;
				}

				.name {
					text-align: center;
					font-size: 24rpx;
					margin-top: 8rpx;
					padding-bottom: 12rpx;
				}
			}
		}

	}

.progress {
  position: relative;
  width: 66rpx;
  height: 8rpx;
  background: rgba(224, 224, 224, 1);
  border-radius: 4rpx;
  margin: 24rpx auto 0;
  overflow:hidden;
}

.progress-inside {
  position: absolute;
  transform: translateX(-100%);
  width: 42rpx;
  height: 8rpx;
  border-radius: 4rpx;
  background: #ff0000;
  left:62.5%; 
}

</style>

参考：https://blog.csdn.net/weixin_43957805/article/details/119145092