vue中mescroll.js插件的mixins封装方法_mescrollmixin-优快云博客

本文链接：https://blog.youkuaiyun.com/nononoCoder/article/details/114539736

本文详细介绍了如何在Vue项目中集成Mescroll库，包括通过npm安装、在main.js中引入、配置mescroll的上拉加载和下拉刷新功能，并在组件中使用mescroll。示例代码展示了如何在不同页面间保持状态，以及如何根据需求单独定制下拉刷新功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、mescroll官网链接：http://www.mescroll.com/
2、vue项目中引入mescroll的方法

1.安装mescroll依赖   npm install --save mescroll.js
2.vue中的main.js文件中引入mescroll
import MescrollVue from 'mescroll.js/mescroll.vue'
import 'mescroll.js/mescroll.min.css'
Vue.component("mescroll-vue",MescrollVue)

3、新建mixins文件

export const mescrollMixins = {
    data(){
        return{
			mescroll:null,
			mescrollDown:{
			},
  			mescrollUp: { // 上拉加载的配置.
				callback: this.upCallback,
				page: {
					num: 0, 
					size: 20
				},
				htmlNodata: '<p class="upwarp-nodata">-- 暂无更多数据 --</p>',
				noMoreSize: 5, //如果列表已无数据,可设置列表的总数量要大于5才显示无更多数据;
		  	},
			pageDataList:[] //显示数据
        }
    },
    beforeRouteEnter (to, from, next) {
        next(vm => {
          vm.$refs.mescroll && vm.$refs.mescroll.beforeRouteEnter()
        })
      },
      beforeRouteLeave (to, from, next) { // 如果没有配置顶部按钮或isBounce,则beforeRouteLeave不用写
        // 记录列表滚动的位置,隐藏顶部按钮和isBounce的配置
        this.$refs.mescroll && this.$refs.mescroll.beforeRouteLeave()
        next()
      },
    created(){
    },
    methods:{
		mescrollInit(mescroll){
			this.mescroll = mescroll;
		},
	    // 上拉回调 page = {num:1, size:10}; num:当前页 ,默认从1开始; size:每页数据条数,默认10
	    upCallback (page, mescroll) {
	    	// 此处应写入相关联网请求（下面是模拟上拉加载过程代码）
	        let arr;
	        if(page.num<3){
	          arr = [{}]
	        }else{
	          arr= []
	        }
	        this.$nextTick(() => {
	          mescroll.endSuccess(this.$nextTick(() => {
		          mescroll.endSuccess(arr)
		        }))
	        })
	    }
    }
}

组件中的mixins的使用

import {mescrollMixins} from '../components/mescrollMixins.js'
  export default {
    mixins:[mescrollMixins],
    data(){}
  }

mescroll在组建中的使用（把在需要加载内容显示的部分包裹起来）

<mescroll-vue ref="mescroll" :down="mescrollDown" :up="mescrollUp" @init="mescrollInit" style="position: fixed;top:40px;bottom:64px;height: auto;font-size:14px">
......
</mescroll-vue>

至此mescroll可以在各个页面中引入使用啦！
注：该例中未写下拉刷新函数，因为有些页面仅需要下拉刷新而不需要上拉加载功能。所以你可以在使用过程中根据需要在相关组件中单独写下拉刷新函数，同时改变<mescroll-vue ref=“mescroll” :down=“mescrollDown” :up=“mescrollUp” @init=“mescrollInit”>中方法的绑定即可！！！

如果对你有所帮助可以点个赞吗？嘻嘻~