angular移动开发那些事
一开始叫我使用angular开发移动端页面的时候我是拒绝的,且不说性能问题吧,主要是姐不会angular啊。移动端的开发我更倾向于vue。 移动端touch问题angular官方提供了一个touch模块angular-touch。首先,下载依赖包:
"//ajax.googleapis.com/ajax/libs/angularjs/X.Y.Z/angular-touch.js"
npm install --save angular-touch@X.Y.Z 或者: yarn add angular-touch@X.Y.Z
bower install angular-touch#X.Y.Z
"//code.angularjs.org/X.Y.Z/angular-touch.js" 然后在html文件中引入依赖 <script src="path/to/angular.js"></script> <script src="path/to/angular-touch.js"></script> 模块注册 angular.module('app',['ngTouch']); 如此,ngClick指令在触摸屏上的点击事件就不会在有300ms的延迟了。此外,ngTouch模块还提供ngSwipeLeft左划和ngSwipeRight右划指令。详细情况可以看文档 有的同学可能习惯了touchstart/touchend/touchmove,在这里推荐一个插件:ngTouch。 首先下载依赖 bower install ngtouch --save 使用npm下载 npm install ngtouch --save 然后再html文件中引入依赖 <script type="text/javascript" src="path/to/components/ngtouch/build/ngTouch.min.js"></script> 模块注入 var app = angular.module("demoapp",["ngTouch"]); 使用情况如下 <div ng-touchmove="someFunction()" ng-touchstart="someFunction()" ng-touchend="someFunction()"></div> swiper轮播angular的轮播图我用的插件是angular-swiper, 这里遇到了一个坑,就是ksSwiper模块执行时数据还没有请求回来,结果无法滑动。可以使用ng-if判断数据的长度,当长度大于0时再调用 ks-swiper-container(initial-slide="0" loop="true" show-nav-buttons="false" slides-per-view="1" space-between="5" pagination-clickable="false" ng-if="self.master.ofList.length>0") ng-repeat不能有重复的值这个问题是做轮播图的时候遇到的,当ng-repeat绑定的数组有重复的值时会报错“ngRepeat:dupes”,所以要注意数组去重。 监听数组变化angular的$swatch在监听数组的变化时,需要传入一个true参数,否则监听不到变化。如: $scope.$watch("yourValue",function(newValue,oldValue,scope) {},true); 绑定了ng-click的元素,使用原生的js触发click出错比如绑定了ng-click的元素,再用document.getElementById('myid').click()触发click事件,会报错。这个问题很奇怪,理论上不该呀,难道是我自己的问题?哪位大神如果看到的还请指教一下 ng-repeat内使用ng-if指令,参数$index会无效比如 li.clearfix(ng-repeat="item in self.items") div(ng-if="self.isShow") div(ng-click="self.clickHandler($index)") 这里的$index传的值并不是我们想要的下标。解决方法:可以改成ng-show或者使用一个变量记录下标 目前遇到的问题暂时先这样了,后面会持续更新。时间穷忙,能力也有限,写得不对的地方还请见谅~ (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |