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 相关文章推荐
在一个form用一个SUBMIT(或button)分别提交到两个处理表单页面的代码
Feb 15 Javascript
用js统计用户下载网页所需时间的脚本
Oct 15 Javascript
判断用户是否在线的代码
Mar 05 Javascript
40款非常棒的jQuery 插件和制作教程(系列一)
Oct 26 Javascript
jqTransform form表单美化插件使用方法
Jul 05 Javascript
用javascript替换URL中的参数值示例代码
Jan 27 Javascript
jquery实现点击弹出层效果的简单实例
Mar 03 Javascript
JavaScript弹出窗口方法汇总
Aug 12 Javascript
jQuery.prop() 使用详解
Jul 19 Javascript
JavaScript实现算术平方根算法-代码超简单
Sep 11 Javascript
jQuery ajax中使用confirm,确认是否删除的简单实例
Jun 17 Javascript
VUE:vuex 用户登录信息的数据写入与获取方式
Nov 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 empty() 检查一个变量是否为空
2011/11/10 PHP
ThinkPHP基于PHPExcel导入Excel文件的方法
2014/10/15 PHP
thinkphp浏览历史功能实现方法
2014/10/29 PHP
laravel框架使用极光推送消息操作示例
2020/02/15 PHP
nginx 设置多个站跨域
2021/03/09 Servers
Mootools 1.2 手风琴(Accordion)教程
2009/09/15 Javascript
javascript高级程序设计第二版第十二章事件要点总结(常用的跨浏览器检测方法)
2012/08/22 Javascript
Node.js中使用事件发射器模式实现事件绑定详解
2014/08/15 Javascript
浅谈JavaScript的Polymer框架中的behaviors对象
2015/07/29 Javascript
js 基础篇必看(点击事件轮播图的简单实现)
2016/08/20 Javascript
AngularJs入门教程之环境搭建+创建应用示例
2016/11/01 Javascript
Node.js中如何合并两个复杂对象详解
2016/12/31 Javascript
vue-router 权限控制的示例代码
2017/09/21 Javascript
Bootstrap Table 删除和批量删除
2017/09/22 Javascript
深入理解ES6 Promise 扩展always方法
2017/09/26 Javascript
Element-UI Table组件上添加列拖拽效果实现方法
2018/04/14 Javascript
vue2.0使用v-for循环制作多级嵌套菜单栏
2018/06/25 Javascript
解决vue-cli项目webpack打包后iconfont文件路径的问题
2018/09/01 Javascript
vue 2.1.3 实时显示当前时间,每秒更新的方法
2018/09/16 Javascript
对node通过fs模块判断文件是否是文件夹的实例讲解
2019/06/10 Javascript
javascript中的this作用域详解
2019/07/15 Javascript
Vue.js组件通信之自定义事件详解
2019/10/19 Javascript
vue实现带过渡效果的下拉菜单功能
2020/02/19 Javascript
浅谈vue中document.getElementById()拿到的是原值的问题
2020/07/26 Javascript
JavaScript实现雪花飘落效果
2020/12/27 Javascript
Python抓取淘宝下拉框关键词的方法
2015/07/08 Python
利用Python爬虫给孩子起个好名字
2017/02/14 Python
python深copy和浅copy区别对比解析
2019/12/26 Python
2020年10款优秀的Python第三方库,看看有你中意的吗?
2021/01/12 Python
UNIONBAY官网:美国青少年服装品牌
2019/03/26 全球购物
JSP和Servlet有哪些相同点和不同点,他们之间的联系是什么?
2015/10/22 面试题
信息技术专业大学生个人的自我评价
2013/10/05 职场文书
幼儿园秋游活动方案
2014/01/21 职场文书
幼儿园卫生保健制度
2015/08/05 职场文书
Netty结合Protobuf进行编解码的方法
2021/06/26 Java/Android
ObjectMapper 如何忽略字段大小写
2021/06/29 Java/Android