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