当前位置:网站首页>Single page pull-down refresh and double page pull-down refresh of MUI
Single page pull-down refresh and double page pull-down refresh of MUI
2022-06-11 23:27:00 【RxnNing】
Single page (style Cannot write unit Otherwise, only one pull-down refresh )
# Bind the container to which you want to bind the drop-down
<div class="mui-content mui-scroll-wrapper" id="refreshContainer">
<div class="mui-scroll">
Content
</div>
</div>
# To configure mui.init()
mui.init({
pullRefresh: {
container: "#refreshContainer", // Drop down refresh container ID ,querySelector Able to locate css All selectors , such as :id、.class etc.
down: {
style: 'circle', // Mandatory , Drop down refresh style , Currently supports native 5+ ‘circle’ style
color: '#2BD009', // Optional , Default “#2BD009” Drop down refresh control color
height: '50', // Optional , Default 50px. Drop down refresh control height ,
range: '100', // Optional Default 100px, Control can be dragged down the range
offset: '0p', // Optional Default 0px, Drop down to refresh the start of the control
auto: true, // Optional , Default false. First load auto pull up refresh once
callback: callfunction // Mandatory , Refresh function , Write according to specific business , Such as through ajax Get new data from the server ;
}
}
});
# After the configuration data is updated, the pull-down refresh is folded
function callfunction() {
setTimeout(function() {
// Timer , Enhance user experience
mui.toast(' Updated 5 An article ');
mui('#refreshContainer').pullRefresh().endPulldownToRefresh(); // Complete refresh
}, 1500);
}
Double page drop-down refresh data
# Configure paging first
#index.html in
#body part
<!-- Drop down refresh container -->
<div id="refreshContainer" class="mui-content mui-scroll-wrapper">
<div class="mui-scroll">
<!-- Displayed button.html The page data -->
</div>
</div>
mui.init({
subpages: [
{
url: 'button.html', // Subpage HTML Address , Support local address and network address
id: 'button.html', // Subpage flag
styles: {
top: '45px', // Top of subpage
bottom: 0, // Sub page bottom position =
},
extras: {
} // Additional extension parameters
}],
swipeBack:true ,// Enable right slide close function
statusBarBackground: '#000000'
})
}
# Subpage section
<div id="refreshContainer" class="mui-content mui-scroll-wrapper">
<div class="mui-scroll">
<!-- Data list -->
</div>
</div>
mui.init({
pullRefresh : {
container:"#refreshContainer",// Drop down refresh container ID ,querySelector Able to locate css All selectors , such as :id、.class etc.
down : {
height:50,// Optional , Default 50. Trigger pull down refresh drag distance ,
auto: false,// Optional , Default false. First load automatic pull-down refresh once
contentdown : " Drop down to refresh ",// Optional , When the dropdown can refresh the status , Pull down to refresh the title content displayed on the control
contentover : " Release refresh now ",// Optional , When a refreshable state is released , Pull down to refresh the title content displayed on the control
contentrefresh : " Refreshing ...",// Optional , While refreshing state , Pull down to refresh the title content displayed on the control
callback : pullfreshFunction // Mandatory , Refresh function , Write according to specific business , Such as through ajax Get new data from the server ;
}
}
});
function pullfreshFunction() {
setTimeout(function() {
// Timer , Enhance user experience
mui.toast(' Updated 5 An article ');
mui('#refreshContainer').pullRefresh().endPulldownToRefresh(); // Complete refresh
}, 1500);
}
边栏推荐
- 直播预告|FeatureStore Meetup V3 重磅来袭!
- Postgresql错误码是如何构造的
- 显示商品详情【项目 商城】
- 2022年安全员-B证理论题库及模拟考试
- Discrete mathematics attention points, priority problems
- Here we go! Dragon lizard community enters PKU classroom
- Top selling commodities 【 project mall 】
- Recruitment of audio and video quality test and Development Engineer
- Pad printing process flow and application precautions
- Introduction to Solr Basics
猜你喜欢

解决IDEA下载插件慢的问题

2022 R1 quick opening pressure vessel operation test questions and online simulation test

Lake Shore—SuperTran 连续流低温恒温器系统
![[day1/5 literature intensive reading] speed constancy or only slowness: what drives the kappa effect](/img/17/5481a9e05de96eb0a2f89709e6120d.png)
[day1/5 literature intensive reading] speed constancy or only slowness: what drives the kappa effect

产品力进阶新作,全新第三代荣威RX5盲订开启

Mysql5 and mysql8 are installed at the same time

The second bullet of in-depth dialogue with the container service ack distribution: how to build a hybrid cloud unified network plane with the help of hybridnet
![[day11-12 intensive literature reading] on languages in memory: an internal clock account of space-time interaction](/img/85/4486bd46b5f32331ce398e42e5d803.png)
[day11-12 intensive literature reading] on languages in memory: an internal clock account of space-time interaction

直播预告|FeatureStore Meetup V3 重磅来袭!
![[day4 literature intensive reading] space – time interdependence: evidence against Asymmetric mapping between time and space](/img/ce/f3817690a024cfebcf58a5ccc3cfdc.png)
[day4 literature intensive reading] space – time interdependence: evidence against Asymmetric mapping between time and space
随机推荐
Processus postgresql10
【Day10 文献泛读】Temporal Cognition Can Affect Spatial Cognition More Than Vice Versa: The Effect of ...
思科私有动态路由协议:EIGRP
帝国理工等最新《胶囊网络综述》论文,29页pdf阐述胶囊的概念、方法与应用
Implementation scheme of iteration and combination pattern for general tree structure
JS to add an attribute to an array object
How to do investment analysis in the real estate industry? This article tells you
The second bullet of in-depth dialogue with the container service ack distribution: how to build a hybrid cloud unified network plane with the help of hybridnet
Unity3d C # development of wechat games audio / sound playback problem solving process sharing
2022年安全员-A证考题模拟考试平台操作
Why can't Google search page infinite?
Is the product stronger or weaker, and is the price unchanged or reduced? Talk about domestic BMW X5
Jetpack architecture component learning (3) -- activity results API usage
2022高压电工考试题模拟考试题库及在线模拟考试
2022年起重机司机(限桥式起重机)考试题模拟考试题库及模拟考试
GMN of AI medicine article interpretation
HMS core shows the latest open capabilities in mwc2022, helping developers build high-quality applications
[day11-12 intensive literature reading] on languages in memory: an internal clock account of space-time interaction
Jetpack architecture component learning (3) -- activity results API usage
免费分享1个新媒体运营必备的宝藏网站