uniapp使用Mescroll（上拉加载下拉刷新）

最新推荐文章于 2024-02-21 14:47:54 发布

_小郑有点困了

最新推荐文章于 2024-02-21 14:47:54 发布

阅读量1.7k

点赞数

分类专栏： uniapp 文章标签：小程序

本文链接：https://blog.csdn.net/qq_44706619/article/details/114932454

版权

uniapp 专栏收录该内容

17 篇文章 2 订阅

订阅专栏

uniapp使用Mescroll
在这里插入图片描述

官网：https://www.mescroll.com/
1.安装
2.全局引入

import MescrollBody from "mescroll-uni/mescroll-body.vue"
import MescrollUni from "mescroll-uni/mescroll-uni.vue"
Vue.component('mescroll-body', MescrollBody)
Vue.component('mescroll-uni', MescrollUni)

3.封装组件

<template>
  <view class="main">
    <mescroll-uni :fixed="fixed"  ref="mescrollRef" :top="top?top:'0'" :bottom="bottom?bottom:'0'" @topclick="topclick" @init="mescrollInit" @down="downCallback" @up="upCallback" :down="downOption" :up="upOption">
      <slot></slot>
	  </mescroll-uni>
  </view>
</template>
<script>
export default{
  data(){
    return{
      isShow: false,
      mescroll: undefined,
      upOption: {
        page: {
          size: 10 // 每页数据的数量,默认10
        },
        noMoreSize: 5, // 配置列表的总数量要大于等于5条才显示'-- END --'的提示
        empty: {
          use:false,
          tip: '暂无相关数据'
        },
        isBounce:false,   //ios橡皮筋回弹
        textNoMore: '已经到底了',
        bgColor:'rgb(240, 243, 244)',
        textColor:'rgba(0,0,0,0.45)'
      },
    }
  },
  props:[
    'top', // 视图上偏移量
    'bottom', // 视图下偏移量
    'fixed', // 视图下偏移量
  ],
	created() {
		console.log('展示')
		this.methods('resetMescroll', true)
	},
	beforeDestroy() {
		console.log('销毁')
		this.methods('resetMescroll', false)
  },
  methods:{
    resetMescroll (flag) {
      this.isShow = flag
    },
    downCallback () {
      console.log("出发下拉")
      this.$emit('down', this.mescroll)
    },
    upCallback (page) {
      console.log("出发上拉")
      this.$emit('up', this.mescroll, page)
    },
    mescrollInit(mescroll) {
      this.mescroll = mescroll;
      this.$emit('init', mescroll)
    },
    topclick(mescroll){
      // mescroll.scrollTo( 0, 300 )
      this.$emit('topclick', mescroll)
    }
  }
</script>

<style  lang="scss">
  .main{
    height: 100%;
  }
</style>

4.页面使用组件以及方法

<  @down="downCallback" @up="upCallback" ref="mescroll" @init="(mescroll) => {this.mescroll = mescroll}"></scroll-list>

方法：

downCallback(mescroll) {
    mescroll.resetUpScroll()
  }

  upCallback(mescroll, page) {
    this.mescroll = mescroll
    this.http({
      cmd: 'xxx',
      input: this.input.value,
      success(res) {
          // 调用mescroll的Api自动判断是否加载到底部
          mescroll.endBySize(curPageLen, this.ticketProgress.output.value.total)
        }
      }
    })
  }