12-如何美化移动端分页样式
移动端分页如果用PC分页样式展现会出现排列多行的问题，那么有需求美化样式的用户可以根据此教程处理
# 示范调用
## 样式代码示范
```javascript
<div class="page_content">
<ul class="pro_ul clearfix clear">
<yunu:catlist cid="21">
<li>
<a href="{$catlist.url}">{$catlist.title}</a>
</li>
</yunu:catlist>
</ul>
<div id="list">
<ul class="prolist_ul clearfix clear">
<yunu:list cid="$cid" titlelen="10" pagesize="8">
<li data-id="{$list.id}">
<a href="{$list.url}" class="img">
<img src="{$list.pic}" alt="{$list.title}">
</a>
<a href="{$list.url}" class="pro_t"><p class="p1">{$list.title}</p></a>
</li>
</yunu:list>
</ul>
</div>
<script>
$(".page_content .prolist_ul li a img").imgAuto();
</script>
</div>
<div class="load_more mg20">
<button class="load_more_btn" id="load_more_btn">加载更多</button>
</div>
```
## 接口调用示范
```javascript
<script type="text/javascript">
yunu.loadMore({
url: '<yunu:config name="site_protocol"/>://<yunu:config name="site_url"/>/index.php/api/list',
btn: $('#load_more_btn'),
box: $('#list>ul'),
load_icon_class: 'la-2x',
data: {
cid: {$cid},
limit: 8
},
template: function (index, el){
// 模板
return '<li data-id="{$list.id}">'+
' <a href="'+el.url+'" class="img">'+
' <img src="'+ el.pic +'">'+
' </a>'+
' <a href="'+el.url+'" class="pro_t"><p class="p1">'+el.title +'</p></a>'+
'</li>';
},
beforeSend: function(XMLHttpRequest) {
//console.log('请求发送');
},
done: function (res, textStatus, XMLHttpRequest){
//console.log('请求成功');
var template = this.template;
var context = this.box;
$.each(res.data, function(index, el) {
var items = $(template(index, el));
setTimeout(function(){
context.append(items.addClass('fadeInDown animated'));
items.find('img').imgAuto();
},200*(index+1))
});
},
fail: function(XMLHttpRequest, textStatus, errorThrown) {
//console.log('请求失败');
},
always: function(XMLHttpRequest, textStatus, errorThrown) {
//console.log('请求完成');
}
});
</script>
```
## 效果展现
最终可以通过加载更多的方式显示更多数据
