uniapp 循环绑定点击事件 跳转对应页面

效果图

目录如下 从my.vue 跳转card order favorite （suggest没写嘻嘻）

代码实现 ①

• 温馨提示：用navigateTo方法跳转 左上角自带返回键 如不需要返回功能 用redirectTo / reLaunch 都可

<template>
	<view class="wrap">
		<view class="meun-wrap" >
			<view class="meuns" v-for="(item,index) in meunsList" :key="index" @click="toMeunsList(index)">
				<image :src="item.icon" mode=""></image>
				<text>{
     {
     item.msg}}</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
     
		data() {
     
			return {
     
				meunsList:[
					{
     
						icon:"/static/card.png",
						msg:"卡包"
					},
					{
     
						icon:"/static/dingdan.png",
						msg:"订单"
					},
					{
     
						icon:"/static/collect.png",
						msg:"收藏"
					},
					{
     
						icon:"/static/comment.png",
						msg:"建议"
					},
				]
				
			}
		},
		methods:{
     
			toMeunsList(e){
     
				console.log(e) //这里打印出来是 0 1 2 3 数组索引值
				if(e == 0){
     
					uni.navigateTo({
     
						url:"/pages/my/card"
					})
				}
				if(e == 1){
     
					uni.navigateTo({
     
						url:"/pages/my/order"
					})
				}
				if(e == 2){
     
					uni.navigateTo({
     
						url:"/pages/my/favorite"
					})
				}
			}
		}
	}
</script>

<style>
	.wrap{
     
		height: 100vh;
		display: flex;
		justify-content: center;
	}
	.meun-wrap{
     
		width: 500rpx;
		height: 100rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 40rpx;
		box-shadow: 0px 2px 16px 0px rgba(17, 33, 50, 0.08);
		border-radius: 20rpx;
		margin-top: 100rpx;
	}
	.meuns{
     
		display: flex;
		flex-direction: column;
		align-items: center;
		font-size: 26rpx;
	}
	image{
     
		width: 44rpx;
		height: 44rpx;
		margin-bottom: 15rpx;
	}
</style>

代码实现 ②
去掉了点击事件 用navigator标签来实现跳转 在对应的数组里写入对应的页面 效果一样 但这个跳转应该实用性不强 只适用于简单的页面跳转

<template>
	<view class="wrap">
		<view class="meun-wrap" >
			<view class="meuns" v-for="(item,index) in meunsList" :key="index">
				<navigator class="meuns" :url="item.navigator" >
				<image :src="item.icon" mode=""></image>
				<text>{
     {
     item.msg}}</text>
				</navigator>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
     
		data() {
     
			return {
     
				meunsList:[
					{
     
						navigator:"/pages/my/card",  
						icon:"/static/card.png",
						msg:"卡包"
					},
					{
     
						navigator:"/pages/my/order",
						icon:"/static/dingdan.png",
						msg:"订单"
					},
					{
     
						navigator:"/pages/my/favorite",
						icon:"/static/collect.png",
						msg:"收藏"
					},
					{
     
						icon:"/static/comment.png",
						msg:"建议"
					},
				]
			}
		},
		methods:{
     
			
		}
	}
</script>

<style>
//样式一样哒~
</style>