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

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/hjy170314/article/details/90667722

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的点击到对应的二级子页面

 

 

 

 

展开阅读全文

没有更多推荐了,返回首页