payProject/pages/article/article.js

import {
  get,
  post
} from '../../utils/http';
Page({

  /**
   * 页面的初始数据
   */
  jsData: {
    columnsHeight: [0, 0],
    isListLoading: false
  },
  data: {
    current: 0,
    value: '',
    classify: [],
    list: [],
    total: 0,
    page: 1,
    spinning: true,
    columns: [
      [],
      []
    ],
    tempPics: [], //美丽秘籍内容列表
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
    this.getClassify()
  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {
    if(this.data.page * 10 < this.data.total) {
      this.getArticleList(++this.data.page)
    }
  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  },

  /**
   * 监听键盘输入
   */
  onChange(e) {
    this.setData({ value: e.detail.value })
  },

  /**
   * 搜索店铺
  */
  onConfirm() {
    this.getArticleList(1)
  },

  /**
   * 切换状态
   */
  onTabsChange(e) {
    let current = e.currentTarget.dataset.id
    if (current == this.data.current) {
      return;
    }
    this.setData({
      current,
      page: 1,
    }, () => {
      this.getArticleList(1)
    })
  },

  /**
   * 获取美丽秘籍分类
   * /api/info/classify
  */
  getClassify() {
    get('api/info/classify',{},(res) => {
      this.setData({
        classify: res.data.list
      },() => {
        this.getArticleList()
      })
    })
  },

  /**
   * 获取美丽秘籍列表
   * /api/info
   */
  getArticleList(_page) {
    this.setData({
      spinning: true
    })
    let {
      tempPics,
      classify,
      page,
      value,
      current
    } = this.data;
    get('api/info', {
      page: _page || page,
      limit: 10,
      keyword: value,
      classify_id: classify[current].id,
    }, (res) => {
      res.data.list.map(item => {
        item.create_time = item.create_time.substring(0, 10)
      })
      if (_page == 1 || page == 1) {
        tempPics = []
        this.data.page = 1
      }
      tempPics.push(...res.data.list)
      this.setData({
        tempPics,
        total: res.data.total,
        spinning: false
      })
      this.jsData.isListLoading = true
    })
  },
    //获取图片尺寸数据
    loadPic: function (e) {
      var that = this,
        data = that.data,
        tempPics = data.tempPics,
        index = e.currentTarget.dataset.index
      if (tempPics[index]) {
        //以750为宽度算出相对应的高度
        tempPics[index].height = e.detail.height * 750 / e.detail.width
        tempPics[index].isLoad = true
      }
      that.setData({
        tempPics: tempPics
      }, function () {
        that.finLoadPic()
      })
    },
      //图片加载错误处理
  loadPicError: function (e) {
    var that = this,
      data = that.data,
      tempPics = data.tempPics,
      index = e.currentTarget.dataset.index
    if (tempPics[index]) {
      //图片加载错误时高度固定750，展示为正方形
      tempPics[index].height = 750
      tempPics[index].isLoad = true
    }
    that.setData({
      tempPics: tempPics
    }, function () {
      that.finLoadPic()
    })
  },
    //判断图片是否加载完成
    finLoadPic: function () {
      var that = this,
        data = that.data,
        tempPics = data.tempPics,
        length = tempPics.length,
        fin = true
      for (var i = 0; i < length; i++) {
        if (!tempPics[i].isLoad) {
          fin = false
          break
        }
      }
      if (fin) {
        if (that.jsData.isListLoading) {
          that.jsData.isListLoading = false
          that.renderPage()
        }
      }
    },
      //渲染到瀑布流
  renderPage: function () {
    var that = this,
      data = that.data,
      columns = data.columns,
      tempPics = data.tempPics,
      length = tempPics.length,
      columnsHeight = that.jsData.columnsHeight,
      index = 0
    if (this.data.page == 1) {
      columns = [
        [],
        []
      ]
    }
    for (var i = 0; i < length; i++) {
      index = columnsHeight[1] < columnsHeight[0] ? 1 : 0
      columns[index].push(tempPics[i])
      columnsHeight[index] += tempPics[i].height
    }
    that.setData({
      columns: columns,
      tempPics: []
    })
    that.jsData.columnsHeight = columnsHeight
  },
  onClear() {
    this.setData({
      value: ''
    })
  },
    // 点击跳转美丽秘籍
    goArticleDetail(e) {
      let id = e.currentTarget.dataset.id
      wx.navigateTo({
        url: `/pages/articleDetail/articleDetail?id=${id}`,
      })
    },
})