混合app框架之uni-app---grid布局

最新推荐文章于 2025-06-23 23:44:46 发布

原创最新推荐文章于 2025-06-23 23:44:46 发布 · 1.7w 阅读

17 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #uni-app

前端知识专栏收录该内容

104 篇文章

订阅专栏

博客介绍了uni-app中grid布局，其为九宫格布局且格式可直接使用。点击获取下标时，写点击事件即可打印对应下标。还说明了如何跳转到二级页面，通过动态改变setNavigationBarTitle的值，在子页面接收参数，实现grid点击到对应二级子页面。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

uni-app中grid布局是九宫格布局，格式已经弄好了，可以直接拿出来使用，在使用的时候想要点击获取下标的话直接写点击事件就可以打印出对应的下标了。代码如下：

<!-- 个人中心页方格列表数据 -->
		<uni-grid @click="goToPage"  :options="[
			{image:'https://img-cdn-qiniu.dcloud.net.cn/img/shu.png',text:'个人中心'},
			{image:'https://img-cdn-qiniu.dcloud.net.cn/img/lindang.png',text:'地址管理'},
			{image:'https://img-cdn-qiniu.dcloud.net.cn/img/laoren.png',text:'我的拼团'},
			{image:'https://img-cdn-qiniu.dcloud.net.cn/img/liwu.png',text:'我的订单'},
			{image:'https://img-cdn-qiniu.dcloud.net.cn/img/maozi.png',text:'我的钱包'},
			{image:'https://img-cdn-qiniu.dcloud.net.cn/img/shoutao.png',text:'我的收藏'},
			{image:'https://img-cdn-qiniu.dcloud.net.cn/img/xueqiao.png',text:'我的足迹'},
			{image:'https://img-cdn-qiniu.dcloud.net.cn/img/xunlu.png',text:'安全设置'},
			{image:'https://img-cdn-qiniu.dcloud.net.cn/img/xuehua.png',text:'联系客服'}]">
			
		</uni-grid>

下面是js中方法的简单打印下标方法：

	// 鼠标点击九宫格事件
			goToPage(e){
				console.log(e)
			}

然后进行跳转二级页面

// 鼠标点击九宫格事件
			goToPage(e){
				var OpTxt = this.$refs.text.options;
				var ind = e.index
				if(ind === 0 ){
					var text =  OpTxt[ind].text
					uni.navigateTo({
						url:"userInfo?text="+text
					})
				}
				if(ind === 1){
					var text =  OpTxt[ind].text
					uni.navigateTo({
						url:"userInfo?text="+text
					})
				}
				if(ind === 2){
					var text =  OpTxt[ind].text
					uni.navigateTo({
						url:"userInfo?text="+text
					})
				}
				if(ind === 3){
					var text =  OpTxt[ind].text
					uni.navigateTo({
						url:"userInfo?text="+text
					})
				}
				if(ind === 4){
					var text =  OpTxt[ind].text
					uni.navigateTo({
						url:"userInfo?text="+text
					})
				}
				if(ind === 5){
					var text =  OpTxt[ind].text
					uni.navigateTo({
						url:"userInfo?text="+text
					})
				}
				if(ind === 6){
					var text =  OpTxt[ind].text
					uni.navigateTo({
						url:"userInfo?text="+text
					})
				}
				if(ind === 7){
					var text =  OpTxt[ind].text
					uni.navigateTo({
						url:"userInfo?text="+text
					})
				}
				if(ind === 8){
					var text =  OpTxt[ind].text
					uni.navigateTo({
						url:"userInfo?text="+text
					})
				}
			}
        },

跳转到对应的二级页面，我这里的二级页面是同一个，并动态改变setNavigationBarTitle的值

在子页面中这样接受参数

onLoad:function(options) {
			console.log(options)
			uni.setNavigationBarTitle({
				title: options.text
			});
		}

便实现了grid的点击到对应的二级子页面