ionic实现底部分享功能


Posted in Javascript onMay 11, 2017

本文实例为大家分享了ionic底部分享功能的具体代码,供大家参考,具体内容如下

<!DOCTYPE html>
<html ng-app="myApp">
<head>
  <meta charset="UTF-8">
  <meta name="viewport"
     content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <link rel="stylesheet" href="js/lib/ionic1/css/ionic.min.css" rel="external nofollow" >
  <script src="js/lib/ionic1/js/ionic.bundle.min.js"></script>
  <title>Title</title>
</head>
<body ng-controller="myCtrl">
<!--页面头部-->
<ion-header-bar class="bar-royal">
  <h1 class="title">我是标题</h1>
</ion-header-bar>
<!--内容-->
<ion-content>
  <!-- 1.添加下拉刷新的组件 -->
  <ion-refresher
      pulling-text="正在刷新页面数据..."
      on-refresh="doRefresh()">
  </ion-refresher>

  <!--ng-repent 渲染内容-->
  <ul class="list">
    <li ng-repeat="g in goodses track by $index">
      <span ng-bind="g"></span>
    </li>
  </ul>
  <!-- 1.添加上拉刷新的组件 -->
  <ion-infinite-scroll
      on-infinite="loadMore()"
      distance="3%">
  </ion-infinite-scroll>


</ion-content>
<!--页面底部-->
<ion-footer-bar class="bar-royal">
  <h1 class="title">我是底部</h1>
  <button class="button button-clear" ng-click="share()"><i class="icon ion-share"></i></button>
</ion-footer-bar>


<script>
  var app=angular.module("myApp",["ionic"]);
  app.controller("myCtrl",["$scope","$ionicActionSheet",function ($scope,$ionicActionSheet) {
    $scope.goodses=[];
    for(var i=0;i<50;i++){
      $scope.goodses.push(i+"我是首页展示")
    }
    //下拉刷新
    $scope.doRefresh=function () {
      $scope.goodses=[]; //下拉载入数据
      for(var i=0;i<50;i++){
        $scope.goodses.push(i+"我是下拉载入****")
      }

      $scope.$broadcast("scroll.refreshComplete");
    }
    //上拉刷新
    $scope.loadMore=function () {
      //上拉载入数据
      for(var i=0;i<50;i++){
        $scope.goodses.push(i+"我是上拉载入++++")
      }
      $scope.$broadcast("scroll.infiniteScrollComplete");
    }
    //分享

// Action Sheet :(操作表)
//表示一个从下向上滑动出现的对话框
// 使用的时候,需要注入一个$ionicActionSheet服务
// 服务有一个函数show()用于根据指定的选项展示这个对话框
// 函数内必须用return true;进行返回,不然对话框不能关闭

    $scope.share=function () {
      $ionicActionSheet.show({
        buttons: [
          { text: '<b>分享</b> 微信' },
          { text: '<b>分享</b>QQ ' },
        ],
        destructiveText: '删除',
        titleText: '分享',
        cancelText: '关闭',
        buttonClicked: function(index) {
          return true;//必须
        },
        destructiveButtonClicked:function () {
          console.log("删除按钮被点击了****");
          return true;//必须
        }
      });
    }
  }])

</script>
</html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript hashtable实现代码
Oct 13 Javascript
浏览器加载、渲染和解析过程黑箱简析
Nov 29 Javascript
js中点击空白区域时文本框与隐藏层的显示与影藏问题
Aug 26 Javascript
jQuery 鼠标经过(hover)事件的延时处理示例
Apr 14 Javascript
js数组与字符串的相互转换方法
Jul 09 Javascript
jQuery源码分析之jQuery.fn.each与jQuery.each用法
Jan 23 Javascript
浅谈JSON.parse()和JSON.stringify()
Jul 14 Javascript
JavaScript的事件机制详解
Jan 17 Javascript
原生js实现放大镜特效
Mar 08 Javascript
vue2.0结合Element实现select动态控制input禁用实例
May 12 Javascript
全选复选框JavaScript编写小结(附代码)
Aug 16 Javascript
vue-cli初始化项目中使用less的方法
Aug 09 Javascript
学习使用Bootstrap栅格系统
May 11 #Javascript
jQuery实现的简单在线计算器功能
May 11 #jQuery
学习使用Bootstrap页面排版样式
May 11 #Javascript
Angularjs 与 bower安装和使用详解
May 11 #Javascript
学习使用Bootstrap输入框、导航、分页等常用组件
May 11 #Javascript
es6学习笔记之Async函数基本教程
May 11 #Javascript
Bootstrap模态框插件使用详解
May 11 #Javascript
You might like
如何将数据从文本导入到mysql
2006/10/09 PHP
PHP register_shutdown_function函数的深入解析
2013/06/03 PHP
php float不四舍五入截取浮点型字符串方法总结
2013/10/28 PHP
yii2中结合gridview如何使用modal弹窗实例代码详解
2016/06/12 PHP
PHP笛卡尔积实现算法示例
2018/07/30 PHP
WordPress伪静态规则设置代码实例
2020/12/10 PHP
javascript背投广告代码的完善
2008/04/08 Javascript
JQuery DataTable删除行后的页面更新利用Ajax解决
2013/05/17 Javascript
文本框中禁止非数字字符输入比如手机号码、邮编
2013/08/19 Javascript
jQuery实现返回顶部功能适合不支持js的浏览器
2014/08/19 Javascript
javascript实现画不相交的圆
2015/04/07 Javascript
jQuery实现磁力图片跟随效果完整示例
2016/09/16 Javascript
vuejs指令详解
2017/02/07 Javascript
AngularJS使用拦截器实现的loading功能完整实例
2017/05/17 Javascript
Vue路由切换时的左滑和右滑效果示例
2018/05/29 Javascript
解决vue项目nginx部署到非根目录下刷新空白的问题
2018/09/27 Javascript
[33:39]DOTA2上海特级锦标赛C组小组赛#2 LGD VS Newbee第二局
2016/02/27 DOTA
[50:58]2018DOTA2亚洲邀请赛 4.1 小组赛 B组 Mineski vs EG
2018/04/03 DOTA
python实现马耳可夫链算法实例分析
2015/05/20 Python
浅谈python中的__init__、__new__和__call__方法
2017/07/18 Python
python虚拟环境virtualenv的使用教程
2017/10/20 Python
Python paramiko模块的使用示例
2018/04/11 Python
Django app配置多个数据库代码实例
2019/12/17 Python
Python+OpenCV实现旋转文本校正方式
2020/01/09 Python
tensorflow使用freeze_graph.py将ckpt转为pb文件的方法
2020/04/22 Python
在python3.64中安装pyinstaller库的方法步骤
2020/06/02 Python
python实现模拟器爬取抖音评论数据的示例代码
2021/01/06 Python
香港现代设计家具品牌:Ziinlife Furniture
2018/11/13 全球购物
英国著名的美容护肤和护发产品购物网站:Lookfantastic
2020/11/23 全球购物
草莓网中国:StrawberryNet中国
2020/08/17 全球购物
党员个人查摆剖析材料
2014/10/16 职场文书
2016年中秋节晚会领导致辞
2015/11/26 职场文书
英语教学课后反思
2016/02/15 职场文书
2019学校请假条格式及范文
2019/06/25 职场文书
集英社今正式宣布 成立游戏公司“集英社Games”
2022/03/31 其他游戏
解决spring.thymeleaf.cache=false不起作用的问题
2022/06/10 Java/Android