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>

uniapp 循环绑定点击事件跳转对应页面相关推荐

jquey javascript 绑定点击事件(click事件无反应，因js获取不到当前的点击项)
问题: 如果DOM元素是动态生成的,在这种情况下为该元素绑定click时间,发现点击事件无效,设置debugger,console.log也没用解决: juery:为目标元素的父元素,或者是整个文档 ...
vue 使用高德地图给海量点标记，并点击标记弹出信息窗口，信息窗口绑定点击事件
目录一.需求二.引入高德地图 2.1.将高德地图引入到项目中 2.2.查看官网快速上手,熟悉高德地图的主要API 2.3.海量点标注要用到的API文档 2.4.全部代码其他: 一.需求因为不知 ...
回顾微信小程序template模板的使用循环赋值点击事件
1.模板样式实现在components目录下新建一个的wxml文件,eg:index.wxml // 自定一个名为的customCard模板 <template name="cust ...
android listview里item添加一个按钮点击事件,ListView Item点击事件跳转详情界面
有好久都没有碰安卓了,考试加五一双组合也真是让人蛋疼.好在都平安的度过了,所以又有时间gun回来弄弄我的小博客(虽然没多少人看= =).看了之前做的几个小demo,模式都差不多,但是每次写的时候都要在 ...
li通过绑定点击事件实现类似购物车功能(全选，点击勾选、取消等)，此例为模仿移动端小说书架界面实现勾选取消功能展示，有些麻烦但好理解（前端xb要努力变强）
效果展示点击全选被全部勾选,再点击则取消勾选(下方还有取消按钮,实现同样功能). 也可以实现点击的书籍被勾选,再次点击则取消勾选在功能实现过程中主要是对v-show.v-if.v-else等的灵活 ...
[Swift]最强UIButton解析 | #selector()绑定点击事件
★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ ➤微信公众号:山青咏芝(shanqingyongzhi) ➤博客园地址:山青咏芝(https://www.cnblog ...
react中绑定点击事件_在React中绑定事件处理程序的最佳方法
react中绑定点击事件 by Charlee Li 通过李李在React中绑定事件处理程序的最佳方法 (The best way to bind event handlers in React) ...
JavaScript给按钮绑定点击事件（onclick）的方法及js常见事件
本文实例讲述了JavaScript给按钮绑定点击事件(onclick)的方法.分享给大家供大家参考.具体分析如下: 我们可以通过设定按钮的onclick属性来给按钮绑定onclick事件 <!D ...
javascript动态生成按钮并绑定点击事件
前一个多月公司的前端开发人员离职,公司一直在招前端,基本上每天都有几个来面试的人,就这个面试频率,也才招了一个多月才招到.绝大部分都是死在了一道上机面试提上.题目很基础,但也很考基本功,基本上才3%左 ...
【JavaScript】按钮绑定点击事件-onCliek事件
[JavaScript]按钮绑定点击事件-onCliek事件 <button type="submit" id="btn">btn</butt ...

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

uniapp 循环绑定点击事件跳转对应页面相关推荐

最新文章

热门文章

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

uniapp 循环绑定点击事件 跳转对应页面相关推荐

最新文章

热门文章

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

uniapp 循环绑定点击事件跳转对应页面相关推荐