ionic+侧滑+轮播+刷新

本文介绍了一个使用Angular和Ionic实现的侧滑菜单应用程序,包括自动播放轮播图、无限滚动加载等功能。通过示例代码展示了如何组织HTML结构、绑定控制器及调用HTTP请求获取数据。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

<!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>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值