#日日新闻客户端
效果如下
存放控制器的文件 | 存放框架等文件 | 存放示例文件 | 存放图片素材 | 存放视图文件 |
---|---|---|---|---|
control | dist | gh-pages | image | view |
#触摸滑动服务DEMO 触摸滑动服务DEMO
在对应控制器注入服务swipe
app.controller('autumnsCtrl', ['$scope', 'swipe', function($scope, swipe) {}])
在swipe对象上面执行method服务,并传入需要执行的回调函数
格式swipe.method([方向],[回调函数])
方向为四个top,bottom,left,right
回调函数的参数可以获取滑动前后的x和y坐标,并且方向的信息
具体是对象中的x1,x2,y1,y2
属性,和direction
属性
例如
swipe.method("bottom",function(e){
console.log(e)
})
loading动画在控制器进入前显示,ajax请求数据回调成功触发隐藏
$scope.loading = true;
$http.get(url).success(function(data) {
$scope.loading = false;
}
然后在视图view页面增加loading层,可以用gif也可以用图片配合css3动画
<div class="loading" ng-show="loading"><img src="image/loading.png" />
.loading {
position: absolute;
z-index: 20;
width: 100%;
height: 100%;
top: 0;
opacity: 0.5;
}
.loading img {
position: fixed;
left: 50%;
top: 50%;
margin-left: -28px;
margin-top: -28px;
animation: mymove 2s infinite;
animation-timing-function: linear;
animation-direction: normal;
}
#页内切换视图 页内切换视图DEMO
视图如下,思路为根据点击的选项卡,用ng-if或者ng-show实现隐藏或者出现
<article>
<section>
<div ng-click="show(1)" ng-class="{'border':page1}">我的信息</div>
<div ng-click="show(2)" ng-class="{'border':page2}">我的登記</div>
</section>
<section ng-if="page1">wsscat</section>
<section ng-if="page2">456</section>
</article>
$scope.page1 =true
$scope.page2 =false
$scope.show = function(page){
if(page==1){
$scope.page1 =true;
$scope.page2 =false;
}else if(page==2){
$scope.page2 = true;
$scope.page1 =false
}
}