1、编写van-list公用方法

我是放在components中，新建common.js文件用来存放公用方法校验等，单独定义communalApi存放公用方法

点击在新窗口中浏览原图
CTRL+鼠标滚轮放大或缩小

备注：getList是公用van-list方法名称

     getList(options, callback) {
      var vanListLoading = false // 加载状态
      var finished = false // 是否加载
      var finishedText = '' // 加载完成后的提示文案
      axios.post(options.url, options.db).then(
        res => {
          if (res.data.code === 1) {
            vanListLoading = false
            if (res.data.data.length > 0) {
              options.list = options.list.concat(res.data.data) // 追加数据
              finished = false
            }
            // 如果当前页数 = 总页数，则已经没有数据
            if (options.db.pages === Math.ceil(res.data.count / options.db.pnums)) {
              finished = true
              finishedText = '- 已显示全部 -'
            }
            callback({ list: options.list, vanListLoading: vanListLoading, finished: finished, finishedText: finishedText })
          } else {
            finished = true
            finishedText = '- 已显示全部 -'
            callback({ list: options.list, vanListLoading: vanListLoading, finished: finished, finishedText: finishedText })
          }
        },
        err => { console.log(err) }
      )
    }

html+js

<template>
  <div>
    <van-list v-model="vanListLoading" :finished="finished" :finished-text="finishedText" @load="getList">
      <li v-for="(item,index) of list" :key="index">
        {{ index }}{{ item.name }}
      </li>
    </van-list>
  </div>
</template>
<script>
import { nameList } from '../../../api/api'
export default {
  data() {
    return {
      list: [],
      vanListLoading: false, // 加载状态
      finished: false, // 是否加载
      finishedText: '', // 加载完成后的提示文案
      pages: 0, // 页数
      pnums: 10 // 条数
    }
  },
  methods: {
    getList: function() {
      this.pages += 1 // 页数+1
      const db = {
        pages: this.pages,
        pnums: this.pnums
      }
      this.finishedText = ''
      this.common.communalApi.getList({ url: nameList , db: db, list: this.list }, this.getData)
    },
    getData(data) {//回调函数赋值
      this.$set(this, 'list', data.list)
      this.$set(this, 'vanListLoading', data.vanListLoading)
      this.$set(this, 'finished', data.finished)
      this.$set(this, 'finishedText', data.finishedText)
    }
  }
}
</script>
<style scoped lang="less">
</style>

----------------------------
原文链接:https://www.jianshu.com/p/836fa9112cc4

程序猿的技术大观园：www.javathinker.net

[这个贴子最后由 flybird 在 2021-02-18 10:11:38 重新编辑]

Java精品书籍推荐