ionic实现底部分享功能
本文实例为大家分享了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>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
js实现文字选中分享功能
总结:文字选中IE和其他浏览器不一样 在IE中文字选中后鼠标抬起,图片显现触发有点快所以用定时器. <!DOCTYPE html> <html> <head> <meta charset=utf-8 /> <title></title> <script type="text/javascript" src="http://libs.baidu.com/jquery/1.11.1/jquery.min
-
原生javascript实现分享到朋友圈功能 支持ios和android
现在主流的分享工具也有很多,例如JiaThis.bShare分享,甚至一些大公司的如百度分享,但是他们依旧停留在只是在PC端的分享,对手机端的支持不是太好. 大家都知道现在很多手机端浏览器都内置了一些分享组件,像UC浏览器.QQ浏览器,内置的组件分享可以直接启动相应的APP分享,要是一个JS能调用浏览器的内置分享组件,那是多么酷啊. 高手在民间啊,下面我们的小编就带你来看看这位兄弟的编写的JS库. 一.工具介绍 nativeShare.js 一个可以通过javascript直接调用原生分享的工具
-
微信JS-SDK自定义分享功能实例详解【分享给朋友/分享到朋友圈】
本文实例讲述了微信JS-SDK自定义分享功能.分享给大家供大家参考,具体如下: 分享出去的内容,可以通过jssdk进行修改. 1.配置jssdk Wx_config.html <?php import("@.ORG.jssdk"); $jssdk = new JSSDK(C('oauth_config.appid'), C('oauth_config.appsecret')); $signPackage = $jssdk->GetSignPackage(); ?> &
-
JS版微信6.0分享接口用法分析
本文实例讲述了JS版微信6.0分享接口用法.分享给大家供大家参考,具体如下: 为了净化网络,整顿诱导分享及诱导关注行为,微信于2014年12月30日发布了<微信公众平台关于整顿诱导分享及诱导关注行为的公告>,微信平台开发者发现,原有的微信分享功能不能用了.正在苦于微信分享该怎么解决时,微信于2015年1月10日即时发布了开放JS-SDK,为微信网站的开发提供了强大的js功能. 注: 1.微信JS-SDK,提供的分享接口仅是监听分享事件触发时,修改分享的标题.链接等.不能自定义触发分享事件 2.
-
Javascript 实现微信分享（QQ、朋友圈、分享给朋友）
最近做微信开发,对微信公众号的开发,现在好的都是分享到朋友圈,QQ,分享给好友等分享功能,这里记录下,有需要的朋友也可以看下. // 微信分享 var wx = require('wechat-sdk'); rewardsResultService.getWechatInfo().then(function(data) { var conf = data; wx.config({ debug: false, appId: 'wx34e783920b37ee91', timestamp: conf
-
javascript获取wx.config内部字段解决微信分享
背景 在微信分享开发的时候我们通常的流程是 <?php require_once "jssdk.php"; $jssdk = new JSSDK("yourAppID", "yourAppSecret"); $signPackage = $jssdk->GetSignPackage(); ?> <!DOCTYPE html> <html lang="en"> <head>
-
js微信分享API
本文为大家分享了js微信分享实现代码,供大家参考,具体内容如下 微信分享Js API 功能: 1.分享到微信朋友圈 2.分享给微信好友 3.分享到腾讯微博 4.隐藏/显示右上角的菜单入口 5.隐藏/显示底部浏览器工具栏 6.获取当前的网络状态 7.调起微信客户端的图片播放组件 8.关闭公众平台Web页面 /**! * 微信内置浏览器的Javascript API,功能包括: * * 1.分享到微信朋友圈 * 2.分享给微信好友 * 3.分享到腾讯微博 * 4.隐藏/显示右上角的菜单入口 * 5.
-
ionic实现底部分享功能
本文实例为大家分享了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.
-
微信小程序实现action-sheet弹出底部菜单功能【附源码下载】
本文实例讲述了微信小程序实现action-sheet弹出底部菜单功能.分享给大家供大家参考,具体如下: 1.效果展示 2.关键代码 ① index.wxml <button type="default" bindtap="actionSheetTap">弹出action sheet</button> <action-sheet hidden="{{actionSheetHidden}}" bindchange=&qu
-
Android实现短信、微信、微博分享功能
在纠结了几天的图表功能之后,我开始开发一个新的功能.即分享内容到短信.微信.微博等渠道,对应的我有一个简单的 Task: 在 Toolbar 写分享的按钮 绘制一个 Android 的分享页面 编写短信分享示例 编写社交分享 在这一天,我只完成了前面的三部分. Toolbar 上的分享按钮 在 Toolbar 主要还是靠 ImageView 来绘制右上角的分享按钮: <?xml version="1.0" encoding="utf-8"?> <a
-
Android 使用FragmentTabHost实现底部菜单功能
前言 现在大部分App底部都有一个菜单,实现这个功能也有好多办法: - TabHost+Fragment - RadioGroup+Fragment - FragmentTabHost+Fragment - 5.0以后有个新控件,BottomNavigator 这篇主要介绍下FragmentTabHost配合Fragment使用 运行效果图 效果图分析 FragmentTabHost简单介绍 首先我们看下官方文档的介绍 OK,接着官方还给出了一份使用的代码,我们也来看下 Activity中使用
-
微信小程序自定义弹出模态框禁止底部滚动功能
图示: wxml代码: <view class='fix_bottom'> <view>分享</view> <view>电话咨询</view> <view class='active' bindtap="showDialogBtn">立即报名</view> </view> <!--模态框--> <!-- 遮罩层 --> <view class="mod
-
vue如何调用浏览器分享功能详解
前言 「Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架.官方描述的它还是一个渐进式框架,本文主要介绍了关于vue调用浏览器分享的相关资料,下面话不多说了,来一起看看详细的介绍吧 步骤如下: 1.开发环境 vue+vant 2.电脑系统 windows10专业版 3.在使用vue开发的过程中,我们经常会遇到分享,下面我来分享一下我的方法,希望对你有所帮助. 4.先看效果图: 5.使用NativeShare.js 来达到上述功能的实现 // 安装 npm ins
-
微信JS-SDK分享功能的.Net实现代码
JS-SDK接口是什么? 为了方便开发者实现微信内的网页(基于微信浏览器访问的网页)功能,比如拍照.选图.语音.位置等手机系统的能力,并方便开发者直接使用微信分享.扫一扫等微信特有的能力,微信推出了JS-SDK的整体开发包,供开发者方便使用. 分享功能 官方文档里提供了php.java.node.js以及python的示例代码,唯独没有c#版的,为了弥补广大.net用户的需求,我把php版本的示例代码逻辑照搬成了.net版,并在网页前端中加入了分享功能,希望对大家有用. 程序实现 流程图 程序里
-
微信js-sdk分享功能接口常用逻辑封装示例
本文实例讲述了微信js-sdk分享功能接口常用逻辑封装.分享给大家供大家参考,具体如下: 微信js-sdk 1.0,分享说明: 1.目前支持的分享接口5个,其中分享腾讯微博基本可以忽略 2.接口只是定义分享时的数据,没有提供触发分享功能 一.在ready事件使用使用示例 //分享对象使用 var shareData={ title:'分享标题', desc:'分享描述', link:'http://www.gongjuji.net', imgUrl:'http://www.gongjuji.ne
-
Java编程调用微信分享功能示例
本文实例讲述了Java编程调用微信分享功能.分享给大家供大家参考,具体如下: 这篇文章介绍如何使用java开发微信分享功能,因为工作,已经开发完成,可使用. 如果想要自定义微信的分享功能,首先在自己的页面内首先使用AJAX.下面我具体举例. 首先是在页面内写入请求后台的AJAX /** * 调用微信分享接口 * */ public void WXConfig(){ String url = getPara("href"); WXConfigController scan = new W
-
使用JS轻松实现ionic调用键盘搜索功能(超实用)
这个需求是产品提的,一开始只是设置了 <input style="padding-top: 3px;" type="search" placeholder="搜索医生或医院" ng-model="query"> type="search" 发现android上可以ios调取不出search健来,气死我了,经过google的搜索得到结论,需要在外面套用一个form表单,于是加上果然好使而且结合了f