ionic侧滑加上拉刷新

来源：互联网发布：gephi源码构建编辑：程序博客网时间：2024/06/05 19:11
<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">    <title>Title</title>    <link href="https://cdn.bootcss.com/ionic/1.3.2/css/ionic.css" rel="stylesheet">    <style>        img{            width: 100%;            height: auto;        }        .slider-pager .slider-pager-page{            color: #fff;        }        .item-icon-right .icon{            font-size: 14px;        }        .item, .item h1, .item h2, .item h3, .item h4, .item h5, .item h6, .item p, .item-content, .item-content h1, .item-content h2, .item-content h3, .item-content h4, .item-content h5, .item-content h6, .item-content p{    white-space: normal;}    </style>    <script src="https://cdn.bootcss.com/ionic/1.3.2/js/ionic.bundle.min.js"></script>    <script>        var myapp=angular.module("myapp",["ionic"]);        myapp.controller("myCtrl",function($scope,$ionicSideMenuDelegate){            $scope.toggleLeft = function() {                $ionicSideMenuDelegate.toggleLeft();            };        });        myapp.controller("Ctrl",function($scope,$http){            $http({                url:"data.json",                method:"GET"            }).then(function(data){                $scope.data=data.data;            });            $scope.loadMore = function() {                $http.get('data.json').success(function(items) {                    //useItems(items);                    Array.prototype.push.apply($scope.data,items);                    $scope.$broadcast('scroll.infiniteScrollComplete');                });            };            $scope.$on('stateChangeSuccess', function() {                $scope.loadMore();            });        })    </script></head><body ng-app="myapp"><ion-side-menus>    <!-- 中间内容 -->    <ion-side-menu-content ng-controller="myCtrl">        <ion-tabs class="tabs-positive tabs-icon-top">            <ion-tab title="首页1" icon-on="ion-ios-filing" icon-off="ion-ios-filing-outline">                <!-- 标签 1 内容 -->                <!--头部-->                <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 ng-controller="Ctrl">                    <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-list>                        <ion-item ng-repeat="item in data">                            <p>{{item.text}}</p>                            <img ng-src="{{item.pic}}">                        </ion-item>                    </ion-list>                    <ion-infinite-scroll                            on-infinite="loadMore()"                            distance="1%">                    </ion-infinite-scroll>                </ion-content>            </ion-tab>            <ion-tab title="关于1" icon-on="ion-ios-clock" icon-off="ion-ios-clock-outline">                <!-- 标签 2 内容 -->                <p>这个是第2个</p>            </ion-tab>            <ion-tab title="设置1" icon-on="ion-ios-gear" icon-off="ion-ios-gear-outline">                <!-- 标签 3 内容 -->                <p>这个是第3个</p>            </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>
阅读全文
0 0