Git Product home page Git Product logo

#日日新闻客户端

效果如下

这里写图片描述 这里写图片描述

存放控制器的文件 存放框架等文件 存放示例文件 存放图片素材 存放视图文件
control dist gh-pages image view

API来源

#触摸滑动服务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 这里写图片描述 这里写图片描述

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
	}
}

anjods's Projects

angular icon angular

所有angular学习过程中的代码

good-text-share icon good-text-share

:smiley_cat:整理这几年我在工作中的一些技术分享和学习资料 These share data are from my usual work and learning,hoping to help you,If you like you can star

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.