项目中运用到vue
1、先引入vue和axios的js
<script src="${baseurl }/js/vue.min.js"></script>
<script src="${baseurl }/js/axios.min.js"></script>2、在body的第一个div上添加id为app
<body class="bg-white">
<div id="app" v-cloak class="carrier">
<div id="dataList" class="pullwrap">
<!--这个div不可缺，滚动容器-->
<div>
<div class="transport-list">
<div class="carrier-menu bg-gray item" v-for="(item,index) in dataList" :key="index">
<div class="bg-white item-content" @click="jumpTo(item)">
<div class="code">
<span class="fl">{{item.code}}</span>
<span class="fr txt-info" >{{formatStatus(item.dcbStatus)}}</span>
</div>
<div>
<i class="transport-icon iconfont icon-zhandian-01"></i>
<span>发货站点：{{item.whStr}}</span>
</div>
<div>
<i class="transport-icon iconfont icon-yunshu-01"></i>
<span>车型：{{item.carTypeName}}</span>
</div>
<div>
<i class="transport-icon iconfont icon-shijian-01"></i>
<span>计划到库时间：{{item.dcbArrivedtime}}</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>2、js代码部分
<script type="text/javascript">
var vm = new Vue({
el: '#app',
data: {
pageNum:1,
pageSize:10,
isOver:false,//状态标识 是否加载完数据
dataList: [],
},
created() {
this.initPull();
},
methods: {
// 列表上拉加载
initPull(){
this._startLimit = this.pageNum*this.pageSize;
var _self = this;
mui.init({
pullRefresh : {
container:'#dataList',
up : {
height:50,//可选.默认50.触发上拉加载拖动距离
auto:true,//可选,默认false.自动上拉加载一次
contentrefresh : "正在加载...",//可选，正在加载状态时，上拉加载控件上显示的标题内容
contentnomore:'没有更多数据了',//可选，请求完毕若没有更多数据时显示的提醒内容；
callback :function(){
setTimeout(function() {
// mui('#dataList').pullRefresh().endPullupToRefresh(_self.isOver);
_self.pullFresh();
}, 500);
}
}
}
});
},
pullFresh(){
var para = {
code: this.searchKey,
dcbStatus: this.dcbStatus,
curpage: this.pageNum,
pagesize: this._startLimit
}
axios({
url: baseurl+ '/carriers/transportPage',
method: 'post',
data: Qs.stringify(para)
}).then(res => {
var s =res.data.data;
if (s.statusCode == "200") {
var maxPage = Math.ceil(s.total/this.pageSize);
//判断当前页码是否与最大页码数一致，如果一致则标识为true
if(this.pageNum ==1){
this.dataList = s.data;
this.isOver = false ;
// mui('#dataList').pullRefresh().endPullupToRefresh(this.isOver);
// mui.toast('这里是table切换过来，想重新激活下拉刷新',{ duration:'long', type:'div' })
mui('#dataList').pullRefresh().refresh(true);
}else{
mui('#dataList').pullRefresh().endPullupToRefresh(this.isOver);
this.dataList = this.dataList.concat(s.data);
}
if(this.pageNum >= maxPage){
this.isOver = true;
mui('#dataList').pullRefresh().endPullupToRefresh(this.isOver);
}
//请求下一页做准备
if(this.isOver == false){
this.pageNum++;
mui('#dataList').pullRefresh().endPullupToRefresh(this.isOver);
}
// mui.toast('total:'+s.total+" maxPage:"+maxPage +" isOver:"+this.isOver +" pageNum:"+this.pageNum,{ duration:'long', type:'div' })
//一定要加，否则点击事件会失效
mui("#dataList").on('tap', '.item-content', function (event) {
this.click();
});
}else{
mui.toast(s.message);
}
})
},
}
})
</script>
