前端_侧滑-111

最新推荐文章于 2021-11-04 22:56:01 发布

哥哥儿

最新推荐文章于 2021-11-04 22:56:01 发布

阅读量351

点赞数

本文链接：https://blog.csdn.net/qq_39707849/article/details/78286139

版权

***********************

<!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="../lib/css/ionic.css" rel="stylesheet">
    <style>
        img {
            width: 100%;
            height: auto;
        }

        .slider-pager .slider-pager-page {
            color: #fff;
        }

        .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>
    <link href="https://cdn.bootcss.com/ionic/1.3.2/css/ionic.css" rel="stylesheet">
    <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("myCtrl", 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="doSomething()">左侧按钮</button>
                    </div>
                    <h1 class="title">Title!</h1>
                    <div class="buttons">
                        <button class="button">右侧按钮</button>
                    </div>
                </ion-header-bar>
                <ion-content ng-controller="myCtrl">
                    <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"></i></ion-item>
            <ion-item class="item-icon-right">我的1<i class="icon ion-chevron-right"></i></ion-item>
            <ion-item class="item-icon-right">我的2<i class="icon ion-chevron-right"></i></ion-item>
            <ion-item class="item-icon-right">我的3<i class="icon ion-chevron-right"></i></ion-item>


        </ion-list>


    </ion-side-menu>


    </ion-side-menu>

</ion-side-menus>
</body>
</html>

----------

data.json文件

[
{
"head":"img/pic_01.jpg",
"name":"金灿灿",
"time":"2016.08.11",
"title":"傳統的東西比機器有著更多的溫度和美感",
"text":"一直想做纯粹的东西，偏执、独立、不张扬，用更多被遗忘的材料和手艺去完成一个新式的表达，坚持手造，相信手上的...",
"pic":"img/com_pic_03.jpg",
"attention":1654,
"comment":268
},
{
"head":"img/pic_02.jpg",
"name":"蜗牛",
"time":"2016.08.15",
"title":"安安静静地生活",
"text":"我从来不觉得做什么东西要有意义，它只是我正常生活的一个部分，一个小店。”充好每一天的咖啡，认真生活于此，足以5...",
"pic":"img/com_pic_06.jpg",
"attention":856,
"comment":138
},
{
"head":"img/pic_03.jpg",
"name":"3X工作室",
"time":"2016.07.15",
"title":"做一个安静的铁匠",
"text":"凡是讲究个招牌，对自己做一辈子的行当不能马虎，那是面子，以匠人的态度为中国人做一份讲究的“中国礼”。让世界...",
"pic":"img/com_pic_08.jpg",
"attention":468,
"comment":68
},
{
"head":"img/pic_04.jpg",
"name":"金秀泫",
"time":"2016.08.18",
"title":"我的设计承载了对美好生活的愿望",
"text":"对于器皿上素雅安静的条纹，用最简单的竖条来装饰，伸展着古典优雅，希望自己的东西是简单的，耐看的，简单就是好...",
"pic":"img/community_02.jpg",
"attention":646,
"comment":354
},
{
"head":"img/pic_05.jpg",
"name":"阿莱",
"time":"2016.07.10",
"title":"融进每一个环境，不争不抢",
"text":"我觉得每个东西都应该有他的气质，本子也是。是锋芒毕露还是大智若愚，我喜欢后者，而自然造物的东西，它讲究一点...就是，顺其自然。",
"pic":"img/community_04.jpg",
"attention":786,
"comment":465
},
{
"head":"img/pic_06.jpg",
"name":"不语陌",
"time":"2016.07.05",
"title":"做一个安静的铁匠",
"text":"凡是讲究个招牌，对自己做一辈子的行当不能马虎，那是面子，以匠人的态度为中国人做一份讲究的“中国礼”。让世界...",
"pic":"img/com_pic_08.jpg",
"attention":4546,
"comment":768
}
]

素材

哥哥儿

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端_侧滑-111

***********************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>Ti
复制链接

扫一扫