uniapp通过点击事件click跳转到指定页面

爬楼梯的小新

已于 2022-02-28 16:01:58 修改

阅读量1w

点赞数 4

分类专栏： uniapp 文章标签： uni-app

于 2021-07-09 17:37:46 首次发布

本文链接：https://blog.csdn.net/weixin_57607714/article/details/118611622

版权

uniapp 专栏收录该内容

28 篇文章 6 订阅

订阅专栏

该博客展示了如何在uni-app中通过点击事件实现页面跳转。代码示例中，利用v-for遍历navList数组，为每个导航项绑定点击事件`navClick`，在事件处理函数中调用`uni.navigateTo`进行页面跳转，参数为点击事件中传递的目标页面路径。

摘要由CSDN通过智能技术生成

通过点击某个事件跳转到指定页面首先给个点击事件设置个名字再给给它写个跳转函数navigateTo即可函数要写在方法里

<view class="nav">
		<view class="nav_item" v-for="(item,index) in navList" :key="index" @click="navClick(item.path)">
		    <image :src="item.img"></image>
		    <text>{{item.title}}</text>
		</view>
</view>

<script>
	export default {
		data() {
			return {
				navList:[
					{
						img:"/static/nav1.png",
						title:"商城超市",
						path:"/pages/navShop/navShop"  //跳转页面地址
					},
					{
						img:"/static/nav2.png",
						title:"联系我们"
					},
					{
						img:"/static/nav1.png",
						title:"社区图片"
					},
					{
						img:"/static/nav2.png",
						title:"学习视频"
					}
				]
		},
		onLoad() {

		},
		methods: {
			//导航点击的跳转处理函数
			navClick (url) {
				uni.navigateTo ({
					url
				})
			}
		}
	}
</script>