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 相关文章推荐
dojo 之基础篇(三)之向服务器发送数据
Mar 24 Javascript
原生javascript实现图片轮播效果代码
Sep 03 Javascript
JavaScript File API实现文件上传预览
Feb 02 Javascript
深入浅出 jQuery中的事件机制
Aug 23 Javascript
使用bootstrap validator的remote验证代码经验分享(推荐)
Sep 21 Javascript
angular源码学习第一篇 setupModuleLoader方法
Oct 20 Javascript
JS判断输入的字符串是否是数字的方法(正则表达式)
Nov 29 Javascript
深入理解ES6的迭代器与生成器
Aug 19 Javascript
深入理解 webpack 文件打包机制(小结)
Jan 08 Javascript
微信小程序学习笔记之登录API与获取用户信息操作图文详解
Mar 29 Javascript
layui表格内放置图片,并点击放大的实例
Sep 10 Javascript
JS实现秒杀倒计时特效
Jan 02 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重新实现PHP脚本引擎内置函数
2007/03/06 PHP
基于PHP实现通过照片获取ip地址
2016/04/26 PHP
php基于PDO实现功能强大的MYSQL封装类实例
2017/02/27 PHP
php简单计算权重的方法示例【适合抽奖类应用】
2019/06/10 PHP
PHP实现批量修改文件名的方法示例
2019/09/18 PHP
数理公式,也可以这么唯美
2021/03/10 无线电
JS控件ASP.NET的treeview控件全选或者取消(示例代码)
2013/12/16 Javascript
express的中间件cookieParser详解
2014/12/04 Javascript
javascript 事件处理示例分享
2014/12/31 Javascript
分享一则JavaScript滚动条插件源码
2015/03/03 Javascript
JavaScript实现控制打开文件另存为对话框的方法
2015/04/17 Javascript
七夕情人节丘比特射箭小游戏
2015/08/20 Javascript
Vue实现自带的过滤器实例
2017/03/09 Javascript
详解nodejs微信公众号开发——1.接入微信公众号
2017/04/10 NodeJs
Vue的土著指令和自定义指令实例详解
2018/02/04 Javascript
全局安装 Vue cli3 和 继续使用 Vue-cli2.x操作
2020/09/08 Javascript
vue 实现element-ui中的加载中状态
2020/11/11 Javascript
使用Python+Splinter自动刷新抢12306火车票
2018/01/03 Python
linux查找当前python解释器的位置方法
2019/02/20 Python
Python学习笔记之图片人脸检测识别实例教程
2019/03/06 Python
python sqlite的Row对象操作示例
2019/09/11 Python
django实现web接口 python3模拟Post请求方式
2019/11/19 Python
基于python+selenium的二次封装的实现
2020/01/06 Python
python中文分词库jieba使用方法详解
2020/02/11 Python
css3实现平移效果(transfrom:translate)的示例
2020/11/13 HTML / CSS
详解HTML5 Canvas绘制不规则图形时的非零环绕原则
2016/03/21 HTML / CSS
世界顶级足球门票网站:Live Football Tickets
2017/10/14 全球购物
Feelunique澳大利亚:欧洲的化妆品零售电商
2019/12/18 全球购物
AJax面试题
2014/11/25 面试题
经典演讲稿开场白
2014/08/25 职场文书
白鹤梁导游词
2015/02/06 职场文书
歌舞青春观后感
2015/06/10 职场文书
商业计划书之服装
2019/09/09 职场文书
node.js使用express-fileupload中间件实现文件上传
2021/07/16 Javascript
Python音乐爬虫完美绕过反爬
2021/08/30 Python
Windows Server 2022 超融合部署(图文教程)
2022/06/25 Servers