上一篇实现了轮播图的加载,本篇再继续丰富页面,添加mui的列表以及下拉刷新,上拉加载更多的功能,
mui的刷新加载参考官方文档
文档地址:http://dev.dcloud.net.cn/mui/pulldown/
贴出完整代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title></title>
<!-- 引入需要的库 mui jQuery vue -->
<script src="js/mui.min.js"></script>
<link href="css/mui.min.css" rel="stylesheet"/>
<script src="https://cdn.bootcss.com/jquery/1.11.0/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
</head>
<body>
<!--下拉刷新容器-->
<div id="refreshContainer" class="mui-content mui-scroll-wrapper">
<div class="mui-scroll">
<!-- banner -->
<div id="vbanner">
<div id="slider" class="mui-slider" >
<div class="mui-slider-group mui-slider-loop">
<!-- 额外增加的一个节点(循环轮播：第一个节点是最后一张轮播) -->
<div class="mui-slider-item mui-slider-item-duplicate" >
<a href="#">
<img v-bind:src="bannerList[bannerList.length-1].imagePath" v-if="bannerList !== undefined && bannerList.length > 0">
</a>
</div>
<!-- 第一张 这里注意使用<img src="{{ item.imagePath }}" 是不对的,要使用v-bind才可以/> -->
<div class="mui-slider-item" v-for="item in bannerList">
<a href="#">
<img v-bind:src="item.imagePath" />
</a>
</div>
<!-- 额外增加的一个节点(循环轮播：最后一个节点是第一张轮播) -->
<div class="mui-slider-item mui-slider-item-duplicate">
<a href="#">
<img v-bind:src="bannerList[0].imagePath" v-if="bannerList !== undefined && bannerList.length > 0">
</a>
</div>
</div>
<div class="mui-slider-indicator">
<!-- 第一个指示器是激活状态,以后的指示器是默认状态 这里加入判断-->
<div class="mui-indicator mui-active"></div>
<div class="mui-indicator" v-for="(item,index) in bannerList" v-if="index !== 0"></div>
</div>
</div>
</div>
<!--数据列表-->
<ul class="mui-table-view mui-table-view-chevron">
<li class="mui-table-view-cell mui-media" v-for="item in homeList">
<a href="javascript:;">
<img class="mui-media-object mui-pull-left" src="image/cat.jpg">
<div class="mui-media-body">
{{ item.author }}
<p class="mui-ellipsis">{{ item.title }}</p>
</div>
</a>
</li>
</ul>
</div>
</div>
<script type="text/javascript" charset="utf-8">
mui.init({
pullRefresh : {
container:"#refreshContainer",
down : {
height:50,//
auto: false,
contentdown : "下拉可以刷新",
contentover : "释放立即刷新",
contentrefresh : "正在刷新...",
callback :pulltoRefresh
},
up: {
auto:false,
contentrefresh: '正在加载...',
callback: loadMore
}
}
});
var vm = new Vue({
el:'#refreshContainer',
data:{
bannerList:[],
homeList:[],
page:0
},
mounted:function(){
this.$nextTick(function(){
getBannerList()
pulltoRefresh()
})
},
updated:function(){
var bannerSlider= mui(".mui-slider");
bannerSlider.slider({
interval: 3000 //自动3000ms播放下一张
});
}
});
function loadMore(){
vm.page++;
$.ajax({
type:'GET',
url:"https://www.wanandroid.com/article/list/"+vm.page+"/json",
data:{
},
success:function(data){
if(data.errorCode == 0){
vm.homeList = vm.homeList.concat(data.data.datas)
mui('#refreshContainer').pullRefresh().endPullupToRefresh();
console.log(vm.homeList)
}
}
});
}
function pulltoRefresh(){
$.ajax({
type:'GET',
url:"https://www.wanandroid.com/article/list/0/json",
data:{
},
success:function(data){
if(data.errorCode == 0){
vm.homeList = data.data.datas
mui('#refreshContainer').pullRefresh().endPulldownToRefresh(true);
console.log(vm.homeList)
}
}
});
}
function getBannerList(){
$.ajax({
type:'GET',
url:'https://www.wanandroid.com/banner/json',
data:{
},
success:function(data){
if(data.errorCode == 0){
vm.bannerList = data.data
console.log(vm.bannerList)
}
}
});
}
</script>
</body>
</html>
需要注意的点:
文档中说结束下拉刷新是这样写的
//注意，加载完新数据后，必须执行如下代码，注意：若为ajax请求，则需将如下代码放置在处理完ajax响应数据之后
//没有更多内容了，endPulldown 传入true， 不再执行下拉刷新
mui('#refreshContainer').pullRefresh().endPulldown();
我第一次使用时候浏览器直接报错了,说没有这个方法,然后看了mui项目模板中的写法是下面的这种
mui('#refreshContainer').pullRefresh().endPulldownToRefresh(true);
