vue中的mescroll搜索运用及各种填坑处理

2020-06-12 20:52:23易采站长站整理

this.mescroll = new MeScroll(this.$refs.mescroll, { //在mounted初始化mescroll,确保此处配置的ref有值
down:{isLock: true}, //下拉刷新的配置. (如果下拉刷新和上拉加载处理的逻辑是一样的,则down可不用写了)
up: {
callback: this.upCallback,
// 以下是一些常用的配置,当然不写也可以的.
page: {
num: 0, //当前页 默认0,回调之前会加1; 即callback(page)会从1开始
size: 10, //每页数据条数,默认10
},
htmlLoading: '<p class="upwarp-progress mescroll-rotate"></p><p class="upwarp-tip">正在加载中..</p>',
htmlNodata: '<p class="upwarp-nodata" style="height:.4rem">当当当~已经到底啦~</p>',
noMoreSize: 1, //如果列表已无数据,可设置列表的总数量要大于5才显示无更多数据;
isBounce: true,
},
down:{
use:false
},
});
},
methods: {
//点击调起个人主页
openUserClick (item) {
console.log(item)
var userId = item;
mui.openClient({"pageType": "userHome","userId":item});
},
//上拉回调 page = {num:1, size:10}; num:当前页 ,默认从1开始; size:每页数据条数,默认10
upCallback(page) {
//联网请求
this.$request.post(_basePath + '/activity/page20191018/searchAll.html', {hintKey:this.searchName,searchType:91,pageNo:page.num,pageSize:page.size,actionSource:'07'}).then((response) => {
if(response && response.resultList){
// 请求的列表数据
let result = response.resultList[0];
let arr = result.list;
// 如果是第一页需手动置空列表
if (page.num === 1) this.dataList = [] // 把请求到的数据添加到列表
this.dataList = this.dataList.concat(arr)
// 数据渲染成功后,隐藏下拉刷新的状态
this.totalPage = result.total % pageSize > 0 ? Math.floor(result.total / 10 + 1) : result.total / 10;//计算总页数超过就不loadMore
this.$nextTick(() => {
this.mescroll.endSuccess(arr.length);
this.mescroll.endByPage(arr.length, this.totalPage)
})
}else{
this.isEmpty = true;
this.mescroll.endErr();
}
}).catch(() => {
this.mescroll.endErr();
})
},
inviteClick(item) {
this.$emit('inviteClick',item);
}
}

}
</script>

<style lang="scss" scoped>
.mescroll {
position: fixed;
top: .9rem;
bottom: 0;
left:0;
height: auto;
}
.search-content{
padding:0 .24rem;