ionic+侧滑+轮播+刷新

来源：互联网发布：淘宝网外贸店编辑：程序博客网时间：2024/06/05 19:17
<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0,user-scalable=0" />    <title>侧滑</title>    <script src="../angular-1.5.5/angular.min.js"></script>    <link rel="stylesheet" href="../lib/css/ionic.min.css">    <style>        img{            width: 100%;            height: auto;        }    </style>    <script src="../lib/js/ionic.bundle.min.js"></script>    <script>        var app = angular.module("myapp",["ionic"]);        app.controller("ContentController",function($scope, $ionicSideMenuDelegate) {            $scope.toggleLeft = function() {                $ionicSideMenuDelegate.toggleLeft();            };        })        app.controller("mycont",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) {                    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="ContentController">            <ion-tabs class="tabs-positive tabs-icon-only">                <ion-tab title="首页" icon-on="ion-ios7-filing" icon-off="ion-ios7-filing-outline">                    <!-- 标签 1 内容 -->                    <ion-header-bar align-title="center" class="bar-positive">                        <div class="buttons">                            <button class="button" ng-click="doSomething()">左侧按钮</button>                        </div>                        <h1 class="title">Title!</h1>                        <div class="buttons">                            <button class="button">右侧按钮</button>                        </div>                    </ion-header-bar>                    <ion-content ng-controller="mycont">                        <ion-slide-box auto-play="true" slide-interval="1000" 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-side-menus>                    <!-- 中间内容 -->                    <ion-side-menu-content ng-controller="ContentController">                    </ion-side-menu-content>                    <!-- 左侧菜单 -->                    <ion-side-menu side="left">                    </ion-side-menu>                </ion-side-menus>                <ion-tab title="关于" icon-on="ion-ios7-clock" icon-off="ion-ios7-clock-outline">                    <!-- 标签 2 内容 -->                    <p>这个是第2个</p>                </ion-tab>                <ion-tab title="设置" icon-on="ion-ios7-gear" icon-off="ion-ios7-gear-outline">                    <!-- 标签 3 内容 -->                    <p>这个是第3个</p>                </ion-tab>            </ion-tabs>        </ion-side-menu-content>        <!-- 左侧菜单 -->        <ion-side-menu side="left">            <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