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

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     }

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏大数据钻研

前端面试那些坑之HTML篇

HTML 1、Doctype作用?标准模式与兼容模式各有什么区别? (1)、<!DOCTYPE>声明位于位于HTML文档中的第一行,处于<html> 标签之前...

40690
来自专栏司想君

React编程思想

能够按照构建的方式来思考web app的实现,是React众多优点之一。在这篇文章中,我们将引导你进行使用React构建可搜索产品数据表的思考过程。

53250
来自专栏keyWords

前端面试题1(HTML篇)

html5有哪些新特性、移除了那些元素?如何处理HTML5新标签的浏览器兼容问题?如何区分 HTML 和 HTML5?

15110
来自专栏互联网杂技

Angular 1 vs. Angular 2 深度比较

AngularJS 2 尽管还在Alpha阶段,但主要功能和文档已经发布。让我我们了解下Angular 1 和 2 的区别,以及新的设计目标将如何实现。 Ang...

345100
来自专栏西安-晁州

Vuejs中slot实现自定义组件header、footer等

vue中的slot主要负责内容分发,之前有介绍过slot的内容,具体链接:http://www.cnblogs.com/vipzhou/p/6640056.ht...

15340
来自专栏数据小魔方

如何在Excel里加载第三方插件,让你的Excel功能更加强大!!!

今天是小魔方的第三篇推送教程,要谈的话题是如何在Excel里加载第三方插件工具! 记得第一期的时候讲的如何调用开发工具,其实微软公司在开发office办公套件的...

53450
来自专栏司想君

React编程思想

在我们团队看来,React是使用JavaScript构建大型、快速的Web apps的首选方式。它已经在Facebook和Instagram项目中,表现出了非常...

41990
来自专栏phodal

我们是如何将 Cordova 应用嵌入到 React Native 中

重写一个应用是一件简单的事,可是演进一个应用则是一件复杂的工作。 过去的一年多里,我在工作上的主要职责是:手机 APP 开发。日常主要是编写基于 Ionic 和...

28560
来自专栏贾鹏辉的技术专栏@CrazyCodeBoy

React Native 每日一学(Learn a little every day)

本文出自《React Native学习笔记》系列文章。 每天一个知识点(技巧,经验,填坑日记等),每天学一点,离大神近一点。 汇聚知识,分享精华。 如果你是一...

40790
来自专栏贾鹏辉的技术专栏@CrazyCodeBoy

在Android 设备上获取照片、裁剪图片、压缩图片 @TakePhoto V3.0 发布

尊重版权,未经授权不得转载 本文出自:贾鹏辉的技术博客(http://www.devio.org) TakePhoto 简介 TakePhoto是一款用...

51960

扫码关注云+社区

领取腾讯云代金券