mescroll-vue下拉上拉刷新的使用

1. 执行npm命令安装mescroll

npm install --save mescroll.js

2. 引入mescroll组件

import MescrollVue from 'mescroll.js/mescroll.vue'

3.注册组件

components: {MescrollVue},

4.图片展示

5. 页面示例代码

<template><div><!-- 这个是不带tab切换的xaila上拉刷新--><!-- 1.修改请求路径 参数2.可以在created里面请求看一下是否成功  然后在将上拉下拉刷新请求修改  在查看属性渲染数据3.npm install less less-loader --save--><demo-section><mescroll-vue ref="mescroll0" :down="getMescrollDown(0)" :up="getMescrollUp(0)" @init="mescrollInit0"><ul class="itemlist" id="itemlist0"><li class="card" v-for="item in pending.data" :key="item.oafdUuid"><router-link :to="{name: 'vehicle-apply-new', query: {name: item}}"><div class="card-body"><span class="tag tag-blue">{{ getType(item, 'text') }}</span>{{ item.oafdFilesenddepname }}</div><div class="card-footer"><span>{{ item.oafdCusrname }}</span><i class="time">{{ item.oafdCdate | formatDate('yyyy-M-d hh:mm') }}</i></div></router-link></li></ul></mescroll-vue></demo-section></div>
</template>
<script>
// 引入mescroll的vue组件
import MescrollVue from 'mescroll.js/mescroll.vue'
import {getFiledispatchList} from '@/api/official-review.js'
export default {components: {MescrollVue},data() {return {pending: {mescroll: null,isListInit: false,//存放列表数据data: [],recordcount: 0},waitCount: 0}},beforeRouteEnter(to, from, next) {// 如果是从表单详情或新建表单返回 则回写当前类型let theTypelet waitCount// 通过你跳转的详情页路径判断if (from.name == 'official-send-view') {theType = localStorage.getItem('listTabType') || 0waitCount = localStorage.getItem('waitCount') || 0} else {theType = 0waitCount = 0}next(vm => {console.log(vm)setTimeout(() => {vm.tabType = theTypevm.waitCount = waitCountvm.tabChange(theType)})})},beforeRouteLeave(to, from, next) {// 如果是进入表单详情或新建表单 则保存当前的类型 否则清空// 通过你跳转的详情页路径判断if (to.name == 'official-send-view') {localStorage.setItem('listTabType', this.tabType)localStorage.setItem('waitCount', this.waitCount)} else {localStorage.removeItem('listTabType')localStorage.removeItem('waitCount')}next()},methods: {// mescroll组件初始化的回调,可获取到mescroll对象mescrollInit0(mescroll) {mescroll.tabType = 0this.pending.mescroll = mescroll},// 多mescroll的配置,需通过方法获取,保证每个配置是单例getMescrollDown(tabNum) {let wrapId = 'itemlist' + tabNumreturn {auto: false,callback: this.downCallback,empty: {warpId: wrapId,tip: '— 暂无更多数据 —'}}},//上拉回调getMescrollUp(tabNum) {//ref="mescroll0"//并接成ref的值let wrapId = 'itemlist' + tabNumreturn {auto: false,callback: this.upCallback, // 上拉回调,此处可简写; 相当于 callback: function (page) { upCallback(page); }htmlNodata: '<p class="upwarp-nodata">— 暂无更多数据 —</p>', //无数据的布局noMoreSize: 1, // 如果列表已无数据,可设置列表的总数量要大于半页才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看; 默认5page: {//控制当前第几页num: 0,//当前页数size: 15},empty: {warpId: wrapId,tip: '— 暂无更多数据 —'}}},downCallback(mescroll) {// 这里加载你想下拉刷新的数据, 比如刷新sent的轮播数据if (mescroll.tabType == 0) {// loadSwiper();} else if (mescroll.tabType == 1) {// ....} else if (mescroll.tabType == 2) {// ....}mescroll.resetUpScroll() // 触发下拉刷新的回调,加载第一页的数据},/* 上拉加载的回调 page = {num:1, size:10}; num:当前页 从1开始, size:每页数据条数 */upCallback(page, mescroll) {mescroll.endByPage(page.num * page.size, page.num)let currentTabif (mescroll.tabType == 0) {//   这里可以打印出请求的参数//   console.log(this.pending);currentTab = this.pendingcurrentTab.isListInit = true // 标记列表已初始化,保证列表只初始化一次getFiledispatchList({// 上拉要传的参数'page.start': String(page.num == 1 ? 0 : currentTab.data.length),'page.limit': '10','strMap.type': 'pending','strMap.searchKeyWords': '','strMap.postType': 'dd'}).then(response => {this.waitCount = response.recordcount || 0if (response.success && response.data.length == 0) {if (page.num == 1) {currentTab.data = []currentTab.recordcount = 0}}if (response.success && response.data.length > 0) {const arr = response.datacurrentTab.recordcount = response.recordcount || 0if (page.num == 1) {currentTab.data = []}currentTab.data = currentTab.data.concat(arr)this.$nextTick(() => {mescroll.endSuccess(currentTab.recordcount)})} else {mescroll.endDownScroll()mescroll.endUpScroll(true)}}).catch(e => {console.log(e)mescroll.endErr()})}},// 切换菜单tabChange(name) {let newTab = this.getTabData(name) // 新转换的列表if (!newTab.isListInit) {newTab.mescroll.triggerDownScroll() // 加载列表}},// 获取菜单对应的数据getTabData(tabNum) {//tab切换进行的判断if (tabNum == null) tabNum = this.tabNumif (tabNum == 0) {return this.pending} else if (tabNum == 1) {return this.deal} else {return this.done}},// 获取每条数据对应的参数getType(data, prop, tabType) {const typeObj = {//标题名text: '发文管理',//跳转的详情页name: 'official-send-view',query: {//传过去的uuiduuid: data.oafdUuid,//详情也数据不一样进行判断的hideBtn: tabType != '0' ? 'yes' : 'no',openType: 1}}return typeObj[prop]}}
}
</script>
<style lang="less" scoped>
.mescroll {position: fixed;top: 44px;bottom: 0;height: auto;
}
.mescroll-padding {bottom: 48px;
}
/deep/ .mescroll-upwarp {min-height: 20px;line-height: 20px;padding: 8px 0;
}
/deep/ .mescroll-upwarp .upwarp-nodata {font-size: 12px;color: rgba(25, 31, 37, 0.56);
}
/deep/ .mescroll-empty {min-height: 20px;line-height: 20px;padding: 8px 0;.empty-tip {margin-top: 0;font-size: 12px;color: rgba(25, 31, 37, 0.56);}
}
// 选项卡
/deep/ .van-tabs {position: fixed;z-index: 9;left: 0;right: 0;top: 0;
}
/deep/ .van-tab {height: 44px;line-height: 44px;font-size: 15px;color: rgba(0, 0, 0, 0.4);
}
/deep/ .van-tab--active {color: rgba(50, 150, 250, 1);
}// 列表
.itemlist {padding: 8px;.card {padding: 14px 8px 14px 16px;background: rgba(255, 255, 255, 1);box-shadow: 0px 2px 4px 0px rgba(25, 31, 37, 0.04);border-radius: 3px;.tag {margin-right: 5px;padding-left: 6px;padding-right: 16px;display: inline-block;min-width: 68px;height: 20px;line-height: 20px;font-size: 12px;color: #fff;box-sizing: border-box;vertical-align: middle;&.tag-blue {background: url('../../assets/official-review/tag-blue.png');background-size: 100% 100%;}&.tag-gray {background: url('../../assets/official-review/tag-gray.png');background-size: 100% 100%;}}.card-body {margin-bottom: 5px;min-height: 40px;line-height: 20px;font-size: 15px;color: rgba(25, 31, 37, 1);}.card-footer {display: flex;justify-content: space-between;align-items: center;height: 16px;font-size: 12px;color: rgba(25, 31, 37, 0.4);span {margin-right: 10px;flex: 1;text-overflow: ellipsis;white-space: nowrap;overflow: hidden;}i {font-style: normal;}}}.card + .card {margin-top: 8px;}
}
// 筛选
.filter-panel {padding-top: 44px;.filter-title {padding: 12px 16px 7px;line-height: 21px;font-size: 15px;color: rgba(25, 31, 37, 1);box-sizing: content-box;}.filter-body {ul {padding: 0 12px 18px;display: flex;flex-wrap: wrap;}li {padding: 5px 4px;flex-basis: 33.33%;box-sizing: border-box;}p {display: flex;justify-content: center;align-items: center;height: 34px;font-size: 14px;background: rgba(25, 31, 37, 0.04);color: rgba(25, 31, 37, 0.72);border: 1px solid rgba(151, 151, 151, 0.04);border-radius: 3px;text-align: center;&.active {color: rgba(50, 150, 250, 1);border: 1px solid rgba(50, 150, 250, 1);background: rgba(50, 150, 250, 0.04);}}}.filter-footer {display: flex;button {margin: 0;padding: 0;display: flex;flex-basis: 50%;height: 44px;font-size: 17px;justify-content: center;align-items: center;border: none;outline: none;}.btn-reset {color: rgba(50, 150, 250, 1);background: rgba(50, 150, 250, 0.08);}.btn-confirm {color: rgba(255, 255, 255, 1);background: rgba(50, 150, 250, 1);}}
}
</style>

mescroll-vue下拉上拉刷新的使用相关推荐

android ListView实现下拉上拉刷新功能
android ListView实现下拉上拉刷新功能主ListView类: package com.carcare.refresh;/*** @file XListView.java* @packa ...
h5在ios下拉上拉会带动整个页面出现空白解决方案
** h5 在 ios 快速下拉上拉会带动整个页面出现空白解决方案 ** 查找页面顶层dom(如HTML.body. -),有没有overflow样式,有的话去掉就行了,贼坑
element Table组件下拉上拉效果实现
2019-07-23更新经过一段时间的学习我发现了更为简单的方法,CSS的 transition属性指定对应的属性完成需要多久时间. 因此我们定义了一个class .carton{trans ...
vue better-scroll 下拉上拉，加载刷新
_initScroll(){ this.$nextTick(() => { if (!this.scroll) { ...
iOS - 下拉上拉菜单，万能菜单，适用于各种场合
Github 下载地址 :https://github.com/coderMyy/MYDropMenu , 如果有好的建议或者意见,请直接留言 1. 常规位移上拉下拉,蒙板可设置透明或半透明,可随意自 ...
ios系统在h5页面下拉上拉会带动整个webview 出现空白
产生原因: 在 iOS 中,手指按住屏幕上下拖动,会触发 touchmove 事件.这个事件触发的对象是整个 webview 容器, 容器自然会被拖动,剩下的部分会成空白. 在 W3C 文档中说 to ...
MJRefresh上拉刷新下拉加载
在ios7之前,一直在使用开源的EGO库.但是,在使用过程中发现,普遍封装得过于复杂.耦合性强,不利于集成到自己的项目中. 另外,在ios7之后,一些原有的下拉刷新,上提加载控件表现的就不是那么出色了 ...
ios 上拉加载下拉刷新
在一款 App应用中有的时候会用到上拉加载下拉刷新的功能,本人觉得SVPullToRefresh很好用(可以用在UIScrollView上,包括UITableview和UICollectionView ...
pullToRefresh下拉刷新上拉加载
PullToRefresh 是一个第三方的工程. 之前的自定义下拉刷新控件貌似不太好用,于是网上找了这个. 参考:http://www.cnblogs.com/summers/p/4343964.ht ...
分享轮子-flutter下拉刷新上拉加载
flutter下拉上拉组件轮子什么是flutter? 首先说下flutter,估计这个应该挺多人没听过flutter这个框架,它是一个google推出的跨平台的移动应用UI框架,和React Nat ...

mescroll-vue下拉上拉刷新的使用

mescroll-vue下拉上拉刷新的使用相关推荐

最新文章

热门文章