MUI整合上拉下拉的写法
在APP制作过程中,下拉刷新和上拉加载时一直配合使用的一对功能,在之前我们给大家分享过用JS相关的上拉加载和下来刷新,有兴趣的朋友可以参考:MUI进行APP混合开发实现下拉刷新和上拉加载
我们先看开下如何在MUI中使用整合的上拉下拉
第一步,第二步和下拉刷新一样
mui.init({ subpages:[{ url:pullrefresh-subpage-url,//下拉刷新内容页面地址 id:pullrefresh-subpage-id,//内容页面标志 styles:{ top:subpage-top-position,//内容页面顶部位置,需根据实际页面布局计算,若使用标准mui导航,顶部默认为48px; .....//其它参数定义 } }] });
第三步:在mui.init()内同时设置上拉加载和下拉刷新
mui.init({ pullRefresh: { container: '#pullrefresh', down: { contentdown : "下拉可以刷新",//可选,在下拉可刷新状态时,下拉刷新控件上显示的标题内容 contentover : "释放立即刷新",//可选,在释放可刷新状态时,下拉刷新控件上显示的标题内容 contentrefresh : "正在刷新...",//可选,正在刷新状态时,下拉刷新控件上显示的标题内容 callback: downFn // 下拉执行函数 }, up: { contentrefresh: '正在加载...', callback: upFn // 上拉执行函数 } } });
注意: 给获取元素加onclick点击事件不行,需要加addEventListener自定义事件
如果大家对这个整合有所不理解,可以先学习一下把上拉加载和下拉刷新分开的情况,情阅读:
Javascript下拉刷新的简单实现
纯javascript实现简单下拉刷新功能
相关推荐
-
Android中RecyclerView上拉下拉,分割线,多条目的实例代码
//activity的xml <?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:id="@+id/activity
-
android教你打造独一无二的上拉下拉刷新加载框架
其实早在去年七月,群里小伙伴就有让我共享这个.但我当时绝的技术不纯熟.代码有bug什么的.没有写出来.现在感觉整理的差不多了.就写出来让大家看看,有问题一起讨论解决. 说到刷新加载,我们第一个想到啥,对了就是swiperefreshlayout,还有什么SuperSwiperefreshlayout,XRecyclerView等等.反正老多了,我还是之前那句话,不管用什么,我们需要知道他的原理. 打造框架开始 对于刷新加载的实现,你们第一个想到的是什么?是用swiperefresh然后在recy
-
Android界面上拉下拉的回弹效果实例代码
废话不多说,具体代码如下所示: public class MyScrollView extends ScrollView { private View childView; public MyScrollView(Context context) { super(context); } public MyScrollView(Context context, AttributeSet attrs) { super(context, attrs); } public MyScrollView(Co
-
iscroll.js的上拉下拉刷新时无法回弹的解决方法
使用过iscroll.js的上拉下拉刷新效果的朋友应该都碰到过这个问题:在iOS的浏览器中,上拉或下拉刷新时,当手指划出屏幕后,页面无法弹回.很多人因为解决不了这个问题,干脆就那样不解决了,还有的直接就不用HTML了,使用原生代替HTML页面. 相信很多朋友也有自己的解决办法,只是没写出来,所以网上都搜不到解决方案.在很多QQ群里面也有很多人在问该怎么解决这个问题,所以我写这篇文章记录一下我的解决方案,希望对一些朋友有所帮助. 上拉下拉刷新的主要代码: myScroll = new iScrol
-
Listloading.js移动端上拉下拉刷新组件
listloading是一个移动端的上拉.下拉加载更多的组件.主要依赖于iscroll.js v5.1.2基础上开发的组件,基础库可以使用jquery.js或者zepto.js操作dom节点,目前我是使用了zepto.js作为基础库操作dom,以jquery插件的形式存在.如果不想以插件方式使用,则只需要把listloading直接移植你需要的库里面就ok啦.listloading主要针对移动端而生,在使用浏览器自带滚动,用户体验很不友好,与Android和ios差别甚远,所以选择iscroll
-
MUI整合上拉下拉的写法
在APP制作过程中,下拉刷新和上拉加载时一直配合使用的一对功能,在之前我们给大家分享过用JS相关的上拉加载和下来刷新,有兴趣的朋友可以参考:MUI进行APP混合开发实现下拉刷新和上拉加载 我们先看开下如何在MUI中使用整合的上拉下拉 第一步,第二步和下拉刷新一样 mui.init({ subpages:[{ url:pullrefresh-subpage-url,//下拉刷新内容页面地址 id:pullrefresh-subpage-id,//内容页面标志 styles:{ top:subpag
-
微信小程序 刷新上拉下拉不会断详细介绍
微信小程序 上拉下拉不会断详细介绍 最开始看到效果图,不错,第一想到的是用做的,添加浮动层,然后设置浮动层高度.其实不然,大牛是"enablePullDownRefresh": "true"后,在页面添加遮掩层,并跟随底部滑动即可.(感觉自己IQ该充值了) 上代码 news.wxml <view class="top">下拉刷新</view> <view> <!--页面正文--> </view
-
Android仿IOS上拉下拉弹性效果的实例代码
用过iphone的朋友相信都体验过页面上拉下拉有一个弹性的效果,使用起来用户体验很好:Android并没有给我们封装这样一个效果,我们来看下在Android里如何实现这个效果.先看效果,感觉有些时候还是蛮实用的. 思路:其实原理很简单,实现一个自定义的Scrollview方法(来自网上大神),然后在布局文件中使用自定义方法Scrollview就可以了. 代码: 自定义View,继承自Scrollview.MyReboundScrollView类 package com.wj.myrebounds
-
MVPXlistView展示上拉下拉效果
本文实例为大家分享了MVPXlistView上拉下拉展示的具体代码,供大家参考,具体内容如下 抽基类 package com.gs.gg.day8.back; import android.os.Bundle; import android.support.annotation.Nullable; import android.support.v7.app.AppCompatActivity; public abstract class BackActivity extends AppCompa
-
MUI实现上拉加载和下拉刷新效果
本文实例为大家分享了MUI实现上拉加载和下拉刷新展示的具体代码,供大家参考,具体内容如下 编写存储过程分页(此处使用T-SQL) CREATE PROC [dbo].[Common_PageList] ( @tab nvarchar(max),---表名 @strFld nvarchar(max), --字段字符串 @strWhere varchar(max), --where条件 @PageIndex int, --页码 @PageSize int, --每页容纳的记录数 @Sort VARC
随机推荐
- 全面解析JavaScript的Backbone.js框架中的Router路由
- SqlServer 2005/2008数据库被标记为“可疑”的解决办法
- js实现适用于素材网站的黑色多级菜单导航条效果
- Python中用Spark模块的使用教程
- 基于java中反射的总结分析
- 如何在smarty中增加类似foreach的功能自动加载数据
- PHP编码转换函数 自动转换字符集支持数组转换
- python 调用c语言函数的方法
- Python 字典与字符串的互转实例
- python中的字典使用分享
- Android UI实现多行文本折叠展开效果
- 深入理解Java的Spring框架中的IOC容器
- shiro之INI配置详解
- 基于jquery实现后台左侧菜单点击上下滑动显示
- React学习笔记之列表渲染示例详解
- JS 数字转换为大写金额的简单实例
- 利用百度地图Android sdk高仿微信发送位置功能及遇到的问题
- pandas object格式转float64格式的方法
- Android工具类ImgUtil选择相机和系统相册
- jQuery中DOM操作原则实例分析