uni-app跳转
2019-06-14 10:06
741 查看
uni-app按钮跳转
昨天开始学习uni-app,是vue里面的一种。然后记录一下一些基础的东西,比如按钮的跳转
在标签里面写的就是有点大同小异了,和以前的css写的有点类似,也是添加事件监听,当事件点击的时候,执行的操作。
<view class="uni-header-logo" > <button class="mini-btn" type = "default" size = "mini" v-on:click="gotoIndex()">按钮跳转</button> </view>
在method里面加下如下代码,uni.navigateTo代表重新加载,可以跳转到任何页面
gotoIndex(){ uni.navigateTo({ url: '/pages/about/about' }); },
另外,如果是列表,使用循环,点击列表里面的某一条信息,可以实现跳转,怎么办呢
第一种方法:
onNavigationBarTap(e) { console.log("onNavigationBarTap“+e); if(e==0){ uni.navigateTo({ url: '/pages/about/about' }); }else if(e==1){ uni.navigateTo({ url: '/pages/about/about' }); },
对应的view加上@click=“onNavigationBarTap()”
还有一种更加简便的方法
date,retuen里面加入:
dataArray:[ {icon:"/static/img/_0007s_0001_6-onLIne.png",name:"在线客服",des:" ",callback:this.trigger}, {icon:"/static/img/_0007s_0004_contant.png",name:"联系客服",des:"400-888888",callback:this.contant}, {icon:"/static/img/bazaar_manager.png",name:"市场经理",des:"暂无配置",callback:this.manager}, {icon:"/static/img/_0007s_0000_pwd.png",name:"修改密码",des:" ",callback:this.editPwd}, {icon:"/static/img/_0007s_0002_aboutUs.png",name:"关于我们",des:" ",callback:this.aboutUs}, ],
method里面加入:
trigger(){ uni.navigateTo({ url: '/pages/shopManager/zaixian/zaixian' }); console.log("trigger"); }, contant(){ uni.navigateTo({ url: '/pages/shopManager/callPhone/callPhone' }); console.log("contant"); }, manager(){ uni.navigateTo({ url: '/pages/shopManager/manager/manager' }); console.log("manager"); }, editPwd(){ uni.navigateTo({ url: '/pages/shopManager/editPsw/editPsw' }); console.log("editPwd"); }, aboutUs(){ uni.navigateTo({ url: '/pages/shopManager/aboutUs/aboutUs' }); console.log("aboutUs"); },
表示还需要加油学习,好多东西跟不上进度,。。
相关文章推荐
- 微信小程序或uni-app scrollView 之scroll-into-view无法跳转的一个坑
- uni-app跳转连接到QQ
- uni-app中v-for点击跳转指定页面2
- 微信中无法下载APP的解决方案(微信自动跳转浏览器打开下载链接)
- Android 如何保证App切换到后台,或页面跳转后,重新打开APP、或返回之前页面时,维持其状态不变
- Js判定移动端是否安装app,若已安装,则打开,未安装则跳转到下载页面
- 在appdelegate当中判断跳转到我们app内的来源Url
- App跳转QQ聊天
- 微信扫一扫二维码跳转手机外部浏览器打开下载app的链接是怎么实现的
- 两个App之间传值并跳转
- 微信中怎么打开app文件 安卓微信跳转打开外部浏览器打开app文件下载链接(苹果无需上架跳转Apple Store下载)
- mac app开发之:利用NSWindowController实现窗口跳转
- Android App 评价/跳转到应用市场
- 关于uni-app你需要了解的基本问题及选型评估23问
- 关于android app跳转和从web跳转的问题(转载修正)
- Android应用之间的跳转—从一个app跳转至另一个app
- uniapp-滑动器scroll-view
- TabBar——APP中下面的“导航” 界面跳转
- mui开发APP教程之使用选项卡跳转子页面