ionic的侧滑,无限轮播,上拉刷新下拉加载

来源：互联网发布：程序员考试教材编辑：程序博客网时间：2024/04/30 14:59
<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <!--格式-->    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">    <!--连接CSS样式-->    <link href="lib/css/ionic.css" rel="stylesheet">    <!--导入lib包-->    <script src="lib/js/ionic.bundle.min.js"></script>    <script>        /*声明ionic模块*/        var myapp=angular.module("myapp",["ionic"]);        /*为模块添加控制器*/        myapp.controller("myCtrl", function($scope, $http) {            /*创建一个数组，没刷新时展示旧的数据*/            $scope.items=[                {"title":"01","desc":"2016秋季爆款","imgsrc":"img/pic_01.jpg"},                {"title":"02","desc":"2016秋季爆款","imgsrc":"img/pic_01.jpg"},                {"title":"03","desc":"2016秋季爆款","imgsrc":"img/pic_01.jpg"},                {"title":"04","desc":"2016秋季爆款","imgsrc":"img/pic_01.jpg"},                {"title":"05","desc":"2016秋季爆款","imgsrc":"img/pic_01.jpg"},                {"title":"06","desc":"2016秋季爆款","imgsrc":"img/pic_01.jpg"},                {"title":"06","desc":"2016秋季爆款","imgsrc":"img/pic_01.jpg"},                {"title":"06","desc":"2016秋季爆款","imgsrc":"img/pic_01.jpg"},                {"title":"06","desc":"2016秋季爆款","imgsrc":"img/pic_01.jpg"},                {"title":"06","desc":"2016秋季爆款","imgsrc":"img/pic_01.jpg"},                {"title":"06","desc":"2016秋季爆款","imgsrc":"img/pic_01.jpg"}            ];            /*解析Json串，下拉刷新,展示新的数据*/            $scope.doRefresh = function() {                $http.get("ssss.json")                    .success(function(newItems) {                        $scope.items = newItems;                    })                    .finally(function() {                        $scope.$broadcast("scroll.refreshComplete");                    });            };            /*上滑加载更多新的数据*/            $scope.loadMore = function() {                $http.get('ssss.json').success(function(items) {                    Array.prototype.push.apply($scope.items,items);                    $scope.$broadcast('scroll.infiniteScrollComplete');                });            };            $scope.$on('stateChangeSuccess', function() {                $scope.loadMore();            });        });        /*点击事件，点击左侧按钮，开始侧滑*/        myapp.controller("Ctrl",function($scope,$ionicSideMenuDelegate){            $scope.toggleLeft = function() {                $ionicSideMenuDelegate.toggleLeft();            };        });    </script></head><!--ng-app,ng-myCtrl--><body ng-app="myapp" ng-controller="myCtrl"><!--侧滑--><ion-side-menus>    <!--点击左侧按钮侧滑ng-Ctrl-->    <ion-side-menu-content ng-controller="Ctrl"> <!--底部选项卡--><ion-tabs class="tabs-positive tabs-icon-top"><!--第一个选项卡：关联无限轮播，按钮，title-->    <ion-tab title="首页1" icon-on="ion-ios-filing" icon-off="ion-ios-filing"><!--头：按钮，title-->    <ion-header-bar align-title="center" class="bar-positive">        <div class="buttons">            <button class="button" ng-click="toggleLeft()">左侧按钮</button>        </div>        <h1 class="title">Title!</h1>        <div class="buttons">            <button class="button">右侧按钮</button>        </div>    </ion-header-bar>        <!--内容：无限轮播-->    <ion-content>        <ion-slide-box auto-play="true" slide-interval="2000" does-continue="true">            <ion-slide>                <div class="box blue"><img src="img/community_02.jpg"></div>            </ion-slide>            <ion-slide>                <div class="box yellow"><img src="img/community_04.jpg"></div>            </ion-slide>            <ion-slide on-slide-changed="slideHasChanged(index)">                <div class="box pink"><img src="img/community_06.jpg"></div>            </ion-slide>        </ion-slide-box><!--下拉刷新新的数据-->        <ion-refresher                pulling-text="下拉刷新..."                on-refresh="doRefresh()">        </ion-refresher>        <!--展示旧的新的数据-->        <ion-list>            <ion-item ng-repeat="item in items">{{item.desc+item.title+item.picUrl}}             <img ng-src="{{item.imgsrc}}">            </ion-item>        </ion-list>        <!--上滑加载更多新的数据-->        <ion-infinite-scroll                on-infinite="loadMore()"                distance="1%">        </ion-infinite-scroll>    </ion-content>    </ion-tab>    <!--第二个选项卡-->    <ion-tab title="首页2" icon-on="ion-ios-clock" icon-off="ion-ios-clock-outline">        <ion-content>            <div>ABCD风格</div>        </ion-content>    </ion-tab>    <!--第一个选项卡-->    <ion-tab title="首页3" icon-on="ion-ios-gear" icon-off="ion-ios-gear-outline">    </ion-tab></ion-tabs>    </ion-side-menu-content>    <!-- 左侧菜单 -->    <ion-side-menu side="left" width="150">        <ion-list>            <ion-item class="item-icon-right">我的资料<i class="icon ion-chevron-right" menu-toggle></i></ion-item>            <ion-item><img src="img/pic_01.jpg"></ion-item>            <ion-item class="item-icon-right">我的收藏<i class="icon ion-chevron-right"></i></ion-item>            <ion-item class="item-icon-right">我的设置<i class="icon ion-chevron-right"></i></ion-item>            <ion-item class="item-icon-right">我的购物车<i class="icon ion-chevron-right"></i></ion-item>            <ion-item class="item-icon-right">我的钱包<i class="icon ion-chevron-right"></i></ion-item>        </ion-list>    </ion-side-menu></ion-side-menus></body></html>
阅读全文
1 0