微信小程序ListView

1.WXML代码（粘贴不了，看截图）

列表部分

2.WXSS代码

/* component/ListView.wxss */

.list-view {

  width: 100vw;

  height: auto;

  display: flex;

  flex-direction: column;

}

.list-inner {

  width: 100vw;

  display: flex;

  flex-direction: column;

}

.list-bottom {

  display: flex;

  width: 100vw;

  height: 60rpx;

  color: #898989;

  font-size: 28rpx;

  align-items: center;

  background-color: #ddd;

  justify-content: center;

}

3.JS代码

/*

自定义ListView可声明的属性：

list="{{list}}" //传递的列表数据

divHeight="30"  //分割线的高度

divColor="#ddd" //分割线颜色

*/

var util = require("../../utils/util.js");

var isLoading = false;

var canLoadmore = true;

Component({

  /* 启用多slot支持*/

  options: {

    multipleSlots: true

  },

  /**

  * 组件的属性列表

  */

  properties: {

    //定义间隔数据

    list: {

      type: Array,

      value: [],

    },

    divHeight: {

      type: Number,

      value: 0,

    }

  },

  data: {

    loadMsg: "加载中...",

  },

  /**

  * 组件的方法列表

  */

  methods: {

    onClick: function(e) {

      let index = util.getIndex(e);

      this.triggerEvent('event', index);

      console.log("itemClick" + index);

    },

    loadmore: function() {

      if (canLoadmore) {

        isLoading = true;

        this.setData({

          isLoading: isLoading

        })

      }

    },

    setNoMore: function() {

      canLoadmore = false;

      this.setComplete();

    },

    setComplete: function() {

      isLoading = false;

      this.setData({

        isLoading: isLoading

      })

    }

  }

})