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 相关文章推荐
jQuery实现单行文字间歇向上滚动源代码
Jun 02 Javascript
JS+CSS 制作的超级简单的下拉菜单附图
Nov 22 Javascript
JQuery.get提交页面不跳转的解决方法
Jan 13 Javascript
jQuery实现简单的日期输入格式化控件
Mar 12 Javascript
20分钟轻松创建自己的Bootstrap站点
May 12 Javascript
JavaScript触发onScroll事件的函数节流详解
Dec 14 Javascript
Bootstrap面板使用方法
Jan 16 Javascript
详解Angularjs在控制器(controller.js)中使用过滤器($filter)格式化日期/时间实例
Feb 17 Javascript
Node.js实现mysql连接池使用事务自动回收连接的方法示例
Feb 03 Javascript
Vue使用mixins实现压缩图片代码
Mar 14 Javascript
Javascript获取某个月的天数
May 30 Javascript
vue-cli脚手架的.babelrc文件用法说明
Sep 11 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
用PHP和ACCESS写聊天室(一)
2006/10/09 PHP
基于ubuntu下nginx+php+mysql安装配置的具体操作步骤
2013/04/28 PHP
php使用curl存储cookie的示例
2014/03/31 PHP
PHP FTP操作类代码( 上传、拷贝、移动、删除文件/创建目录)
2014/05/10 PHP
实例讲解PHP面向对象之多态
2014/08/20 PHP
php快速查找数据库中恶意代码的方法
2015/04/01 PHP
php原生导出excel文件的两种方法(推荐)
2016/11/19 PHP
深入理解JavaScript系列(2) 揭秘命名函数表达式
2012/01/15 Javascript
jQuery点击自身以外地方关闭弹出层的简单实例
2013/12/24 Javascript
js实现网页自动刷新可制作节日倒计时效果
2014/05/27 Javascript
js控制当再次点击按钮时的间隔时间
2014/06/03 Javascript
jQuery判断checkbox是否选中的3种方法
2014/08/12 Javascript
js+css实现select的美化效果
2016/03/24 Javascript
jQuery中使用animate自定义动画的方法
2016/05/29 Javascript
JS使用eval()动态创建变量的方法
2016/06/03 Javascript
Vuejs第十三篇之组件——杂项
2016/09/09 Javascript
微信小程序 动态绑定数据及动态事件处理
2017/03/14 Javascript
微信小程序页面滑动屏幕加载数据效果
2020/11/16 Javascript
微信小程序实现简单input正则表达式验证功能示例
2017/11/30 Javascript
Vue 父子组件的数据传递、修改和更新方法
2018/03/01 Javascript
微信小程序swiper实现滑动放大缩小效果
2018/11/15 Javascript
vue+mock.js实现前后端分离
2019/07/24 Javascript
vue.js 2.0实现简单分页效果
2019/07/29 Javascript
jqGrid表格底部汇总、合计行footerrow处理
2019/08/21 Javascript
[49:05]Newbee vs TNC 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
深入Python函数编程的一些特性
2015/04/13 Python
Python中集合的内建函数和内建方法学习教程
2015/08/19 Python
Python时间模块datetime、time、calendar的使用方法
2016/01/13 Python
python pycharm的安装及其使用
2019/10/11 Python
Python flask路由间传递变量实例详解
2020/06/03 Python
python+playwright微软自动化工具的使用
2021/02/02 Python
网页布局中CSS样式无效的十个重要原因详解
2017/08/10 HTML / CSS
SmartBuyGlasses德国:购买太阳镜和眼镜
2019/08/20 全球购物
交通法规咨询中心工作职责
2013/11/27 职场文书
学校班班通实施方案
2014/06/11 职场文书
小学国庆节活动总结
2015/03/23 职场文书