当前位置: 澳门新濠3559 > 服务器运维 > 正文

•$anchorScroll()读取并跳转至ID处,其他两个模块隐

时间:2019-12-08 19:30来源:服务器运维
俗话说的好:好记性不如一个烂笔头,本文对angularjs模块学习笔记,首先我们从anchorscroll开始学习,具体内容请看下文: 最近在公司接到一个需求,里面有一个三级跳转。类似于选择地

俗话说的好:好记性不如一个烂笔头,本文对angularjs模块学习笔记,首先我们从anchor scroll开始学习,具体内容请看下文:

最近在公司接到一个需求,里面有一个三级跳转。类似于选择地址的时候,选择的顺序是:省份->市->区。如果分三个页面跳转,那么体验非常不好,如果引入其他框架做成单页应用,又比较麻烦。所以可以用js把这一块做成单页应用的样子。。。

•$anchorScroll()读取并跳转至ID处,其他两个模块隐藏澳门新濠3559。•$anchorScroll()用于跳转至定义ID;•$location对象的hash()方法会替换当前url作为hash键;•$anchorScroll()读取并跳转至ID处。

主要思路

下面简单的例子,这里是输出结果:

通过改变url的hash值,跳到相应模块。先把默认模块显示出来,其他模块隐藏,分别给三个模块定义三个hash值,点击默认模块的选项的时候,改变hash值,同时在window上监听hashchange事件,并作相应模块跳转逻辑处理。这样即可模拟浏览器的前进后退,而且用户体验也比较好。

源码 index.html--11行,标示了的跳转ID:

下面详细来看看,现在有一个场景,选择顺序是:车牌子->车型->车系。

 {{key}} {{key}} {{item}} 

首先HTML部分。默认显示车牌子选择列表,其他两个模块隐藏。

app.js

  品牌         比亚迪汽车 宋      2013年款   
var demoApp = angular.module.controller("MockController",function ($scope, $location, $anchorScroll) {$scope.numbers = {"自然数":["","","","","","","","","","","","","","","","","","","",""],"质数":["","","","","","", "", "", "", ""]};$scope.jumper = function{$location.hash;}});

js逻辑控制部分

以上所述是小编给大家整理的AngularJS模块学习之Anchor Scroll 的相关内容,希望大家喜欢。

①定义一个变量对象,存储三个模块中分别选择的数据、定义hash值、相应模块的处理逻辑函数。

info={ brand:'', carType:'', carSeries:'', pages:['Brand','Type','Series'] };info.selectBrand=function(){ document.title = '选择商标'; brandEvent();}//选择车型info.selectType=function(){ document.title = '选择车型'; document.body.scrollTop = 0; //滚到顶部 window.scrollTo; //为该模块的dom绑定事件或做其他逻辑}//选择车系info.selectSeries=function(){ document.title = '选择车系'; document.body.scrollTop = 0; window.scrollTo;}

②dom绑定事件&其他逻辑

 function brandEvent(){//绑定跳转 $.click{ info.brand=$.text } function typeEvent(){//绑定跳转 $.click{ info.carType=$; goPage } function seriesEvent(){...}

③goPage逻辑跳转控制

function goPage { if &&(location.hash.indexOf{ // 后退操作 history.back(); document.title = '选择商标'; }else if &&(location.hash.indexOf{ history.back(); document.title = '选择车型'; }else { location.hash = tag; }}

④js入口文件

window.onload=function; //为默认显示的模块中的元素绑定相应的事件及其他逻辑 $.on("hashchange", function ; });}

⑤最重要的hash改变逻辑控制

function doHashChange(){ //获取hash的值 var hash = location.hash.split[0], tag = hash.replace; if (info.pages.indexOf { tag = 'Brand'; } $.children; //执行每个模块不同的方法 if(typeof == "function"){ info['select' + tag](); } //展示对应dom $;}

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持脚本之家!

编辑:服务器运维 本文来源:•$anchorScroll()读取并跳转至ID处,其他两个模块隐

关键词:

  • 上一篇:没有了
  • 下一篇:没有了