uniapp 引入文件混入

          在uniapp 项目开发中,有时会遇到多个页面中有相同的功能模块,这时只需引入mixins文件混入就可以方便的进行调用.

module.exports = {
  data () {
    return {
      mixin_list: [],
      mixin_page: 1,
      pageSize: 10, // 每页请求数据数
      pageNum: 0 // 总页数
    }
  },
  created () {
    console.log('from mixin')
  },
  

  methods: {
    /**
     * 参数合并
     * @param params
     * @returns {*}
     */
    getParams (params = {}) {
      return Object.assign({
        page: this.mixin_page,
        page_size: this.pageSize
      }, params)
    },
    /**
     * 加载更多
     */
    loadMore () {
      this.mixin_page++
      this.loadData()
    },
    /**
     * 数据合并
     * @param res 请求源数据
     * @param filter
     */
    pushToList (res, filter) {
      if (this.mixin_list.length) {
        this.mixin_list = this.mixin_list.concat(res.data)
      } else {
        this.mixin_list = res.data
      }
      if (typeof filter === 'function') {
        this.mixin_list.forEach((item) => {
          filter(item)
        })
      }
      this.pageNum = res.pages
    },
    /**
     * 初始化列表
     */
    initList () {
      this.mixin_page = 1
      this.pageNum = -1
      this.mixin_list = []
      this.loadData()
    },
    /**
     * 判断是否允许加载
     */
    handleLoad() {
      if(
        (!this.pageNum && this.mixin_page > 1) ||
          (this.mixin_page > this.pageNum && this.mixin_page > 1)
      ) return false
      return true
    },
    /**
     * @overwrite
     * 加载数据方法 用到该mixin的都应该重写该方法 否则无法实现加载数据
     */
    getData () {},
    // getData (loadFn, params) {
    //   var _this = this
    //   return new Promise((resolve, reject) => {
    //     loadFn(params).then(res => {
    //       _this.pushToList(res)
    //       resolve(res)
    //     }).catch((err) => {
    //       reject(err)
    //       console.log(err)
    //     })
    //   })
    // },

    /**
     * 加载列表数据
     */
    loadData() {
      if(!this.handleLoad()) return
      this.getData()
    }
  }
}

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值