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

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


		
			
		

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

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

混合app框架之uni-app---grid布局_第1张图片

然后进行跳转二级页面

// 鼠标点击九宫格事件
			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的点击到对应的二级子页面

 

 

 

 

你可能感兴趣的:(前端知识)