ionic 侧滑+无限轮播+信息展示+头部底部

来源：互联网发布：c语言一维数组最大长度编辑：程序博客网时间：2024/05/22 05:31

主页

<!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">    <link rel="stylesheet" href="../lib/css/ionic.min.css">    <script src="../lib/js/ionic.bundle.min.js"></script>    <style>        *{            margin:0;            padding:0;        }        img{            width:100%;            height: auto;        }        .slider-pager .slider-pager-page.active{            color: white;        }        .tou{            width: auto;            height: 100%;        }        ion-list ion-item p{            width: 100%;            height: 30px;            line-height: 40px;        }        ion-list ion-item p img{            width: auto;            height: 25px;            line-height: 40px;            padding-right:10px;        }    </style>    <script>        var my=angular.module("my",["ionic"]);        my.controller("mys",function ($scope, $http,$ionicSideMenuDelegate) {            $http({                url:"data.json"            }).then(function (data) {                $scope.data=data.data            })            $scope.doRefresh = function() {                $http.get('data.json')                    .success(function(newItems) {                        $scope.data = newItems;                    })                    .finally(function() {                        // 停止广播ion-refresher                        $scope.$broadcast('scroll.refreshComplete');                    });            };            /*上拉加载*/            $scope.loadMore = function() {                $http.get('data.json').success(function(data) {                    Array.prototype.push.apply($scope.data,data);                    $scope.$broadcast('scroll.infiniteScrollComplete');                });            };            $scope.$on('stateChangeSuccess', function() {                $scope.loadMore();            });            $scope.toggleLeft = function() {                $ionicSideMenuDelegate.toggleLeft();            };        })    </script></head><body ng-app="my" ng-controller="mys"><ion-side-menus>    <!-- 中间内容 -->    <ion-side-menu-content>        <ion-tabs class="tabs-positive tabs-icon-top">            <ion-tab title="首页" 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="doSomething()">左侧按钮</button>                    </div>                    <h1 class="title">飞鸟社</h1>                    <div class="buttons">                        <button class="button">右侧按钮</button>                    </div>                </ion-header-bar>                <ion-content>                    <ion-slide-box auto-play="true" does-continue="true" slide-interval="1000">                        <ion-slide>                            <div class="box blue"><img src="../img/community_06.jpg" height="380" width="750"/></div>                        </ion-slide>                        <ion-slide>                            <div class="box yellow"><img src="../img/community_04.jpg" height="380" width="750"/></div>                        </ion-slide>                        <ion-slide on-slide-changed="slideHasChanged(index)">                            <div class="box pink"><img src="../img/community_02.jpg" height="380" width="750"/></div>                        </ion-slide>                    </ion-slide-box>                    <ion-refresher                            pulling-text="下拉刷新..."                            on-refresh="doRefresh()">                    </ion-refresher>                    <ion-list>                        <ion-item ng-repeat="item in data">                            <h2>{{item.title}}</h2>                            <img src="{{item.pic}}">                            <p>{{item.text}}</p>                        </ion-item>                    </ion-list>                    <ion-infinite-scroll                            on-infinite="loadMore()"                            distance="0%">                    </ion-infinite-scroll>                </ion-content>            </ion-tab>            <ion-tab title="关于" icon-on="ion-ios-clock" icon-off="ion-ios-clock-outline">                <!-- 标签 2 内容 -->                <p>第二个</p>            </ion-tab>            <ion-tab title="设置" icon-on="ion-ios-gear" icon-off="ion-ios-gear-outline">                <!-- 标签 3 内容 -->                <p>第三个</p>            </ion-tab>        </ion-tabs>    </ion-side-menu-content>    <!-- 左侧菜单 -->    <ion-side-menu side="left">        <ion-header-bar align-title="center" class="bar-positive">            <img src="../img/p03.png" class="tou">            <h1 class="title">信息</h1>        </ion-header-bar>        <ion-content>            <ion-list>                <ion-item>                    <p><img src="../png/512/QQ1.png">{{"我的超级会员"}}</p>                </ion-item>                <ion-item>                    <p><img src="../png/512/QQ1.png">{{"QQ钱包"}}</p>                </ion-item>                <ion-item>                    <p><img src="../png/512/QQ1.png">{{"个性装扮"}}</p>                </ion-item>                <ion-item>                    <p><img src="../png/512/QQ1.png">{{"我的收藏"}}</p>                </ion-item>                <ion-item>                    <p><img src="../png/512/QQ1.png">{{"我的相册"}}</p>                </ion-item>                <ion-item>                    <p><img src="../png/512/QQ1.png">{{"我的文件"}}</p>                </ion-item>                <ion-item>                    <p><img src="../png/512/QQ1.png">{{"免流量特权"}}</p>                </ion-item>            </ion-list>        </ion-content>    </ion-side-menu>    <!-- 右侧菜单 -->    <ion-side-menu side="right">    </ion-side-menu></ion-side-menus></body></html>

侧滑页
<!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">    <link rel="stylesheet" href="../lib/css/ionic.min.css">    <script src="../lib/js/ionic.bundle.min.js"></script>    <style>        .tou{            width: auto;            height: 100%;        }        ion-list ion-item p{            width: 100%;            height: 30px;            line-height: 40px;        }        ion-list ion-item p img{            width: auto;            height: 25px;            line-height: 40px;            padding-right:10px;                    }    </style>    <script>        var my=angular.module("my",["ionic"]);        my.controller("ContentController",function ($scope, $ionicSideMenuDelegate) {                $scope.toggleLeft = function() {                    $ionicSideMenuDelegate.toggleLeft();                };        });    </script></head><body ng-app="my"><ion-side-menus>    <!-- 中间内容 -->    <ion-side-menu-content ng-controller="ContentController">    </ion-side-menu-content>    <!-- 左侧菜单 -->    <ion-side-menu side="left">        <ion-header-bar align-title="center" class="bar-positive">            <img src="../img/p03.png" class="tou">            <h1 class="title">信息</h1>        </ion-header-bar>        <ion-content>            <ion-list>                <ion-item>                    <p><img src="../png/512/QQ1.png">{{"我的超级会员"}}</p>                </ion-item>                <ion-item>                    <p><img src="../png/512/QQ1.png">{{"QQ钱包"}}</p>                </ion-item>                <ion-item>                    <p><img src="../png/512/QQ1.png">{{"个性装扮"}}</p>                </ion-item>                <ion-item>                    <p><img src="../png/512/QQ1.png">{{"我的收藏"}}</p>                </ion-item>                <ion-item>                    <p><img src="../png/512/QQ1.png">{{"我的相册"}}</p>                </ion-item>                <ion-item>                    <p><img src="../png/512/QQ1.png">{{"我的文件"}}</p>                </ion-item>                <ion-item>                    <p><img src="../png/512/QQ1.png">{{"免流量特权"}}</p>                </ion-item>            </ion-list>                    </ion-content>    </ion-side-menu>    <!-- 右侧菜单 -->    <ion-side-menu side="right">    </ion-side-menu></ion-side-menus></body></html>

阅读全文

0 0