Ionic如何实现单选二级菜单切换

  最近有个需求,需要做一个用户视图,数据全都从PC端系统实时取,由于这个功能在电脑浏览器展示还可以,即使菜单全部展开,只要美工稍加调整下位置也是放得下的,但是同样的功能让App也做一个就有问题了,尤其是课程体系切换里面有很多岗位菜单切换,而且是实时获取,如果在主页面显示会占用很大地方,影响用户体验,最终斟酌再三,将此菜单切换放在弹窗里面,就是点击一下弹个页面让用户选择,App页面宽度比较窄显示列表比较轻松,就做了个弹窗,需要说明的是这个弹窗点击一级菜单展开当前一级下面的二级菜单,点击二级菜单即是选择,然后关闭弹窗切换主页面内容。

                     

          

这个功能有两个难点:

    其一是ionic的模态框modal框貌似不能动态传参

    其二是菜单切换需要单选,因为需要各一个right(打勾)标示当前项

  对于第一个问题,我的解决方法是主页面初始化时将弹窗内的数据一次性获取放在local,后续用户点击单选项就直接从local的JavaScript切换,且等,这里需要强调的是,如果将获取数据放在用户点开弹窗时候,模态框很容易死掉!!!(这个问题只在获取数据时间比较长的时候),一定要记住,我可是填了n多坑ε(┬┬﹏┬┬)3才success...

  第二个问题解决方法也很费力,大多数时候做个一级多选项单选切换十分容易,做个二级就困难重重啦,要知道ionic的item、ion-item、ion-list都是有语义,随便写的话 二级菜单不能显示 此功能就废掉了,啊啊啊~,还是上代码吧~

<!--默认课程体系切换-->
<script id="list/level.html" type="text/ng-template"><ion-modal-view><ion-header-bar class="bar bar-header" style="background-color:#efefef;"><h1 class="title" style="color:#7186a0;">课程体系</h1><button class="button button-icon ion-ios-close-empty" style="color:black;" ng-click="levelModal.hide()"></button></ion-header-bar><ion-content><ion-list class="mRecord-main-detail-level"><!--层级--><label class="item item-radio" ng-repeat="stmt in courseSystem"><!--ng-checked="stmt.cid==record.defaultCourseSystem.cid"--><input type="radio"  name="group" ng-click="ChangeDom(stmt.oid)"  ng-checked="checkValue==stmt.oid"><div class="col-70 item-content"  style="padding-top:10px;padding-bottom:10px;padding-left:10%"><b>{{stmt.jc}}</b></div><img class="radio-icon ion-checkmark col-30" src="img/record/right.png" style="height:42px;padding-top:8px;padding-bottom:8px;padding-right:10%;"><!--阶级--><!--ng-if="checkValue==stmt.cid"--><label ng-repeat="ss in stmt.contructioninfo" class="item item-radio"style="padding-left:20%;border-top: 1px solid lightgrey"ng-if="checkValue==stmt.oid" ng-click="changeCourseSystem(stmt,ss.jjId)"><input type="radio" name="group-{{stmt.cid}}-{{$parent.$parent.$index}}" ng-checked="ss.jjId==checkValue2"><div class="col-80 item-content" style="padding-top:7px;padding-bottom:7px;">{{ss.jjName}}</div><img class="radio-icon ion-checkmark" src="img/record/right.png" style="padding:3%;margin-right:3%;"></label></label></ion-list></ion-content><ion-footer-bar class="mlearning-foot" style="height:auto;"></ion-footer-bar></ion-modal-view>
</script>

  以上html需要点拨的是,一级的时候选项切换 radio是放在label里面的,一个套label就是一个选项,label需要在同一级,做二级单选的时候需要将一级选项的对应的二级选项全都放在当前一级label里面(而且是当前二级全部选项哦~),页面写好,做功能切换的时候必须要配合着JavaScript(点开一个展开一个,都不收起多难看啊~~~),还有就是css,不多说,各位自行调吧~,简单但费力不少。。。

    下面我将实时的页面dom共享以及JavaScript切换部分的代码共享,希望正在使用ionic开发相似功能的童鞋少走弯路

    

 1     /**
 2      * 课程体系弹出框
 3      */
 4     $ionicModal.fromTemplateUrl('list/level.html', {
 5       scope: $scope,
 6       animation: 'slide-in-up',
 7     }).then(function (modal) {
 8       $scope.levelModal = modal;
 9     });
10
11     //获取课程体系列表数据
12     $scope.showLevel= function() {
13       $scope.courseSystem=[];
14       for(var item in $scope.record.allCourseSystem){
15         if($scope.record.allCourseSystem[item].css==1){//过滤掉未发布的
16           $scope.courseSystem.push($scope.record.allCourseSystem[item]);
17         }
18       }
19       $scope.checkValue=$scope.beforeId=$scope.record.defaultCourseSystem.oid;//先设置最初的层级id
20       $scope.checkValue2=$scope.record.defaultCourseSystem.jid;
21       $scope.levelModal.show();
22     }
23     //切换Dom
24     $scope.ChangeDom=function(val){
25       $scope.checkValue=val;
26       $scope.checkValue2=null;
27     }
28     //课程体系切换
29     $scope.changeCourseSystem=function(stmt,jId){
30       $scope.levelModal.hide();//隐藏
31       $scope.record.defaultCourseSystem=stmt;//切换默认级别
32       for(var i in stmt.contructioninfo){
33         if(stmt.contructioninfo[i].jjId==jId){
34           $scope.record.defaultCourseSystem.target=stmt.contructioninfo[i].target;//目标
35           $scope.record.defaultCourseSystem.ability=stmt.contructioninfo[i].ability;//能力
36           $scope.record.defaultCourseSystem.jjname=stmt.contructioninfo[i].jjName;//阶级名称
37         }
38       }
39
40       //未切换不从数据库取数据
41       if($scope.beforeId==$scope.record.defaultCourseSystem.cid){
42         return;
43       }
44       request({jId:jId,oId:stmt.oid});
45      // $scope.$apply();//数据应用于界面
46     }

funnyzpc@gmail.com

Ionic如何实现单选二级菜单切换相关推荐

  1. html二级菜单显示与隐藏,Vue实现二级菜单的显示与隐藏

    Vue实现二级菜单的显示与隐藏 *{ padding: 0; margin: 0; font-size: 14px; } ul{ width: 200px; height: auto; } h2{ b ...

  2. vue 左侧菜单隐藏_vue.js 左侧二级菜单显示与隐藏切换的实例代码?

    郎朗坤 废话不多说了,直接给大家贴代码了,完整代码: vue点击切换显示隐藏 {{item.name}} {{subItem.name}} 以上所述是小编给大家介绍的vue.js 左侧二级菜单显示与隐 ...

  3. php微信级联菜单,php微信公众号开发之二级菜单

    本文实例为大家分享了php微信公众号二级菜单的具体代码,供大家参考,具体内容如下 核心代码: $postObj = simplexml_load_string($postStr, 'SimpleXML ...

  4. 二级菜单HTML原理,CSS多级菜单的实例代码讲解

    这是一个相当炫的功能,让网页看起来像桌面程序,如window的开始菜单.实现原理基本和纯CSS相册差不多,但要注意的事项比较多,让我们一步步来吧. 先来一个非常简单的一级菜单与悬停效果. 菜单一 菜单 ...

  5. bootstrap导航窗格响应式二级菜单

    这次碰到的需求是响应式二级导航窗格,默认的导航窗格只有点击下拉框的二级窗格,会有如下问题:一级菜单无法添加超链接,二级菜单展示要多点一下. 实现目标: 1.滑动到指定区域,展示二级菜单. 2.一级菜单 ...

  6. pc端-轮播图 和 二级菜单

    本篇目录 轮播图 + 二级菜单 轮播图 + 二级菜单 <!DOCTYPE html><html><head lang="en"><meta ...

  7. Axure RP9——【导航栏二级菜单的展开效果】

    导航栏二级菜单的展开效果 Navigation Bar · secondary menu Here's how I want things to unfold. 目录 导航栏二级菜单的展开效果 Nav ...

  8. axure学习帖-中继器二级菜单

    之前制作的二级菜单,使用的是动态面板,制作起来比较复杂(可能是因为我方法不得当),最终呈现效果如下所示: 虽然实现了菜单的功能,但是非常不利于后期的维护.后来得知二级菜单可以使用中继器来完成,于是在网 ...

  9. Python+Selenium - 练习:打开京东->QQ登录->修改个人信息(含鼠标悬停后选中二级菜单进行点击)

    举例题目:打开京东->QQ登录->修改个人信息 覆盖知识点:         1.id.name.link定位         2.xpath.css定位及相对路径定位         3 ...

最新文章

  1. 【每日DP】day 10、P1005 矩阵取数游戏【区间DP+高精(python)】难度⭐⭐⭐★
  2. 阿里终面:怎么用 UDP 实现 TCP?
  3. python docx 复制_99%的人都不知道的Python整理文件方法,效率提升100倍
  4. php用于防SQL注入的几个函数
  5. matlab中邮递员问题实例,中国邮递员问题matlab
  6. breakcontinue
  7. ASP.NET Core 使用MySQL(Database First)
  8. USACO Section2.1 Hamming Codes 解题报告 【icedream61】
  9. python之设计模式的装饰器9步学习
  10. FIFO队列 ADT接口 链表实现
  11. 【以太坊源码】交易(一)
  12. WebSocket传输图片
  13. 在微信小程序中绘制图表(part1)
  14. 一个关于继承和多态的问题(思索篇)
  15. 操作系统如何恢复到原先状态
  16. mysql应用教程李辉答案_数据库系统原理及mysql应用教程李辉答案章节期末答案...
  17. WinZip for Mac注册版
  18. <个人学习记录>斑点检测
  19. 如何管理一个外包团队小总结
  20. java RSA生成公钥对象和私钥对象

热门文章

  1. java---解析XML文件,通过反射动态将XML内容封装到一个类中
  2. linux中 字符串,linux内核驱动中对字符串的操作
  3. Spring Boot与JWT整合实现前后端分离的用户认证
  4. SQL Developer 使用问题与解决方法汇总
  5. Gitlab Java API 使用示例
  6. ps4pro服务器维护,PS4 | PS4 Pro 常见问题 | PlayStation
  7. linux搭建java开发环境_Linux搭建Java开发环境
  8. #6278. 数列分块入门 2
  9. STM32之端口复用与重映射
  10. MATLAB信号处理之连续时间系统的时域分析