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实现简单下拉刷新功能

赞 (0)

相关推荐

  • 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

  • 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教你打造独一无二的上拉下拉刷新加载框架

    android教你打造独一无二的上拉下拉刷新加载框架

    其实早在去年七月,群里小伙伴就有让我共享这个.但我当时绝的技术不纯熟.代码有bug什么的.没有写出来.现在感觉整理的差不多了.就写出来让大家看看,有问题一起讨论解决. 说到刷新加载,我们第一个想到啥,对了就是swiperefreshlayout,还有什么SuperSwiperefreshlayout,XRecyclerView等等.反正老多了,我还是之前那句话,不管用什么,我们需要知道他的原理. 打造框架开始 对于刷新加载的实现,你们第一个想到的是什么?是用swiperefresh然后在recy

  • Listloading.js移动端上拉下拉刷新组件

    Listloading.js移动端上拉下拉刷新组件

    listloading是一个移动端的上拉.下拉加载更多的组件.主要依赖于iscroll.js v5.1.2基础上开发的组件,基础库可以使用jquery.js或者zepto.js操作dom节点,目前我是使用了zepto.js作为基础库操作dom,以jquery插件的形式存在.如果不想以插件方式使用,则只需要把listloading直接移植你需要的库里面就ok啦.listloading主要针对移动端而生,在使用浏览器自带滚动,用户体验很不友好,与Android和ios差别甚远,所以选择iscroll

  • iscroll.js的上拉下拉刷新时无法回弹的解决方法

    使用过iscroll.js的上拉下拉刷新效果的朋友应该都碰到过这个问题:在iOS的浏览器中,上拉或下拉刷新时,当手指划出屏幕后,页面无法弹回.很多人因为解决不了这个问题,干脆就那样不解决了,还有的直接就不用HTML了,使用原生代替HTML页面. 相信很多朋友也有自己的解决办法,只是没写出来,所以网上都搜不到解决方案.在很多QQ群里面也有很多人在问该怎么解决这个问题,所以我写这篇文章记录一下我的解决方案,希望对一些朋友有所帮助. 上拉下拉刷新的主要代码: myScroll = new iScrol

  • 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

随机推荐