ionic+侧滑+轮播+刷新

最新推荐文章于 2019-10-28 14:42:28 发布
最新推荐文章于 2019-10-28 14:42:28 发布
阅读量489 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/logitech12/article/details/78277288
版权 
<!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>
Logitech12
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
ionic 侧滑+无限轮播+信息展示+头部底部
飞鸟96
09-19 423
主页 html> html lang="en"> head> meta charset="UTF-8"> title>Titletitle> meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width"> link re
Flask第五天-Mui+HTML5PLUS介绍、APP开发环境、MUI+HMTL5PLUS登录页面、Mui.post实现post请求、Mui.fire
道可道 非常道
03-01 887
一、MUI框架（前端UI框架） （一）MUI框架简介及优劣势分析： 1.MUI基本介绍及优劣势分析 MUI是一套前端框架，由DCLOUD公司研发而成，提供大量H5和js语言组成的组件，大大提高了开发效率，可以用于开发web端应用、web APP、混合开发等应用。利用MUI框架，用户在使用APP时可以得到接近原生APP的操作体验。 2.优劣势分析 优势： 目前的APP开发中，大部分还停留在web...
ionic的侧滑,无限轮播,上拉刷新下拉加载
love_mysunshine的博客
10-18 416
<!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=de
前端+移动开发
Hanks软件库
05-15 1735
第一阶段前端基本功 HTML+CSS JavaScript基础 JS基本特效 JavaScript高级特性 jQuery基本使用 HTML进阶 JavaScript基础教程 常见特效，例如：tab，导航，整页滚动 正则表达式 选择器 CSS进阶 JavaScript内置对象常用方法 轮播图，用JS制作幻灯片 排序算法，递归算法 DOM操作
功能模块Ionic
chaixiaokai的博客
10-18 285
//引进包 html> html> head lang="en"> meta charset="UTF-8"> meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width"> link href="ionic-v1.3.3/css/
最适合2018年自学的web前端零基础系统学习视频＋资料
weixin_30487317的博客
06-07 63
这份资料整理花了近7天，如果感觉有用，可以分享给更有需要的人。 在看接下的介绍前，我先说一下整理这份资料的初衷： 我的初衷是想帮助在这个行业发展的朋友和童鞋们，在论坛博客等地方少花些时间找资料，把有限的时间，真正花在学习上，所以小编我把这么多这么全的资料，给全部整理了一遍。相信不管是初学的朋友，还是已经工作的朋友，这份资料一定都有你需要的内容。 小编已经讲所有资源上传至群文件，大家可以加一下...
转发：11个web前端开发实战项目案例+源码！拿走就是了
qq_37392944的博客
10-28 1万+
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。 本文链接：https://blog.csdn.net/weixin_43793782/article/details/97308393 小白为大家收集了11个web前端开发，大企业实战项目案例+5W行源码！拿走玩去吧！ 老规矩：转发+关注并私信小编：“资料”全部打包带走！ 下面给大家简单介...
android安卓源码海量项目合集打包-1
热门推荐
chenhao0568的专栏
06-11 13万+
下载地址 最后更新共计113个分类5177套源码29.2 GB。 卷 新加卷 的文件夹 PATH 列表 卷序列号为 00000200 5E7A:7F30 F:. ├─前台界面 │ ├─3D标签云卡片热门 │ │ Android TagCloudView云标签的灵活运用.rar │ │ Android 实现 标签 拖动 改变位置.rar │ │ android 流式布局和热门标签.zip │ │ ...
Web前端学习路线
ronikimi的博客
11-22 156
第一阶段： HTML+CSS+JavaScript 1、HTML+CSS HTML进阶、CSS进阶、div+css布局、HTML+css整站开发 2、JavaScript基础 Js基础教程、js内置对象常用方法、常见DOM树操作大全、ECMAscript、DOM、BOM、定时器和焦点图。 3、JS基本特效 常见特效、例如：tab、导航、整页滚动、轮播图、JS制作幻灯片、弹出层、手风琴菜单、...
Ionic + Angular.js实现图片轮播的方法示例
10-19
图片轮播在我们日常开发中是再熟悉不过的了，下面这篇文章主要给大家介绍了Ionic + Angular实现图片轮播的方法，文中给出了详细的示例代码供大家参考学习，需要的朋友们下面来一起看看吧。
ionic+angular+capacitor基础工程
03-14
ionic+angular+capacitor基础工程创建
ionic混合开发app,前端ionic+crodova+angularjs，后端springboot
12-10
前后端都做了小的demo，资源里有我自己做的类似朋友圈似的图片上传，springboot+mybatis作为后端（可以写原生sql，或注解方式写sql），前端ionic3+cordova+angularjs4+typescript
ionic+phonegap 案例源码
07-29
一个ionic+phonegap框架的webapp实例源码
STM32H562实现FreeRTOS内存管理【支持STM32H系列单片机】.zip
最新发布
06-03
STM32H562 FreeRTOS驱动程序，支持STM32H系列单片机。 项目代码可直接运行~
恶魔轮盘.cpp
06-03
恶魔轮盘
基于C++&OPENCV 的全景图像拼接.zip
06-03
基于C++&OPENCV 的全景图像拼接 C++是一种广泛使用的编程语言，它是由Bjarne Stroustrup于1979年在新泽西州美利山贝尔实验室开始设计开发的。C++是C语言的扩展，旨在提供更强大的编程能力，包括面向对象编程和泛型编程的支持。C++支持数据封装、继承和多态等面向对象编程的特性和泛型编程的模板，以及丰富的标准库，提供了大量的数据结构和算法，极大地提高了开发效率。12 C++是一种静态类型的、编译式的、通用的、大小写敏感的编程语言，它综合了高级语言和低级语言的特点。C++的语法与C语言非常相似，但增加了许多面向对象编程的特性，如类、对象、封装、继承和多态等。这使得C++既保持了C语言的低级特性，如直接访问硬件的能力，又提供了高级语言的特性，如数据封装和代码重用。13 C++的应用领域非常广泛，包括但不限于教育、系统开发、游戏开发、嵌入式系统、工业和商业应用、科研和高性能计算等领域。在教育领域，C++因其结构化和面向对象的特性，常被选为计算机科学和工程专业的入门编程语言。在系统开发领域，C++因其高效性和灵活性，经常被作为开发语言。游戏开发领域中，C++由于其高效性和广泛应用，在开发高性能游戏和游戏引擎中扮演着重要角色。在嵌入式系统领域，C++的高效和灵活性使其成为理想选择。此外，C++还广泛应用于桌面应用、Web浏览器、操作系统、编译器、媒体应用程序、数据库引擎、医疗工程和机器人等领域。16 学习C++的关键是理解其核心概念和编程风格，而不是过于深入技术细节。C++支持多种编程风格，每种风格都能有效地保证运行时间效率和空间效率。因此，无论是初学者还是经验丰富的程序员，都可以通过C++来设计和实现新系统或维护旧系统。3
SDIO接口远距离无线图传WIFI6模块TT-S6D2TR-105HP
06-03
SDIO接口HI1105远距离无线图传WIFI6模块TT-S6D2TR-105HP
windows微信双开t脚本文件
06-03
bat文件，用于微信双开，如果微信是按照默认地址安装的话，即安装路径为 C:\Program Files (x86)\Tencent\WeChat\WeChat.exe 无需修改，直接放到桌面右键点击以管理员身份运行即可。 如微信非默认安装路径，先右键，点击编辑，然后将其中的 C:\Program Files (x86)\Tencent\WeChat\WeChat.exe 替换为电脑中微信安装路径，再右键点击以管理员身份运行即可。
angular+ionic+swiper
08-05
Swiper是一个流行的移动端滑动组件库，它提供了丰富的滑动效果和交互功能，可以用于创建漂亮的轮播图、图片浏览器等。 结合Angular和Ionic，你可以轻松地集成Swiper组件到你的移动应用中。首先，你需要在你的...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值