mui—下拉刷新+引擎模板渲染+批量绑定事件

最新推荐文章于 2020-12-03 13:51:56 发布

u010242159

最新推荐文章于 2020-12-03 13:51:56 发布

阅读量5.9k

点赞数 1

本文链接：https://blog.csdn.net/u010242159/article/details/52914044

版权

这篇博客展示了如何使用MUI框架实现下拉刷新功能，并结合引擎模板渲染批量绑定事件。通过示例代码，详细讲解了如何加载并显示最新注册会员的数据，以及在上拉加载时如何处理数据和触发事件。

摘要由CSDN通过智能技术生成

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Hello MUI</title>
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="stylesheet" href="css/mui.min.css">
<style>
html,body {
background-color: #efeff4;
}
.title{
margin: 20px 15px 10px;
color: #6d6d72;
font-size: 15px;
}
.oa-contact-cell.mui-table .mui-table-cell {
padding: 11px 0;
vertical-align: middle;
}

.oa-contact-cell {
position: relative;
margin: -11px 0;
}

.oa-contact-avatar {
width: 75px;
}
.oa-contact-avatar img {
border-radius: 50%;
}
.oa-contact-content {
width: 100%;
}
.oa-contact-name {
margin-right: 20px;
}
.oa-contact-name, oa-contact-position {
float: left;
}
</style>

</head>

<body>
<div id="pullrefresh" class="mui-content mui-scroll-wrapper">
<div class="mui-scroll">
<div class="title">
最新注册会员
</div>
<ul id="ullist" class="mui-table-view mui-table-view-striped mui-table-view-condensed">

<script id="ul-li-template" type="text/html">
<% for(var i=0;i<list.length;i++){%>
<li id='li<%=list[i].userInfo.user_id %>' class="mui-table-view-cell">
<div id="ul-li-divID" class="mui-slider-cell" style="float: left; width: 88%;">
<div class="oa-contact-cell mui-table">
<div class="oa-contact-avatar mui-table-cell

最低0.47元/天解锁文章

u010242159

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
mui—下拉刷新+引擎模板渲染+批量绑定事件

Hello MUIhtml,body {background-color: #efeff4;}.title{margin: 20px 15px 10px;color: #6d6d72;font-size: 15px;}.oa-contact-cell.mui-table .mui-table-cell {padding: 11px 0;
复制链接

扫一扫