Vue+Vant中van-list请求数据(数据请求调用公用方法)

数据请求写在当前页面上,不用公用方法点击这里:https://www.jianshu.com/p/b470a81f1014

1、编写van-list公用方法

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


image.png

备注: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




你可能感兴趣的:(Vue+Vant中van-list请求数据(数据请求调用公用方法))