混合app开发使用ionic框架的<ion-scroll>指令能够方便地实现水平滚动和垂直滑动。比如我们想实现一个能够水平滑动的画廊,可以使用下面这段代码。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="jquery-1.11.1.min.js"></script>
<script src="./1.1.1-release/js/ionic.bundle.js"></script>
<link rel="stylesheet" type="text/css" href="./1.1.1-release/css/ionic.css" />
<style>
/*nowrap不让img换行*/
.picturesholder{
background-color:#fff;
margin:20px;
width:400px;
height:80px;
overflow: hidden;
white-space: nowrap;
}
/**图片占满画廊*/
.picturesholder img{
width:100px;
height:81px;
}
</style>
<script>
var testModule = angular.module('testApp', ['ionic']);
testModule.controller('MyController', function($scope, $ionicScrollDelegate) {
$scope.pictures=["imgs/1.png","imgs/2.png","imgs/3.png","imgs/4.png","imgs/5.png","imgs/6.png","imgs/7.p