0
收藏
评论

如何快速开发一个小程序列表页面

在一个小程序里如果大部分页面都是列表展示,每个页面都是复制粘贴,虽然开发效率还蛮高的,但是维护起来会花费更大的力气。以下就是个人解决页面代码大量重复的方法。(方法简单没什么高技术含量)

common_list.js:一个放着重复代码的文件。刷新onPullDownRefresh、加载onReachBottom、设置列表数据setList,这三个方法是最基础的,当然如果业务还有其他的方法也可以放到这个文件。

//common_list.js
module.exports = {
  data: {
    page: 1,
    loadend: false,
    list: [],
    listLength: 0
  },
  onPullDownRefresh() {
    // console.log(11111)
    this.setData({
      page: 1,
      loadend: false
    })
    this.getList(true);
    setTimeout(function () {
      wx.stopPullDownRefresh();
    }, 200);
  },
  onReachBottom() {
    if (this.data.loadend) return
    this.setData({
      page: ++this.data.page
    });
    this.getList();
  },
  /**
   * initType 刷新为true,加载为false或undefined
   * list 初始/加载的数据
   * loadend 数据库加载完毕
   */
  setList(initType, list) {
    if (initType) {
      this.setData({
        list: list.length ? [list] : [],
        listLength: list.length ? 1 : 0
      });
      return
    }
    if (!list.length) {
      this.setData({
        loadend: true
      })
      return
    }
    let len = this.data.list.length;
    this.setData({
      [`list[${len}]`]: list,
      listLength: len + 1
    });
  },
  // 返回顶部
  onScrollTop() {
    wx.pageScrollTo({
      scrollTop: 0,
    });
  },
}

app.js:小程序全局配置,把公共方法放到这。

//app.js
module.exports = {
  listMix: require("./common_list.js"),
  http,//自己封装的wx.request
}

mypage.js mypage.wxml:业务页面

//mypage.wxml
<block wx:for="{{list}}" wx:for-item="listItem" wx:for-index="pid" wx:key="{{pid}}">
  <block wx:for="{{listItem}}" wx:for-item="item" wx:for-index="cid" wx:key="{{cid}}">
    <item item="{{item}}" pid="{{pid}}" cid="{{cid}}"></item>
  </block>
</block>
<!-- 数据加载完毕 -->
<divider content="数据已完全加载" wx:if="{{loadend}}" />
//mypage.js
const App = getApp();
Page({
  ...App.listMix,
  data:Object.assign(App.listMix.data,{}),
  async getList(initType){
      let {page} = this.data;
      let data = {page}
      let res = await App.http('url', data);
      this.setList(initType, res.list);
  },
})
最后一次编辑于  08-12  (未经腾讯允许,不得转载)
复制链接赞 0收藏投诉评论

8 个评论

  • 陈式坚
    陈式坚
    08-12

    用Class就可以,和后端约定好列表格式后很好处理


    08-12
    赞同 11
    回复
  • 老张
    老张
    08-12

    我们用template

    08-12
    赞同
    回复 2
    • 两个鱼头
      两个鱼头
      08-12
      自定义组件不是更好吗?复杂点的业务还能做出类似Vue的filter功能,template还需要引入wxs还不支持es6语法
      08-12
      赞同
      回复
    • 老张
      老张
      08-12回复两个鱼头
      我们这,列表重复的只是wxml部分,如果连js也重复,就会合并成一个page。所以template够了。
      08-12
      赞同
      回复
  • 卢霄霄
    卢霄霄
    08-13

    最后一段代码为啥。。一个用扩展符。。一个用assign。。

    08-13
    赞同
    回复 3
    • 两个鱼头
      两个鱼头
      08-13

      有些页面除了共性,还有特性。有其他data

      08-13
      赞同
      回复
    • 卢霄霄
      卢霄霄
      08-13回复两个鱼头

      data: {

          ...App.listMix.data,

          xxx: xxxx

      }

      那不是应该这么写嘛

      08-13
      赞同
      回复
    • 卢霄霄
      卢霄霄
      08-13回复两个鱼头

      算了。。没啥。。忽略我说的话。。

      08-13
      赞同
      回复