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

博客介绍了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的点击到对应的二级子页面

 

 

 

 

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值