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

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.indexif(ind === 0 ){var text =  OpTxt[ind].textuni.navigateTo({url:"userInfo?text="+text})}if(ind === 1){var text =  OpTxt[ind].textuni.navigateTo({url:"userInfo?text="+text})}if(ind === 2){var text =  OpTxt[ind].textuni.navigateTo({url:"userInfo?text="+text})}if(ind === 3){var text =  OpTxt[ind].textuni.navigateTo({url:"userInfo?text="+text})}if(ind === 4){var text =  OpTxt[ind].textuni.navigateTo({url:"userInfo?text="+text})}if(ind === 5){var text =  OpTxt[ind].textuni.navigateTo({url:"userInfo?text="+text})}if(ind === 6){var text =  OpTxt[ind].textuni.navigateTo({url:"userInfo?text="+text})}if(ind === 7){var text =  OpTxt[ind].textuni.navigateTo({url:"userInfo?text="+text})}if(ind === 8){var text =  OpTxt[ind].textuni.navigateTo({url:"userInfo?text="+text})}}},

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

在子页面中这样接受参数

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

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

混合app框架之uni-app---grid布局相关推荐

app框架一（组件化）
背景在早期app功能比较简单业务不复杂的情况下,我们一般都不需要组件化,最多就是基础库抽成私有库,正常情况下不需要划分业务组件也不需要路由等.在合适的时机引入合适的框架,而不是盲目的跟风炫技.特别是 ...
物联网控制APP入门专题（四）---使用android studio制作一个控制页面的APP框架
摘要:上篇文章讲了如何用阿里云IoT Studio快速制作一个网页版的手机端,以及通过第三方平台将这个网页打包成一个APK文件,使它可以安装到手机实现APP的功能.但是使用第三方平台做的APP是需要收 ...
【app开发学习】APP开发的标准流程
最近公司外包要增加APP项目团队,领导有意让我带队,但之前开发App都是自己写点小工具来玩玩兴致一下而已,所以现在只好加班加点的在找些资料学习,也在这做一下分享. 通常一般的APP开发及上线流程步骤 ...
Ionic混合移动app框架学习
第一章绪论创建移动app有三种安卓原生App,使用java语言,目前推荐kotlin语言,开发工具Android studio IOS原生App,使用Objective-C或者Swift语言,开 ...
使用cordova + vue搭建混合app框架
1. 前言:在进行hybrid app开发时,可以采用vue.js前端框架进行h5页面开发,然后使用跨平台cordova工具打包成app,如android或ios等,再h5页面也可以使用cordova ...
混合App 框架选型
为什么80%的码农都做不了架构师?>>> 个人一直想做个App,但是学习 IOS 的过程发现原生的做界面还是听麻烦的就放弃了.后来就转到混合式App阵营了混合式App 定义 ...
切换 uniapp_万能前端框架uni app初探03：底部导航开发
前言本节我们使用uni app的底部导航功能,点击不同tab会显示不同页面,这个功能在实际项目开发中几乎是必备的. 一.基础知识 1.tabBar 如果应用是一个多 tab 应用,可以通过 tabB ...
云炬Android开发笔记 12基于WebView的混合App框架设计（包含浏览器与原生请求Cookie的处理）
阅读目录 1.WebView高可扩展性封装 1.1 发现模块的框架搭建 1.2 webView的基类 1.3 对webview基类的实现 1.4 setInitializer的方法的实现 1.5 we ...
HbuilderX:uni app踩坑之uView-ui
HbuilderX:uni app踩坑之uView-ui 最近在自学uniapp,想找一个ui框架提高一下学习和开发的效率,于是就网上冲浪,浪来浪去,最后选择了uView-ui这款.其实有些框架我是有 ...

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

混合app框架之uni-app---grid布局相关推荐

最新文章

热门文章