更新记录

1.1.4（2024-01-29）

修复滚动问题

1.1.3（2024-01-24）

修复

1.1.2（2024-01-23）

修改初始化时获取头部和底部高度，暂无获取到

平台兼容性

msj-load-more

vue2 scroll-view 下拉刷新 滚动列表。

使用使用

可通过下方的示例及文档说明，进一步了解使用组件相关细节参数。

必须调用的函数

 // 首次加载 , 父组件必须调用的函数
 getLoad 参数
  参数1: 是否启动 下拉加载数据 可传
    true 为下拉刷新
    false 静态刷新

 // 案例
 // 先通过 ref 获取元素  ref: refName
 // 调用 getLoad
  this.$refs.refName.getLoad(true)

getLoad 是通过refs 进行调用 参数为 是否刷新

• false 为刷新，然后会返回事件 emit 为 onGetLoad
• true 为不刷新，然后会返回事件 emit 为 onRefresh

onGetLoad 用于首次加载和手动调用，比如切换标签时需要调用，搜索条件时等等 均可调用

• this.$refs.refName.getLoad(false) 即可 ，和 首次加载调用一致

功能统计

1. 头部插槽（ slot: header ）
2. 列表滚动
3. 底部插槽（ slot: footer ）

组件参数

pagination 参数

pagination = {
current: 1, // 分页
pages: 1, // 分页总数
pageSize: 10, // 条目
total: 0, // 条目总数
listTotal: 0 // list 条目数目
}

Events

上面有介绍 onGetLoad 和 onRefresh

公共插槽

提示：header 和 scroll-header 最好使用只使用一个 ，俩同时使用 也完全可以

案例

<!-- 常规形式 -->
  <msj-load-more
    ref="loadMore"
    isScrollHeader
    :list-total="listTotal"
    @onGetLoad="onRefresh"
    @onRefresh="onRefresh"
    @onTolower="getData"
  >
    <template slot="header"> 头部 </template>
    <template slot="scroll-header"> 不固定头部 </template>
    <div class="list">
      <div v-for="(item, index) in list" :key="index">
        <h1>{{ index + 1 }}</h1>
      </div>
    </div>
    <template slot="empty">
      <div>zanwushuju</div>
    </template>
    <template slot="footer">
      <div>底部且固定</div>
    </template>
  </msj-load-more>

  data(){
    list:[],
    pagination: {
      current: 1, // 分页
      pageSize: 10, // 条目
      pages: 1, // 分页总数
      total: 0, // 条目总数
    },
  },
 onLoad() {
    // 页面刷新方法 会自动调用pulldown一次
    this.$refs['loadMore'].getLoad(false) // 需要这个  @onGetLoad="onRefresh"
    // this.$refs['loadMore'].getLoad(true) // 不需要这个 @onGetLoad="onRefresh"
  },
  methds:{
    onRefresh(callback) {
      this.list = []
      this.pagination.current = 1
      this.getData(callback)
    },
    getData(callback){
      wx.showLoading({
        title: '加载中...',
        mask: true
      })
      setTimeout(function () {
        // 模拟请求接口
        for (let i = 0; i < 10; i++) {
          this.list.push({
            proName: '产品名称' + i
          })
        }
        // 列表总数量
        this.totalNum = 30
        this.pagination.current++
        const pages =  this.totalNum  / this.pagination.pageSize // 总分页
        // callback(this.pagination.current,pages) //这是关键,调用子组件中的回调方法.
        callback() //这是关键,调用子组件中的回调方法.
        wx.hideLoading()
      }, 1000)
    }
  }