小程序入坑记:懒加载

小程序可以说是非常火热了,开发周期短,页面简洁,数据控制方便,可以说结合了三大框架的特点

小程序的目录结构:

页面以index为例

utils:工具类目录,供全局调用。在utils中封装一个tools工具类(axios获取请求)

class Tools {
  constructor() {

  }
  axios(method, url, data) {
    return new Promise((resolve, reject) => {//promise解决异步,其他操作和axios相似
      wx.request({
        method: method,
        url: url,
        data: JSON.stringify(data),
        header: {
          'content-type': 'application/json'
        },
        success(res) {
          if (res.statusCode === 200) {
            resolve(res.data);//过滤data
          } else {
            reject()
          }
        },
        fail(res) {
          reject(res)
        }
      })
    })
  }
}
export default Tools

之后将页面分成逻辑层和业务层:

逻辑层:在index同目录下新建extend.js,目的是进行数据操作

import tools from '../../utils/tool.js'
class Tools extends tools {
  constructor() {
    super()
  }
  getData(fn, method = 'get', url, data = {}) {//新建一个请求方法,在逻辑层执行一些操作
    this.axios(method, url, data)
      .then((res) => {
        fn(res)
      }).catch((err) => {
        fn(err)
      })
  }
}
export default Tools

业务层:调用逻辑层的方法进行数据渲染

//获取应用实例
const app = getApp()
import Tools from './extend.js'
var tools = new Tools()//实例化方法
Page({
  /**
   * 页面的初始数据
   */
  data: {
    list: []
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function(options) {
    this.loadData()
  },
  loadData() {
    var that = this
    tools.getData(function(res) {//调用逻辑层的方法获取数据
      var list = that.data.list.concat(res)//连接数据进行懒加载
      that.setData({
        list
      })
    }, 'get', 'https://www.easy-mock.com/mock/5c6e58aa511c1f12334d8269/object/getData', {})
  },
  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function() {

  },

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

  },

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

  },

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

  },

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

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function() {
    this.loadData()//触底时加载数据
  },

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

  }
})

index.wxml:

<view class='box'>
  <view wx:for='{{list}}' wx:key='{{item.name}}'>{{item.name}}</view>
</view>

 

posted @ 2019-03-06 11:04  阿宇的编程之旅  阅读(192)  评论(0编辑  收藏  举报