feats

package.json

@@ -43,6 +43,7 @@
     "@tarojs/taro": "3.0.13",
     "lodash": "4.17.15",
     "lodash.groupby": "^4.6.0",
+    "miniprogram-recycle-view": "^0.1.5",
     "react": "^16.10.0",
     "react-dom": "^16.10.0",
     "react-redux": "^7.2.2",
@@ -53,14 +54,14 @@
     "@babel/core": "^7.8.0",
     "@tarojs/mini-runner": "3.0.13",
     "@tarojs/webpack-runner": "3.0.13",
+    "@types/react": "^16.0.0",
     "@types/webpack-env": "^1.13.6",
     "babel-preset-taro": "3.0.13",
     "eslint": "^6.8.0",
     "eslint-config-taro": "3.0.13",
-    "stylelint": "9.3.0",
-    "@types/react": "^16.0.0",
-    "eslint-plugin-react": "^7.8.2",
     "eslint-plugin-import": "^2.12.0",
-    "eslint-plugin-react-hooks": "^1.6.1"
+    "eslint-plugin-react": "^7.8.2",
+    "eslint-plugin-react-hooks": "^1.6.1",
+    "stylelint": "9.3.0"
   }
 }

src/app.config.js

@@ -19,5 +19,9 @@ export default {
     navigationBarBackgroundColor: '#fff',
     navigationBarTitleText: 'WeChat',
     navigationBarTextStyle: 'black'
+  },
+  usingComponents: {
+    "recycle-view": "./compents/miniprogram-recycle-view/recycle-view",
+    "recycle-item": "./compents/miniprogram-recycle-view/recycle-item"
   }
 }

src/compents/RecycleList/index.jsx

@@ -0,0 +1,70 @@
+import React, { useEffect, useRef, useState } from 'react'
+import Taro from '@tarojs/taro'
+
+export default props => {
+  const id = useRef(`vlist-${Math.random().toString(36).substring(2)}`)
+
+  const [width, setWidth] = useState()
+  const [height, setHeight] = useState()
+  
+  const hanldeScrollToLower = e => {
+    if ((props.list || []).length >= (props.total - 0)) {
+      return
+    }
+
+    if (props.onScrollToLower) {
+      props.onScrollToLower(e)
+    }
+  }
+  
+
+  useEffect(() => {
+    let sysInfo = {}
+    if (!props.width || !props.height) {
+      sysInfo = Taro.getSystemInfoSync()
+    }
+
+    if (!props.width) {
+      setWidth(sysInfo.safeArea.width)
+    } else {
+      setWidth(props.width)
+    }
+
+    if (!props.height) {
+      setHeight(sysInfo.safeArea.height)
+    } else {
+      setHeight(props.height)
+    }
+  }, [props.width, props.height])
+
+  return (
+    <recycle-view
+      id={id.current}
+      width={width}
+      height={height}
+      lower-threshold={props.lowerThreshold || 50}
+      upper-threshold={props.upperThreshold || 50}
+      onScroll={props.onScroll}
+      onScrollToLower={hanldeScrollToLower}
+      onScrollToUpper={props.onScrollToUpper}
+      scroll-top={true}
+      scroll-y={true}
+      batch="{{batchSetRecycleData}}"
+      enable-back-to-top={true}
+    >
+      {
+        props.before && <view slot="before">{props.before}</view>
+      }
+      {
+        (props.list || []).map((item, inx) => (
+          <recycle-item key={props.dataKey? item[props.dataKey] : inx}>
+            {props.renderItem(item)}
+          </recycle-item>
+        ))
+      }
+      {
+        props.after && <view slot="after">{props.after}</view>
+      }      
+    </recycle-view>
+  )
+}

src/compents/miniprogram-recycle-view/index.d.ts

@@ -0,0 +1,45 @@
+declare namespace recycleContext {
+    interface itemSize {
+        width: number;
+        height: number;
+    }
+    
+    type Component = any;
+    type Page = any;
+    
+    type itemSizeFunc<T> = (item: T, index: number) => itemSize
+    
+    interface options<T> {
+        id: string;
+        dataKey: string;
+        page: Component | Page;
+        itemSize: itemSizeFunc<T> | itemSize;
+        useInPage?: boolean;
+        root?: Page;
+    }
+    
+    interface position {
+        left: number;
+        top: number;
+        width: number;
+        height: number;
+    }
+    
+    interface RecycleContext<T> {
+        append(list: T[], callback?: () => void): RecycleContext<T>
+        appendList(list: T[], callback?: () => void): RecycleContext<T>
+        splice(begin: number, deleteCount: number, appendList: T[], callback?: () => void): RecycleContext<T>;
+        updateList(beginIndex: number, list: T[], callback?: () => void): RecycleContext<T>
+        update(beginIndex: number, list: T[], callback?: () => void): RecycleContext<T>
+        destroy(): RecycleContext<T>
+        forceUpdate(callback: () => void, reinitSlot: boolean): RecycleContext<T>
+        getBoundingClientRect(index: number | undefined): position | position[]
+        getScrollTop(): number;
+        transformRpx(rpx: number, addPxSuffix?: string): number;
+        getViewportItems(inViewportPx: number): T[]
+        getList(): T[]
+    }
+}
+declare function createRecycleContext<T>(op: recycleContext.options<T>): recycleContext.RecycleContext<T>
+
+export = createRecycleContext;

src/compents/miniprogram-recycle-view/index.js

@@ -0,0 +1,851 @@
+module.exports =
+/******/ (function(modules) { // webpackBootstrap
+/******/ 	// The module cache
+/******/ 	var installedModules = {};
+/******/
+/******/ 	// The require function
+/******/ 	function __webpack_require__(moduleId) {
+/******/
+/******/ 		// Check if module is in cache
+/******/ 		if(installedModules[moduleId]) {
+/******/ 			return installedModules[moduleId].exports;
+/******/ 		}
+/******/ 		// Create a new module (and put it into the cache)
+/******/ 		var module = installedModules[moduleId] = {
+/******/ 			i: moduleId,
+/******/ 			l: false,
+/******/ 			exports: {}
+/******/ 		};
+/******/
+/******/ 		// Execute the module function
+/******/ 		modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
+/******/
+/******/ 		// Flag the module as loaded
+/******/ 		module.l = true;
+/******/
+/******/ 		// Return the exports of the module
+/******/ 		return module.exports;
+/******/ 	}
+/******/
+/******/
+/******/ 	// expose the modules object (__webpack_modules__)
+/******/ 	__webpack_require__.m = modules;
+/******/
+/******/ 	// expose the module cache
+/******/ 	__webpack_require__.c = installedModules;
+/******/
+/******/ 	// define getter function for harmony exports
+/******/ 	__webpack_require__.d = function(exports, name, getter) {
+/******/ 		if(!__webpack_require__.o(exports, name)) {
+/******/ 			Object.defineProperty(exports, name, { enumerable: true, get: getter });
+/******/ 		}
+/******/ 	};
+/******/
+/******/ 	// define __esModule on exports
+/******/ 	__webpack_require__.r = function(exports) {
+/******/ 		if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
+/******/ 			Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+/******/ 		}
+/******/ 		Object.defineProperty(exports, '__esModule', { value: true });
+/******/ 	};
+/******/
+/******/ 	// create a fake namespace object
+/******/ 	// mode & 1: value is a module id, require it
+/******/ 	// mode & 2: merge all properties of value into the ns
+/******/ 	// mode & 4: return value when already ns object
+/******/ 	// mode & 8|1: behave like require
+/******/ 	__webpack_require__.t = function(value, mode) {
+/******/ 		if(mode & 1) value = __webpack_require__(value);
+/******/ 		if(mode & 8) return value;
+/******/ 		if((mode & 4) && typeof value === 'object' && value && value.__esModule) return value;
+/******/ 		var ns = Object.create(null);
+/******/ 		__webpack_require__.r(ns);
+/******/ 		Object.defineProperty(ns, 'default', { enumerable: true, value: value });
+/******/ 		if(mode & 2 && typeof value != 'string') for(var key in value) __webpack_require__.d(ns, key, function(key) { return value[key]; }.bind(null, key));
+/******/ 		return ns;
+/******/ 	};
+/******/
+/******/ 	// getDefaultExport function for compatibility with non-harmony modules
+/******/ 	__webpack_require__.n = function(module) {
+/******/ 		var getter = module && module.__esModule ?
+/******/ 			function getDefault() { return module['default']; } :
+/******/ 			function getModuleExports() { return module; };
+/******/ 		__webpack_require__.d(getter, 'a', getter);
+/******/ 		return getter;
+/******/ 	};
+/******/
+/******/ 	// Object.prototype.hasOwnProperty.call
+/******/ 	__webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
+/******/
+/******/ 	// __webpack_public_path__
+/******/ 	__webpack_require__.p = "";
+/******/
+/******/
+/******/ 	// Load entry module and return exports
+/******/ 	return __webpack_require__(__webpack_require__.s = 2);
+/******/ })
+/************************************************************************/
+/******/ ([
+/* 0 */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+
+var isIPhone = false;
+var deviceWidth = void 0;
+var deviceDPR = void 0;
+var BASE_DEVICE_WIDTH = 750;
+var checkDeviceWidth = function checkDeviceWidth() {
+  var info = wx.getSystemInfoSync();
+  // console.log('info', info)
+  isIPhone = info.platform === 'ios';
+  var newDeviceWidth = info.screenWidth || 375;
+  var newDeviceDPR = info.pixelRatio || 2;
+
+  if (!isIPhone) {
+    // HACK switch width and height when landscape
+    // const newDeviceHeight = info.screenHeight || 375
+    // 暂时不处理转屏的情况
+  }
+
+  if (newDeviceWidth !== deviceWidth || newDeviceDPR !== deviceDPR) {
+    deviceWidth = newDeviceWidth;
+    deviceDPR = newDeviceDPR;
+    // console.info('Updated device width: ' + newDeviceWidth + 'px DPR ' + newDeviceDPR)
+  }
+};
+checkDeviceWidth();
+
+var eps = 1e-4;
+var transformByDPR = function transformByDPR(number) {
+  if (number === 0) {
+    return 0;
+  }
+  number = number / BASE_DEVICE_WIDTH * deviceWidth;
+  number = Math.floor(number + eps);
+  if (number === 0) {
+    if (deviceDPR === 1 || !isIPhone) {
+      return 1;
+    }
+    return 0.5;
+  }
+  return number;
+};
+
+var rpxRE = /([+-]?\d+(?:\.\d+)?)rpx/gi;
+// const inlineRpxRE = /(?::|\s|\(|\/)([+-]?\d+(?:\.\d+)?)rpx/g
+
+var transformRpx = function transformRpx(style, inline) {
+  if (typeof style !== 'string') {
+    return style;
+  }
+  var re = rpxRE;
+  return style.replace(re, function (match, num) {
+    return transformByDPR(Number(num)) + (inline ? 'px' : '');
+  });
+};
+
+module.exports = {
+  transformRpx: transformRpx
+};
+
+/***/ }),
+/* 1 */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+
+module.exports = {};
+
+/***/ }),
+/* 2 */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+
+/**
+ * recycle-view组件的api使用
+ * 提供wx.createRecycleContext进行管理功能
+ */
+var RecycleContext = __webpack_require__(3);
+
+/**
+ * @params options参数是object对象，展开的结构如下
+      id: recycle-view的id
+      dataKey: recycle-item的wx:for绑定的数据变量
+      page: recycle-view所在的页面或组件的实例
+      itemSize: 函数或者是Object对象，生成每个recycle-item的宽和高
+ * @return RecycleContext对象
+ */
+module.exports = function (options) {
+  return new RecycleContext(options);
+};
+
+/***/ }),
+/* 3 */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+
+var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; };
+
+/* eslint complexity: ["error", {"max": 50}] */
+var recycleData = __webpack_require__(1);
+var recycleViewportChangeFunc = __webpack_require__(4);
+var transformRpx = __webpack_require__(0);
+
+var RECT_SIZE = 200;
+
+// eslint-disable-next-line no-complexity
+function RecycleContext(_ref) {
+  var _this = this;
+
+  var id = _ref.id,
+      dataKey = _ref.dataKey,
+      page = _ref.page,
+      itemSize = _ref.itemSize,
+      useInPage = _ref.useInPage,
+      placeholderClass = _ref.placeholderClass,
+      root = _ref.root;
+
+  if (!id || !dataKey || !page || !itemSize) {
+    throw new Error('parameter id, dataKey, page, itemSize is required');
+  }
+  if (typeof itemSize !== 'function' && (typeof itemSize === 'undefined' ? 'undefined' : _typeof(itemSize)) !== 'object') {
+    throw new Error('parameter itemSize must be function or object with key width and height');
+  }
+  if ((typeof itemSize === 'undefined' ? 'undefined' : _typeof(itemSize)) === 'object' && (!itemSize.width || !itemSize.height) && (!itemSize.props || !itemSize.queryClass || !itemSize.dataKey)) {
+    throw new Error('parameter itemSize must be function or object with key width and height');
+  }
+  this.id = id;
+  this.dataKey = dataKey;
+  this.page = page;
+  // 加root参数给useInPage单独使用
+  this.root = root;
+  this.placeholderClass = placeholderClass;
+  page._recycleViewportChange = recycleViewportChangeFunc;
+  this.comp = page.selectComponent('#' + id);
+  this.itemSize = itemSize;
+  this.itemSizeOpt = itemSize;
+  // if (!this.comp) {
+  // throw `<recycle-view> with id ${id} not found`
+  // }
+  this.useInPage = useInPage || false;
+  if (this.comp) {
+    this.comp.context = this;
+    this.comp.setPage(page);
+    this.comp.setUseInPage(this.useInPage);
+  }
+  if (this.useInPage && !this.root) {
+    throw new Error('parameter root is required when useInPage is true');
+  }
+  if (this.useInPage) {
+    this.oldPageScroll = this.root.onPageScroll;
+    // 重写onPageScroll事件
+    this.root.onPageScroll = function (e) {
+      // this.checkComp();
+      if (_this.comp) {
+        _this.comp._scrollViewDidScroll({
+          detail: {
+            scrollLeft: 0,
+            scrollTop: e.scrollTop
+          }
+        });
+      }
+      _this.oldPageScroll.apply(_this.root, [e]);
+    };
+    this.oldReachBottom = this.root.onReachBottom;
+    this.root.onReachBottom = function (e) {
+      if (_this.comp) {
+        _this.comp.triggerEvent('scrolltolower', {});
+      }
+      _this.oldReachBottom.apply(_this.root, [e]);
+    };
+    this.oldPullDownRefresh = this.root.onPullDownRefresh;
+    this.root.onPullDownRefresh = function (e) {
+      if (_this.comp) {
+        _this.comp.triggerEvent('scrolltoupper', {});
+      }
+      _this.oldPullDownRefresh.apply(_this.root, [e]);
+    };
+  }
+}
+RecycleContext.prototype.checkComp = function () {
+  if (!this.comp) {
+    this.comp = this.page.selectComponent('#' + this.id);
+    if (this.comp) {
+      this.comp.setUseInPage(this.useInPage);
+      this.comp.context = this;
+      this.comp.setPage(this.page);
+    } else {
+      throw new Error('the recycle-view correspond to this context is detached, pls create another RecycleContext');
+    }
+  }
+};
+RecycleContext.prototype.appendList = function (list, cb) {
+  this.checkComp();
+  var id = this.id;
+  var dataKey = this.dataKey;
+  if (!recycleData[id]) {
+    recycleData[id] = {
+      key: dataKey,
+      id: id,
+      list: list,
+      sizeMap: {},
+      sizeArray: []
+    };
+  } else {
+    recycleData[id].dataKey = dataKey;
+    recycleData[id].list = recycleData[id].list.concat(list);
+  }
+  this._forceRerender(id, cb);
+  return this;
+};
+RecycleContext.prototype._forceRerender = function (id, cb) {
+  this.isDataReady = true; // 首次调用说明数据已经ready了
+  // 动态计算高度并缓存
+  var that = this;
+  var allrect = null;
+  var parentRect = null;
+  var count = 0;
+
+  function setPlaceholderImage() {
+    if (!allrect || !parentRect) return;
+    var svgRects = [];
+    for (var i = 0; i < count; i++) {
+      svgRects.push({
+        left: allrect[i].left - parentRect.left,
+        top: allrect[i].top - parentRect.top,
+        width: allrect[i].width,
+        height: allrect[i].height
+      });
+    }
+    that.comp.setPlaceholderImage(svgRects, {
+      width: parentRect.width,
+      height: parentRect.height
+    });
+  }
+  function newcb() {
+    if (cb) {
+      cb();
+    }
+    // 计算placeholder, 只有在动态计算高度的时候才支持
+    if (that.autoCalculateSize && that.placeholderClass) {
+      var newQueryClass = [];
+      that.placeholderClass.forEach(function (item) {
+        newQueryClass.push('.' + that.itemSizeOpt.queryClass + ' .' + item);
+      });
+      // newQueryClass.push(`.` + that.itemSizeOpt.queryClass)
+      count = newQueryClass.length;
+      wx.createSelectorQuery().selectAll(newQueryClass.join(',')).boundingClientRect(function (rect) {
+        if (rect.length < count) return;
+        allrect = rect;
+        setPlaceholderImage();
+      }).exec();
+      wx.createSelectorQuery().select('.' + that.itemSizeOpt.queryClass).boundingClientRect(function (rect) {
+        parentRect = rect;
+        setPlaceholderImage();
+      }).exec();
+    }
+  }
+  if (Object.prototype.toString.call(this.itemSizeOpt) === '[object Object]' && this.itemSizeOpt && !this.itemSizeOpt.width) {
+    this._recalculateSizeByProp(recycleData[id].list, function (sizeData) {
+      recycleData[id].sizeMap = sizeData.map;
+      recycleData[id].sizeArray = sizeData.array;
+      // 触发强制渲染
+      that.comp.forceUpdate(newcb);
+    });
+    return;
+  }
+  var sizeData = this._recalculateSize(recycleData[id].list);
+  recycleData[id].sizeMap = sizeData.map;
+  // console.log('size is', sizeData.array, sizeData.map, 'totalHeight', sizeData.totalHeight)
+  // console.log('sizeArray', sizeData.array)
+  recycleData[id].sizeArray = sizeData.array;
+  // 触发强制渲染
+  this.comp.forceUpdate(cb);
+};
+function getValue(item, key) {
+  if (!key) return item;
+  if (typeof item[key] !== 'undefined') return item[key];
+  var keyItems = key.split('.');
+  for (var i = 0; i < keyItems.length; i++) {
+    item = item[keyItems[i]];
+    if (typeof item === 'undefined' || (typeof item === 'undefined' ? 'undefined' : _typeof(item)) === 'object' && !item) {
+      return undefined;
+    }
+  }
+  return item;
+}
+function getValues(item, keys) {
+  if (Object.prototype.toString.call(keys) !== '[object Array]') {
+    keys = [keys];
+  }
+  var vals = {};
+  for (var i = 0; i < keys.length; i++) {
+    vals[keys[i]] = getValue(item, keys[i]);
+  }
+  return vals;
+}
+function isArray(arr) {
+  return Object.prototype.toString.call(arr) === '[object Array]';
+}
+function isSamePureValue(item1, item2) {
+  if ((typeof item1 === 'undefined' ? 'undefined' : _typeof(item1)) !== (typeof item2 === 'undefined' ? 'undefined' : _typeof(item2))) return false;
+  if (isArray(item1) && isArray(item2)) {
+    if (item1.length !== item2.length) return false;
+    for (var i = 0; i < item1.length; i++) {
+      if (item1[i] !== item2[i]) return false;
+    }
+    return true;
+  }
+  return item1 === item2;
+}
+function isSameValue(item1, item2, keys) {
+  if (!isArray(keys)) {
+    keys = [keys];
+  }
+  for (var i = 0; i < keys.length; i++) {
+    if (!isSamePureValue(getValue(item1, keys[i]), getValue(item2, keys[i]))) return false;
+  }
+  return true;
+}
+RecycleContext.prototype._recalculateSizeByProp = function (list, cb) {
+  var itemSize = this.itemSizeOpt;
+  var propValueMap = this.propValueMap || [];
+  var calcNewItems = [];
+  var needCalcPropIndex = [];
+  if (itemSize.cacheKey) {
+    propValueMap = wx.getStorageSync(itemSize.cacheKey) || [];
+    // eslint-disable-next-line no-console
+    // console.log('[recycle-view] get itemSize from cache', propValueMap)
+  }
+  this.autoCalculateSize = true;
+  var item2PropValueMap = [];
+  for (var i = 0; i < list.length; i++) {
+    var item2PropValueIndex = propValueMap.length;
+    if (!propValueMap.length) {
+      var val = getValues(list[i], itemSize.props);
+      val.__index__ = i;
+      propValueMap.push(val);
+      calcNewItems.push(list[i]);
+      needCalcPropIndex.push(item2PropValueIndex);
+      item2PropValueMap.push({
+        index: i,
+        sizeIndex: item2PropValueIndex
+      });
+      continue;
+    }
+    var found = false;
+    for (var j = 0; j < propValueMap.length; j++) {
+      if (isSameValue(propValueMap[j], list[i], itemSize.props)) {
+        item2PropValueIndex = j;
+        found = true;
+        break;
+      }
+    }
+    if (!found) {
+      var _val = getValues(list[i], itemSize.props);
+      _val.__index__ = i;
+      propValueMap.push(_val);
+      calcNewItems.push(list[i]);
+      needCalcPropIndex.push(item2PropValueIndex);
+    }
+    item2PropValueMap.push({
+      index: i,
+      sizeIndex: item2PropValueIndex
+    });
+  }
+  // this.item2PropValueMap = item2PropValueMap
+  this.propValueMap = propValueMap;
+  if (propValueMap.length > 10) {
+    // eslint-disable-next-line no-console
+    console.warn('[recycle-view] get itemSize count exceed maximum of 10, now got', propValueMap);
+  }
+  // console.log('itemsize', propValueMap, item2PropValueMap)
+  // 预先渲染
+  var that = this;
+  function newItemSize(item, index) {
+    var sizeIndex = item2PropValueMap[index];
+    if (!sizeIndex) {
+      // eslint-disable-next-line no-console
+      console.error('[recycle-view] auto calculate size array error, no map size found', item, index, item2PropValueMap);
+      throw new Error('[recycle-view] auto calculate size array error, no map size found');
+    }
+    var size = propValueMap[sizeIndex.sizeIndex];
+    if (!size) {
+      // eslint-disable-next-line no-console
+      console.log('[recycle-view] auto calculate size array error, no size found', item, index, sizeIndex, propValueMap);
+      throw new Error('[recycle-view] auto calculate size array error, no size found');
+    }
+    return {
+      width: size.width,
+      height: size.height
+    };
+  }
+  function sizeReady(rects) {
+    rects.forEach(function (rect, index) {
+      var propValueIndex = needCalcPropIndex[index];
+      propValueMap[propValueIndex].width = rect.width;
+      propValueMap[propValueIndex].height = rect.height;
+    });
+    that.itemSize = newItemSize;
+    var sizeData = that._recalculateSize(list);
+    if (itemSize.cacheKey) {
+      wx.setStorageSync(itemSize.cacheKey, propValueMap); // 把数据缓存起来
+    }
+    if (cb) {
+      cb(sizeData);
+    }
+  }
+  if (calcNewItems.length) {
+    var obj = {};
+    obj[itemSize.dataKey] = calcNewItems;
+    this.page.setData(obj, function () {
+      // wx.createSelectorQuery().select(itemSize.componentClass).boundingClientRect(rects => {
+      //   compSize = rects;
+      //   if (compSize && allItemSize) {
+      //     sizeReady();
+      //   }
+      // }).exec();
+      wx.createSelectorQuery().selectAll('.' + itemSize.queryClass).boundingClientRect(function (rects) {
+        sizeReady(rects);
+      }).exec();
+    });
+  } else {
+    that.itemSize = newItemSize;
+    var sizeData = that._recalculateSize(list);
+    if (cb) {
+      cb(sizeData);
+    }
+  }
+};
+// 当before和after这2个slot发生变化的时候调用一下此接口
+RecycleContext.prototype._recalculateSize = function (list) {
+  // 遍历所有的数据
+  // 应该最多就千量级的, 遍历没有问题
+  var sizeMap = {};
+  var func = this.itemSize;
+  var funcExist = typeof func === 'function';
+  var comp = this.comp;
+  var compData = comp.data;
+  var offsetLeft = 0;
+  var offsetTop = 0;
+  var line = 0;
+  var column = 0;
+  var sizeArray = [];
+  var listLen = list.length;
+  // 把整个页面拆分成200*200的很多个方格, 判断每个数据落在哪个方格上
+  for (var i = 0; i < listLen; i++) {
+    list[i].__index__ = i;
+    var itemSize = {};
+    // 获取到每一项的宽和高
+    if (funcExist) {
+      // 必须保证返回的每一行的高度一样
+      itemSize = func && func.call(this, list[i], i);
+    } else {
+      itemSize = {
+        width: func.width,
+        height: func.height
+      };
+    }
+    itemSize = Object.assign({}, itemSize);
+    sizeArray.push(itemSize);
+    // 判断数据落到哪个方格上
+    // 超过了宽度, 移动到下一行, 再根据高度判断是否需要移动到下一个方格
+    if (offsetLeft + itemSize.width > compData.width) {
+      column = 0;
+      offsetLeft = itemSize.width;
+      // Fixed issue #22
+      if (sizeArray.length >= 2) {
+        offsetTop += sizeArray[sizeArray.length - 2].height || 0; // 加上最后一个数据的高度
+      } else {
+        offsetTop += itemSize.height;
+      }
+      // offsetTop += sizeArray[sizeArray.length - 2].height // 加上最后一个数据的高度
+      // 根据高度判断是否需要移动到下一个方格
+      if (offsetTop >= RECT_SIZE * (line + 1)) {
+        // fix: 当区块比较大时，会缺失块区域信息
+        var lastIdx = i - 1;
+        var lastLine = line;
+
+        line += parseInt((offsetTop - RECT_SIZE * line) / RECT_SIZE, 10);
+
+        for (var idx = lastLine; idx < line; idx++) {
+          var _key = idx + '.' + column;
+          if (!sizeMap[_key]) {
+            sizeMap[_key] = [];
+          }
+          sizeMap[_key].push(lastIdx);
+        }
+      }
+
+      // 新起一行的元素, beforeHeight是前一个元素的beforeHeight和height相加
+      if (i === 0) {
+        itemSize.beforeHeight = 0;
+      } else {
+        var prevItemSize = sizeArray[sizeArray.length - 2];
+        itemSize.beforeHeight = prevItemSize.beforeHeight + prevItemSize.height;
+      }
+    } else {
+      if (offsetLeft >= RECT_SIZE * (column + 1)) {
+        column++;
+      }
+      offsetLeft += itemSize.width;
+      if (i === 0) {
+        itemSize.beforeHeight = 0;
+      } else {
+        // 同一行的元素, beforeHeight和前面一个元素的beforeHeight一样
+        itemSize.beforeHeight = sizeArray[sizeArray.length - 2].beforeHeight;
+      }
+    }
+    var key = line + '.' + column;
+    if (!sizeMap[key]) {
+      sizeMap[key] = [];
+    }
+    sizeMap[key].push(i);
+
+    // fix: 当区块比较大时，会缺失块区域信息
+    if (listLen - 1 === i && itemSize.height > RECT_SIZE) {
+      var _lastIdx = line;
+      offsetTop += itemSize.height;
+      line += parseInt((offsetTop - RECT_SIZE * line) / RECT_SIZE, 10);
+      for (var _idx = _lastIdx; _idx <= line; _idx++) {
+        var _key2 = _idx + '.' + column;
+        if (!sizeMap[_key2]) {
+          sizeMap[_key2] = [];
+        }
+        sizeMap[_key2].push(i);
+      }
+    }
+  }
+  // console.log('sizeMap', sizeMap)
+  var obj = {
+    array: sizeArray,
+    map: sizeMap,
+    totalHeight: sizeArray.length ? sizeArray[sizeArray.length - 1].beforeHeight + sizeArray[sizeArray.length - 1].height : 0
+  };
+  comp.setItemSize(obj);
+  return obj;
+};
+RecycleContext.prototype.deleteList = function (beginIndex, count, cb) {
+  this.checkComp();
+  var id = this.id;
+  if (!recycleData[id]) {
+    return this;
+  }
+  recycleData[id].list.splice(beginIndex, count);
+  this._forceRerender(id, cb);
+  return this;
+};
+RecycleContext.prototype.updateList = function (beginIndex, list, cb) {
+  this.checkComp();
+  var id = this.id;
+  if (!recycleData[id]) {
+    return this;
+  }
+  var len = recycleData[id].list.length;
+  for (var i = 0; i < list.length && beginIndex < len; i++) {
+    recycleData[id].list[beginIndex++] = list[i];
+  }
+  this._forceRerender(id, cb);
+  return this;
+};
+RecycleContext.prototype.update = RecycleContext.prototype.updateList;
+RecycleContext.prototype.splice = function (begin, deleteCount, appendList, cb) {
+  this.checkComp();
+  var id = this.id;
+  var dataKey = this.dataKey;
+  // begin是数组
+  if ((typeof begin === 'undefined' ? 'undefined' : _typeof(begin)) === 'object' && begin.length) {
+    cb = deleteCount;
+    appendList = begin;
+  }
+  if (typeof appendList === 'function') {
+    cb = appendList;
+    appendList = [];
+  }
+  if (!recycleData[id]) {
+    recycleData[id] = {
+      key: dataKey,
+      id: id,
+      list: appendList || [],
+      sizeMap: {},
+      sizeArray: []
+    };
+  } else {
+    recycleData[id].dataKey = dataKey;
+    var list = recycleData[id].list;
+    if (appendList && appendList.length) {
+      list.splice.apply(list, [begin, deleteCount].concat(appendList));
+    } else {
+      list.splice(begin, deleteCount);
+    }
+  }
+  this._forceRerender(id, cb);
+  return this;
+};
+
+RecycleContext.prototype.append = RecycleContext.prototype.appendList;
+
+RecycleContext.prototype.destroy = function () {
+  if (this.useInPage) {
+    this.page.onPullDownRefresh = this.oldPullDownRefresh;
+    this.page.onReachBottom = this.oldReachBottom;
+    this.page.onPageScroll = this.oldPageScroll;
+    this.oldPageScroll = this.oldReachBottom = this.oldPullDownRefresh = null;
+  }
+  this.page = null;
+  this.comp = null;
+  if (recycleData[this.id]) {
+    delete recycleData[this.id];
+  }
+  return this;
+};
+// 重新更新下页面的数据
+RecycleContext.prototype.forceUpdate = function (cb, reinitSlot) {
+  var _this2 = this;
+
+  this.checkComp();
+  if (reinitSlot) {
+    this.comp.reRender(function () {
+      _this2._forceRerender(_this2.id, cb);
+    });
+  } else {
+    this._forceRerender(this.id, cb);
+  }
+  return this;
+};
+RecycleContext.prototype.getBoundingClientRect = function (index) {
+  this.checkComp();
+  if (!recycleData[this.id]) {
+    return null;
+  }
+  var sizeArray = recycleData[this.id].sizeArray;
+  if (!sizeArray || !sizeArray.length) {
+    return null;
+  }
+  if (typeof index === 'undefined') {
+    var list = [];
+    for (var i = 0; i < sizeArray.length; i++) {
+      list.push({
+        left: 0,
+        top: sizeArray[i].beforeHeight,
+        width: sizeArray[i].width,
+        height: sizeArray[i].height
+      });
+    }
+    return list;
+  }
+  index = parseInt(index, 10);
+  if (index >= sizeArray.length || index < 0) return null;
+  return {
+    left: 0,
+    top: sizeArray[index].beforeHeight,
+    width: sizeArray[index].width,
+    height: sizeArray[index].height
+  };
+};
+RecycleContext.prototype.getScrollTop = function () {
+  this.checkComp();
+  return this.comp.currentScrollTop || 0;
+};
+// 将px转化为rpx
+RecycleContext.prototype.transformRpx = RecycleContext.transformRpx = function (str, addPxSuffix) {
+  if (typeof str === 'number') str += 'rpx';
+  return parseFloat(transformRpx.transformRpx(str, addPxSuffix));
+};
+RecycleContext.prototype.getViewportItems = function (inViewportPx) {
+  this.checkComp();
+  var indexes = this.comp.getIndexesInViewport(inViewportPx);
+  if (indexes.length <= 0) return [];
+  var viewportItems = [];
+  var list = recycleData[this.id].list;
+  for (var i = 0; i < indexes.length; i++) {
+    viewportItems.push(list[indexes[i]]);
+  }
+  return viewportItems;
+};
+RecycleContext.prototype.getTotalHeight = function () {
+  this.checkComp();
+  return this.comp.getTotalHeight();
+};
+// 返回完整的列表数据
+RecycleContext.prototype.getList = function () {
+  if (!recycleData[this.id]) {
+    return [];
+  }
+  return recycleData[this.id].list;
+};
+module.exports = RecycleContext;
+
+/***/ }),
+/* 4 */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+
+/* eslint complexity: ["error", {"max": 50}] */
+var recycleData = __webpack_require__(1);
+
+module.exports = function (e, cb) {
+  var detail = e.detail;
+  // console.log('data change transfer use time', Date.now() - e.detail.timeStamp)
+  var newList = [];
+  var item = recycleData[detail.id];
+  // 边界值判断, 避免造成异常, 假设先调用了createRecycleContext, 然后再延迟2s调用append插入数据的情况
+  if (!item || !item.list) return;
+  var dataList = item.list;
+  var pos = detail.data;
+  var beginIndex = pos.beginIndex;
+  var endIndex = pos.endIndex;
+  item.pos = pos;
+  // 加ignoreBeginIndex和ignoreEndIndex
+  if (typeof beginIndex === 'undefined' || beginIndex === -1 || typeof endIndex === 'undefined' || endIndex === -1) {
+    newList = [];
+  } else {
+    var i = -1;
+    for (i = beginIndex; i < dataList.length && i <= endIndex; i++) {
+      if (i >= pos.ignoreBeginIndex && i <= pos.ignoreEndIndex) continue;
+      newList.push(dataList[i]);
+    }
+  }
+  var obj = {
+    // batchSetRecycleData: !this.data.batchSetRecycleData
+  };
+  obj[item.key] = newList;
+  var comp = this.selectComponent('#' + detail.id);
+  obj[comp.data.batchKey] = !this.data.batchSetRecycleData;
+  comp._setInnerBeforeAndAfterHeight({
+    beforeHeight: pos.minTop,
+    afterHeight: pos.afterHeight
+  });
+  this.setData(obj, function () {
+    if (typeof cb === 'function') {
+      cb();
+    }
+  });
+  // Fix #1
+  // 去掉了batchSetDataKey，支持一个页面内显示2个recycle-view
+  // const groupSetData = () => {
+  //   this.setData(obj)
+  //   comp._recycleInnerBatchDataChanged(() => {
+  //     if (typeof cb === 'function') {
+  //       cb()
+  //     }
+  //   })
+  // }
+  // if (typeof this.groupSetData === 'function') {
+  //   this.groupSetData(groupSetData)
+  // } else {
+  //   groupSetData()
+  // }
+};
+
+/***/ })
+/******/ ]);

src/compents/miniprogram-recycle-view/recycle-item.js

@@ -0,0 +1,126 @@
+module.exports =
+/******/ (function(modules) { // webpackBootstrap
+/******/ 	// The module cache
+/******/ 	var installedModules = {};
+/******/
+/******/ 	// The require function
+/******/ 	function __webpack_require__(moduleId) {
+/******/
+/******/ 		// Check if module is in cache
+/******/ 		if(installedModules[moduleId]) {
+/******/ 			return installedModules[moduleId].exports;
+/******/ 		}
+/******/ 		// Create a new module (and put it into the cache)
+/******/ 		var module = installedModules[moduleId] = {
+/******/ 			i: moduleId,
+/******/ 			l: false,
+/******/ 			exports: {}
+/******/ 		};
+/******/
+/******/ 		// Execute the module function
+/******/ 		modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
+/******/
+/******/ 		// Flag the module as loaded
+/******/ 		module.l = true;
+/******/
+/******/ 		// Return the exports of the module
+/******/ 		return module.exports;
+/******/ 	}
+/******/
+/******/
+/******/ 	// expose the modules object (__webpack_modules__)
+/******/ 	__webpack_require__.m = modules;
+/******/
+/******/ 	// expose the module cache
+/******/ 	__webpack_require__.c = installedModules;
+/******/
+/******/ 	// define getter function for harmony exports
+/******/ 	__webpack_require__.d = function(exports, name, getter) {
+/******/ 		if(!__webpack_require__.o(exports, name)) {
+/******/ 			Object.defineProperty(exports, name, { enumerable: true, get: getter });
+/******/ 		}
+/******/ 	};
+/******/
+/******/ 	// define __esModule on exports
+/******/ 	__webpack_require__.r = function(exports) {
+/******/ 		if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
+/******/ 			Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+/******/ 		}
+/******/ 		Object.defineProperty(exports, '__esModule', { value: true });
+/******/ 	};
+/******/
+/******/ 	// create a fake namespace object
+/******/ 	// mode & 1: value is a module id, require it
+/******/ 	// mode & 2: merge all properties of value into the ns
+/******/ 	// mode & 4: return value when already ns object
+/******/ 	// mode & 8|1: behave like require
+/******/ 	__webpack_require__.t = function(value, mode) {
+/******/ 		if(mode & 1) value = __webpack_require__(value);
+/******/ 		if(mode & 8) return value;
+/******/ 		if((mode & 4) && typeof value === 'object' && value && value.__esModule) return value;
+/******/ 		var ns = Object.create(null);
+/******/ 		__webpack_require__.r(ns);
+/******/ 		Object.defineProperty(ns, 'default', { enumerable: true, value: value });
+/******/ 		if(mode & 2 && typeof value != 'string') for(var key in value) __webpack_require__.d(ns, key, function(key) { return value[key]; }.bind(null, key));
+/******/ 		return ns;
+/******/ 	};
+/******/
+/******/ 	// getDefaultExport function for compatibility with non-harmony modules
+/******/ 	__webpack_require__.n = function(module) {
+/******/ 		var getter = module && module.__esModule ?
+/******/ 			function getDefault() { return module['default']; } :
+/******/ 			function getModuleExports() { return module; };
+/******/ 		__webpack_require__.d(getter, 'a', getter);
+/******/ 		return getter;
+/******/ 	};
+/******/
+/******/ 	// Object.prototype.hasOwnProperty.call
+/******/ 	__webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
+/******/
+/******/ 	// __webpack_public_path__
+/******/ 	__webpack_require__.p = "";
+/******/
+/******/
+/******/ 	// Load entry module and return exports
+/******/ 	return __webpack_require__(__webpack_require__.s = 5);
+/******/ })
+/************************************************************************/
+/******/ ({
+
+/***/ 5:
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+
+// components/recycle-item/recycle-item.js
+Component({
+  relations: {
+    './recycle-view': {
+      type: 'parent', // 关联的目标节点应为子节点
+      linked: function linked() {}
+    }
+  },
+  /**
+   * 组件的属性列表
+   */
+  properties: {},
+
+  /**
+   * 组件的初始数据
+   */
+  data: {
+    // height: 100
+  },
+
+  /**
+   * 组件的方法列表
+   */
+  methods: {
+    heightChange: function heightChange() {}
+  }
+});
+
+/***/ })
+
+/******/ });

src/compents/miniprogram-recycle-view/recycle-item.json

@@ -0,0 +1,4 @@
+{
+  "component": true,
+  "usingComponents": {}
+}

src/compents/miniprogram-recycle-view/recycle-item.wxml

@@ -0,0 +1,4 @@
+<!--components/recycle-item/recycle-item.wxml-->
+<view class="wx-recycle-item">
+  <slot></slot>
+</view>

src/compents/miniprogram-recycle-view/recycle-item.wxss

@@ -0,0 +1,7 @@
+/* components/recycle-item/recycle-item.wxss */
+:host {
+  display: inline-block;
+}
+.wx-recycle-item {
+  height: 100%;
+}

src/compents/miniprogram-recycle-view/recycle-view.js

@@ -0,0 +1,925 @@
+module.exports =
+/******/ (function(modules) { // webpackBootstrap
+/******/ 	// The module cache
+/******/ 	var installedModules = {};
+/******/
+/******/ 	// The require function
+/******/ 	function __webpack_require__(moduleId) {
+/******/
+/******/ 		// Check if module is in cache
+/******/ 		if(installedModules[moduleId]) {
+/******/ 			return installedModules[moduleId].exports;
+/******/ 		}
+/******/ 		// Create a new module (and put it into the cache)
+/******/ 		var module = installedModules[moduleId] = {
+/******/ 			i: moduleId,
+/******/ 			l: false,
+/******/ 			exports: {}
+/******/ 		};
+/******/
+/******/ 		// Execute the module function
+/******/ 		modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
+/******/
+/******/ 		// Flag the module as loaded
+/******/ 		module.l = true;
+/******/
+/******/ 		// Return the exports of the module
+/******/ 		return module.exports;
+/******/ 	}
+/******/
+/******/
+/******/ 	// expose the modules object (__webpack_modules__)
+/******/ 	__webpack_require__.m = modules;
+/******/
+/******/ 	// expose the module cache
+/******/ 	__webpack_require__.c = installedModules;
+/******/
+/******/ 	// define getter function for harmony exports
+/******/ 	__webpack_require__.d = function(exports, name, getter) {
+/******/ 		if(!__webpack_require__.o(exports, name)) {
+/******/ 			Object.defineProperty(exports, name, { enumerable: true, get: getter });
+/******/ 		}
+/******/ 	};
+/******/
+/******/ 	// define __esModule on exports
+/******/ 	__webpack_require__.r = function(exports) {
+/******/ 		if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
+/******/ 			Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+/******/ 		}
+/******/ 		Object.defineProperty(exports, '__esModule', { value: true });
+/******/ 	};
+/******/
+/******/ 	// create a fake namespace object
+/******/ 	// mode & 1: value is a module id, require it
+/******/ 	// mode & 2: merge all properties of value into the ns
+/******/ 	// mode & 4: return value when already ns object
+/******/ 	// mode & 8|1: behave like require
+/******/ 	__webpack_require__.t = function(value, mode) {
+/******/ 		if(mode & 1) value = __webpack_require__(value);
+/******/ 		if(mode & 8) return value;
+/******/ 		if((mode & 4) && typeof value === 'object' && value && value.__esModule) return value;
+/******/ 		var ns = Object.create(null);
+/******/ 		__webpack_require__.r(ns);
+/******/ 		Object.defineProperty(ns, 'default', { enumerable: true, value: value });
+/******/ 		if(mode & 2 && typeof value != 'string') for(var key in value) __webpack_require__.d(ns, key, function(key) { return value[key]; }.bind(null, key));
+/******/ 		return ns;
+/******/ 	};
+/******/
+/******/ 	// getDefaultExport function for compatibility with non-harmony modules
+/******/ 	__webpack_require__.n = function(module) {
+/******/ 		var getter = module && module.__esModule ?
+/******/ 			function getDefault() { return module['default']; } :
+/******/ 			function getModuleExports() { return module; };
+/******/ 		__webpack_require__.d(getter, 'a', getter);
+/******/ 		return getter;
+/******/ 	};
+/******/
+/******/ 	// Object.prototype.hasOwnProperty.call
+/******/ 	__webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
+/******/
+/******/ 	// __webpack_public_path__
+/******/ 	__webpack_require__.p = "";
+/******/
+/******/
+/******/ 	// Load entry module and return exports
+/******/ 	return __webpack_require__(__webpack_require__.s = 6);
+/******/ })
+/************************************************************************/
+/******/ ({
+
+/***/ 0:
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+
+var isIPhone = false;
+var deviceWidth = void 0;
+var deviceDPR = void 0;
+var BASE_DEVICE_WIDTH = 750;
+var checkDeviceWidth = function checkDeviceWidth() {
+  var info = wx.getSystemInfoSync();
+  // console.log('info', info)
+  isIPhone = info.platform === 'ios';
+  var newDeviceWidth = info.screenWidth || 375;
+  var newDeviceDPR = info.pixelRatio || 2;
+
+  if (!isIPhone) {
+    // HACK switch width and height when landscape
+    // const newDeviceHeight = info.screenHeight || 375
+    // 暂时不处理转屏的情况
+  }
+
+  if (newDeviceWidth !== deviceWidth || newDeviceDPR !== deviceDPR) {
+    deviceWidth = newDeviceWidth;
+    deviceDPR = newDeviceDPR;
+    // console.info('Updated device width: ' + newDeviceWidth + 'px DPR ' + newDeviceDPR)
+  }
+};
+checkDeviceWidth();
+
+var eps = 1e-4;
+var transformByDPR = function transformByDPR(number) {
+  if (number === 0) {
+    return 0;
+  }
+  number = number / BASE_DEVICE_WIDTH * deviceWidth;
+  number = Math.floor(number + eps);
+  if (number === 0) {
+    if (deviceDPR === 1 || !isIPhone) {
+      return 1;
+    }
+    return 0.5;
+  }
+  return number;
+};
+
+var rpxRE = /([+-]?\d+(?:\.\d+)?)rpx/gi;
+// const inlineRpxRE = /(?::|\s|\(|\/)([+-]?\d+(?:\.\d+)?)rpx/g
+
+var transformRpx = function transformRpx(style, inline) {
+  if (typeof style !== 'string') {
+    return style;
+  }
+  var re = rpxRE;
+  return style.replace(re, function (match, num) {
+    return transformByDPR(Number(num)) + (inline ? 'px' : '');
+  });
+};
+
+module.exports = {
+  transformRpx: transformRpx
+};
+
+/***/ }),
+
+/***/ 6:
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+
+/* eslint complexity: ["error", {"max": 50}] */
+/* eslint-disable indent */
+var DEFAULT_SHOW_SCREENS = 4;
+var RECT_SIZE = 200;
+var systemInfo = wx.getSystemInfoSync();
+var DEBUG = false;
+var transformRpx = __webpack_require__(0).transformRpx;
+
+Component({
+  options: {
+    multipleSlots: true // 在组件定义时的选项中启用多slot支持
+  },
+  relations: {
+    '../recycle-item/recycle-item': {
+      type: 'child', // 关联的目标节点应为子节点
+      linked: function linked(target) {
+        // 检查第一个的尺寸就好了吧
+        if (!this._hasCheckSize) {
+          this._hasCheckSize = true;
+          var size = this.boundingClientRect(this._pos.beginIndex);
+          if (!size) {
+            return;
+          }
+          setTimeout(function () {
+            try {
+              target.createSelectorQuery().select('.wx-recycle-item').boundingClientRect(function (rect) {
+                if (rect && (rect.width !== size.width || rect.height !== size.height)) {
+                  // eslint-disable-next-line no-console
+                  console.warn('[recycle-view] the size in <recycle-item> is not the same with param ' + ('itemSize, expect {width: ' + rect.width + ', height: ' + rect.height + '} but got ') + ('{width: ' + size.width + ', height: ' + size.height + '}'));
+                }
+              }).exec();
+            } catch (e) {
+              // do nothing
+            }
+          }, 10);
+        }
+      }
+    }
+  },
+  /**
+   * 组件的属性列表
+   */
+  properties: {
+    debug: {
+      type: Boolean,
+      value: false
+    },
+    scrollY: {
+      type: Boolean,
+      value: true
+    },
+    batch: {
+      type: Boolean,
+      value: false,
+      public: true,
+      observer: '_recycleInnerBatchDataChanged'
+    },
+    batchKey: {
+      type: String,
+      value: 'batchSetRecycleData',
+      public: true
+    },
+    scrollTop: {
+      type: Number,
+      value: 0,
+      public: true,
+      observer: '_scrollTopChanged',
+      observeAssignments: true
+    },
+    height: {
+      type: Number,
+      value: systemInfo.windowHeight,
+      public: true,
+      observer: '_heightChanged'
+    },
+    width: {
+      type: Number,
+      value: systemInfo.windowWidth,
+      public: true,
+      observer: '_widthChanged'
+    },
+    // 距顶部/左边多远时，触发bindscrolltoupper
+    upperThreshold: {
+      type: Number,
+      value: 50,
+      public: true
+    },
+    // 距底部/右边多远时，触发bindscrolltolower
+    lowerThreshold: {
+      type: Number,
+      value: 50,
+      public: true
+    },
+    scrollToIndex: {
+      type: Number,
+      public: true,
+      value: 0,
+      observer: '_scrollToIndexChanged',
+      observeAssignments: true
+    },
+    scrollWithAnimation: {
+      type: Boolean,
+      public: true,
+      value: false
+    },
+    enableBackToTop: {
+      type: Boolean,
+      public: true,
+      value: false
+    },
+    // 是否节流，默认是
+    throttle: {
+      type: Boolean,
+      public: true,
+      value: true
+    },
+    placeholderImage: {
+      type: String,
+      public: true,
+      value: ''
+    },
+    screen: { // 默认渲染多少屏的数据
+      type: Number,
+      public: true,
+      value: DEFAULT_SHOW_SCREENS
+    }
+  },
+
+  /**
+   * 组件的初始数据
+   */
+  data: {
+    innerBeforeHeight: 0,
+    innerAfterHeight: 0,
+    innerScrollTop: 0,
+    innerScrollIntoView: '',
+    placeholderImageStr: '',
+    totalHeight: 0,
+    useInPage: false
+  },
+  attached: function attached() {
+    if (this.data.placeholderImage) {
+      this.setData({
+        placeholderImageStr: transformRpx(this.data.placeholderImage, true)
+      });
+    }
+    this.setItemSize({
+      array: [],
+      map: {},
+      totalHeight: 0
+    });
+  },
+  ready: function ready() {
+    var _this = this;
+
+    this._initPosition(function () {
+      _this._isReady = true; // DOM结构ready了
+      // 有一个更新的timer在了
+      if (_this._updateTimerId) return;
+
+      _this._scrollViewDidScroll({
+        detail: {
+          scrollLeft: _this._pos.left,
+          scrollTop: _this._pos.top,
+          ignoreScroll: true
+        }
+      }, true);
+    });
+  },
+  detached: function detached() {
+    this.page = null;
+    // 销毁对应的RecycleContext
+    if (this.context) {
+      this.context.destroy();
+      this.context = null;
+    }
+  },
+
+  /**
+   * 组件的方法列表
+   */
+  methods: {
+    _log: function _log() {
+      var _console;
+
+      if (!DEBUG && !this.data.debug) return;
+      var h = new Date();
+      var str = h.getHours() + ':' + h.getMinutes() + ':' + h.getSeconds() + '.' + h.getMilliseconds();
+
+      for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
+        args[_key] = arguments[_key];
+      }
+
+      Array.prototype.splice.call(args, 0, 0, str);
+      // eslint-disable-next-line no-console
+      (_console = console).log.apply(_console, args);
+    },
+    _scrollToUpper: function _scrollToUpper(e) {
+      this.triggerEvent('scrolltoupper', e.detail);
+    },
+    _scrollToLower: function _scrollToLower(e) {
+      this.triggerEvent('scrolltolower', e.detail);
+    },
+    _beginToScroll: function _beginToScroll() {
+      if (!this._lastScrollTop) {
+        this._lastScrollTop = this._pos && (this._pos.top || 0);
+      }
+    },
+    _clearList: function _clearList(cb) {
+      this.currentScrollTop = 0;
+      this._lastScrollTop = 0;
+      var pos = this._pos;
+      pos.beginIndex = this._pos.endIndex = -1;
+      pos.afterHeight = pos.minTop = pos.maxTop = 0;
+      this.page._recycleViewportChange({
+        detail: {
+          data: pos,
+          id: this.id
+        }
+      }, cb);
+    },
+
+    // 判断RecycleContext是否Ready
+    _isValid: function _isValid() {
+      return this.page && this.context && this.context.isDataReady;
+    },
+
+    // eslint-disable-next-line no-complexity
+    _scrollViewDidScroll: function _scrollViewDidScroll(e, force) {
+      // 如果RecycleContext还没有初始化, 不做任何事情
+      if (!this._isValid()) {
+        return;
+      }
+      // 监测白屏时间
+      if (!e.detail.ignoreScroll) {
+        this.triggerEvent('scroll', e.detail);
+      }
+      this.currentScrollTop = e.detail.scrollTop;
+      // 高度为0的情况, 不做任何渲染逻辑
+      if (!this._pos.height || !this.sizeArray.length) {
+        // 没有任何数据的情况下, 直接清理所有的状态
+        this._clearList(e.detail.cb);
+        return;
+      }
+
+      // 在scrollWithAnimation动画最后会触发一次scroll事件, 这次scroll事件必须要被忽略
+      if (this._isScrollingWithAnimation) {
+        this._isScrollingWithAnimation = false;
+        return;
+      }
+      var pos = this._pos;
+      var that = this;
+      var scrollLeft = e.detail.scrollLeft;
+      var scrollTop = e.detail.scrollTop;
+      var scrollDistance = Math.abs(scrollTop - this._lastScrollTop);
+      if (!force && Math.abs(scrollTop - pos.top) < pos.height * 1.5) {
+        this._log('【not exceed height');
+        return;
+      }
+      this._lastScrollTop = scrollTop;
+      var SHOW_SCREENS = this.data.screen; // 固定4屏幕
+      this._log('SHOW_SCREENS', SHOW_SCREENS, scrollTop);
+      this._calcViewportIndexes(scrollLeft, scrollTop, function (beginIndex, endIndex, minTop, afterHeight, maxTop) {
+        that._log('scrollDistance', scrollDistance, 'indexes', beginIndex, endIndex);
+        // 渲染的数据不变
+        if (!force && pos.beginIndex === beginIndex && pos.endIndex === endIndex && pos.minTop === minTop && pos.afterHeight === afterHeight) {
+          that._log('------------is the same beginIndex and endIndex');
+          return;
+        }
+        // 如果这次渲染的范围比上一次的范围小，则忽略
+        that._log('【check】before setData, old pos is', pos.minTop, pos.maxTop, minTop, maxTop);
+        that._throttle = false;
+        pos.left = scrollLeft;
+        pos.top = scrollTop;
+        pos.beginIndex = beginIndex;
+        pos.endIndex = endIndex;
+        // console.log('render indexes', endIndex - beginIndex + 1, endIndex, beginIndex)
+        pos.minTop = minTop;
+        pos.maxTop = maxTop;
+        pos.afterHeight = afterHeight;
+        pos.ignoreBeginIndex = pos.ignoreEndIndex = -1;
+        that.page._recycleViewportChange({
+          detail: {
+            data: that._pos,
+            id: that.id
+          }
+        }, function () {
+          if (e.detail.cb) {
+            e.detail.cb();
+          }
+        });
+      });
+    },
+
+    // 计算在视窗内渲染的数据
+    _calcViewportIndexes: function _calcViewportIndexes(left, top, cb) {
+      var that = this;
+      // const st = +new Date
+      this._getBeforeSlotHeight(function () {
+        var _that$__calcViewportI = that.__calcViewportIndexes(left, top),
+            beginIndex = _that$__calcViewportI.beginIndex,
+            endIndex = _that$__calcViewportI.endIndex,
+            minTop = _that$__calcViewportI.minTop,
+            afterHeight = _that$__calcViewportI.afterHeight,
+            maxTop = _that$__calcViewportI.maxTop;
+
+        if (cb) {
+          cb(beginIndex, endIndex, minTop, afterHeight, maxTop);
+        }
+      });
+    },
+    _getBeforeSlotHeight: function _getBeforeSlotHeight(cb) {
+      if (typeof this.data.beforeSlotHeight !== 'undefined') {
+        if (cb) {
+          cb(this.data.beforeSlotHeight);
+        }
+      } else {
+        this.reRender(cb);
+      }
+    },
+    _getAfterSlotHeight: function _getAfterSlotHeight(cb) {
+      if (typeof this.data.afterSlotHeight !== 'undefined') {
+        if (cb) {
+          cb(this.data.afterSlotHeight);
+        }
+        // cb && cb(this.data.afterSlotHeight)
+      } else {
+        this.reRender(cb);
+      }
+    },
+    _getIndexes: function _getIndexes(minTop, maxTop) {
+      if (minTop === maxTop && maxTop === 0) {
+        return {
+          beginIndex: -1,
+          endIndex: -1
+        };
+      }
+      var startLine = Math.floor(minTop / RECT_SIZE);
+      var endLine = Math.ceil(maxTop / RECT_SIZE);
+      var rectEachLine = Math.floor(this.data.width / RECT_SIZE);
+      var beginIndex = void 0;
+      var endIndex = void 0;
+      var sizeMap = this.sizeMap;
+      for (var i = startLine; i <= endLine; i++) {
+        for (var col = 0; col < rectEachLine; col++) {
+          var key = i + '.' + col;
+          // 找到sizeMap里面的最小值和最大值即可
+          if (!sizeMap[key]) continue;
+          for (var j = 0; j < sizeMap[key].length; j++) {
+            if (typeof beginIndex === 'undefined') {
+              beginIndex = endIndex = sizeMap[key][j];
+              continue;
+            }
+            if (beginIndex > sizeMap[key][j]) {
+              beginIndex = sizeMap[key][j];
+            } else if (endIndex < sizeMap[key][j]) {
+              endIndex = sizeMap[key][j];
+            }
+          }
+        }
+      }
+      return {
+        beginIndex: beginIndex,
+        endIndex: endIndex
+      };
+    },
+    _isIndexValid: function _isIndexValid(beginIndex, endIndex) {
+      if (typeof beginIndex === 'undefined' || beginIndex === -1 || typeof endIndex === 'undefined' || endIndex === -1 || endIndex >= this.sizeArray.length) {
+        return false;
+      }
+      return true;
+    },
+    __calcViewportIndexes: function __calcViewportIndexes(left, top) {
+      if (!this.sizeArray.length) return {};
+      var pos = this._pos;
+      if (typeof left === 'undefined') {
+        left = pos.left;
+      }
+      if (typeof top === 'undefined') {
+        top = pos.top;
+      }
+      // top = Math.max(top, this.data.beforeSlotHeight)
+      var beforeSlotHeight = this.data.beforeSlotHeight || 0;
+      // 和direction无关了
+      var SHOW_SCREENS = this.data.screen;
+      var minTop = top - pos.height * SHOW_SCREENS - beforeSlotHeight;
+      var maxTop = top + pos.height * SHOW_SCREENS - beforeSlotHeight;
+      // maxTop或者是minTop超出了范围
+      if (maxTop > this.totalHeight) {
+        minTop -= maxTop - this.totalHeight;
+        maxTop = this.totalHeight;
+      }
+      if (minTop < beforeSlotHeight) {
+        maxTop += Math.min(beforeSlotHeight - minTop, this.totalHeight);
+        minTop = 0;
+      }
+      // 计算落在minTop和maxTop之间的方格有哪些
+      var indexObj = this._getIndexes(minTop, maxTop);
+      var beginIndex = indexObj.beginIndex;
+      var endIndex = indexObj.endIndex;
+      if (endIndex >= this.sizeArray.length) {
+        endIndex = this.sizeArray.length - 1;
+      }
+      // 校验一下beginIndex和endIndex的有效性,
+      if (!this._isIndexValid(beginIndex, endIndex)) {
+        return {
+          beginIndex: -1,
+          endIndex: -1,
+          minTop: 0,
+          afterHeight: 0,
+          maxTop: 0
+        };
+      }
+      // 计算白屏的默认占位的区域
+      var maxTopFull = this.sizeArray[endIndex].beforeHeight + this.sizeArray[endIndex].height;
+      var minTopFull = this.sizeArray[beginIndex].beforeHeight;
+
+      // console.log('render indexes', beginIndex, endIndex)
+      var afterHeight = this.totalHeight - maxTopFull;
+      return {
+        beginIndex: beginIndex,
+        endIndex: endIndex,
+        minTop: minTopFull, // 取整, beforeHeight的距离
+        afterHeight: afterHeight,
+        maxTop: maxTop
+      };
+    },
+    setItemSize: function setItemSize(size) {
+      this.sizeArray = size.array;
+      this.sizeMap = size.map;
+      if (size.totalHeight !== this.totalHeight) {
+        // console.log('---totalHeight is', size.totalHeight);
+        this.setData({
+          totalHeight: size.totalHeight,
+          useInPage: this.useInPage || false
+        });
+      }
+      this.totalHeight = size.totalHeight;
+    },
+    setList: function setList(key, newList) {
+      this._currentSetDataKey = key;
+      this._currentSetDataList = newList;
+    },
+    setPage: function setPage(page) {
+      this.page = page;
+    },
+    forceUpdate: function forceUpdate(cb, reInit) {
+      var _this2 = this;
+
+      if (!this._isReady) {
+        if (this._updateTimerId) {
+          // 合并多次的forceUpdate
+          clearTimeout(this._updateTimerId);
+        }
+        this._updateTimerId = setTimeout(function () {
+          _this2.forceUpdate(cb, reInit);
+        }, 10);
+        return;
+      }
+      this._updateTimerId = null;
+      var that = this;
+      if (reInit) {
+        this.reRender(function () {
+          that._scrollViewDidScroll({
+            detail: {
+              scrollLeft: that._pos.left,
+              scrollTop: that.currentScrollTop || that.data.scrollTop || 0,
+              ignoreScroll: true,
+              cb: cb
+            }
+          }, true);
+        });
+      } else {
+        this._scrollViewDidScroll({
+          detail: {
+            scrollLeft: that._pos.left,
+            scrollTop: that.currentScrollTop || that.data.scrollTop || 0,
+            ignoreScroll: true,
+            cb: cb
+          }
+        }, true);
+      }
+    },
+    _initPosition: function _initPosition(cb) {
+      var that = this;
+      that._pos = {
+        left: that.data.scrollLeft || 0,
+        top: that.data.scrollTop || 0,
+        width: this.data.width,
+        height: Math.max(500, this.data.height), // 一个屏幕的高度
+        direction: 0
+      };
+      this.reRender(cb);
+    },
+    _widthChanged: function _widthChanged(newVal) {
+      if (!this._isReady) return newVal;
+      this._pos.width = newVal;
+      this.forceUpdate();
+      return newVal;
+    },
+    _heightChanged: function _heightChanged(newVal) {
+      if (!this._isReady) return newVal;
+      this._pos.height = Math.max(500, newVal);
+      this.forceUpdate();
+      return newVal;
+    },
+    reRender: function reRender(cb) {
+      var _this3 = this;
+
+      var beforeSlotHeight = void 0;
+      var afterSlotHeight = void 0;
+      var that = this;
+      // const reRenderStart = Date.now()
+      function newCb() {
+        if (that._lastBeforeSlotHeight !== beforeSlotHeight || that._lastAfterSlotHeight !== afterSlotHeight) {
+          that.setData({
+            hasBeforeSlotHeight: true,
+            hasAfterSlotHeight: true,
+            beforeSlotHeight: beforeSlotHeight,
+            afterSlotHeight: afterSlotHeight
+          });
+        }
+        that._lastBeforeSlotHeight = beforeSlotHeight;
+        that._lastAfterSlotHeight = afterSlotHeight;
+        // console.log('_getBeforeSlotHeight use time', Date.now() - reRenderStart)
+        if (cb) {
+          cb();
+        }
+      }
+      // 重新渲染事件发生
+      var beforeReady = false;
+      var afterReady = false;
+      // fix：#16 确保获取slot节点实际高度
+      this.setData({
+        hasBeforeSlotHeight: false,
+        hasAfterSlotHeight: false
+      }, function () {
+        _this3.createSelectorQuery().select('.slot-before').boundingClientRect(function (rect) {
+          beforeSlotHeight = rect.height;
+          beforeReady = true;
+          if (afterReady) {
+            if (newCb) {
+              newCb();
+            }
+          }
+        }).exec();
+        _this3.createSelectorQuery().select('.slot-after').boundingClientRect(function (rect) {
+          afterSlotHeight = rect.height;
+          afterReady = true;
+          if (beforeReady) {
+            if (newCb) {
+              newCb();
+            }
+          }
+        }).exec();
+      });
+    },
+    _setInnerBeforeAndAfterHeight: function _setInnerBeforeAndAfterHeight(obj) {
+      if (typeof obj.beforeHeight !== 'undefined') {
+        this._tmpBeforeHeight = obj.beforeHeight;
+      }
+      if (obj.afterHeight) {
+        this._tmpAfterHeight = obj.afterHeight;
+      }
+    },
+    _recycleInnerBatchDataChanged: function _recycleInnerBatchDataChanged(cb) {
+      var _this4 = this;
+
+      if (typeof this._tmpBeforeHeight !== 'undefined') {
+        var setObj = {
+          innerBeforeHeight: this._tmpBeforeHeight || 0,
+          innerAfterHeight: this._tmpAfterHeight || 0
+        };
+        if (typeof this._tmpInnerScrollTop !== 'undefined') {
+          setObj.innerScrollTop = this._tmpInnerScrollTop;
+        }
+        var pageObj = {};
+        var hasPageData = false;
+        if (typeof this._currentSetDataKey !== 'undefined') {
+          pageObj[this._currentSetDataKey] = this._currentSetDataList;
+          hasPageData = true;
+        }
+        var saveScrollWithAnimation = this.data.scrollWithAnimation;
+        var groupSetData = function groupSetData() {
+          // 如果有分页数据的话
+          if (hasPageData) {
+            _this4.page.setData(pageObj);
+          }
+          _this4.setData(setObj, function () {
+            _this4.setData({
+              scrollWithAnimation: saveScrollWithAnimation
+            });
+            if (typeof cb === 'function') {
+              cb();
+            }
+          });
+        };
+        groupSetData();
+        delete this._currentSetDataKey;
+        delete this._currentSetDataList;
+        this._tmpBeforeHeight = undefined;
+        this._tmpAfterHeight = undefined;
+        this._tmpInnerScrollTop = undefined;
+      }
+    },
+    _renderByScrollTop: function _renderByScrollTop(scrollTop) {
+      // 先setData把目标位置的数据补齐
+      this._scrollViewDidScroll({
+        detail: {
+          scrollLeft: this._pos.scrollLeft,
+          scrollTop: scrollTop,
+          ignoreScroll: true
+        }
+      }, true);
+      if (this.data.scrollWithAnimation) {
+        this._isScrollingWithAnimation = true;
+      }
+      this.setData({
+        innerScrollTop: scrollTop
+      });
+    },
+    _scrollTopChanged: function _scrollTopChanged(newVal, oldVal) {
+      var _this5 = this;
+
+      // if (newVal === oldVal && newVal === 0) return
+      if (!this._isInitScrollTop && newVal === 0) {
+        this._isInitScrollTop = true;
+        return newVal;
+      }
+      this.currentScrollTop = newVal;
+      if (!this._isReady) {
+        if (this._scrollTopTimerId) {
+          clearTimeout(this._scrollTopTimerId);
+        }
+        this._scrollTopTimerId = setTimeout(function () {
+          _this5._scrollTopChanged(newVal, oldVal);
+        }, 10);
+        return newVal;
+      }
+      this._isInitScrollTop = true;
+      this._scrollTopTimerId = null;
+      // this._lastScrollTop = oldVal
+      if (typeof this._lastScrollTop === 'undefined') {
+        this._lastScrollTop = this.data.scrollTop;
+      }
+      // 滑动距离小于一个屏幕的高度, 直接setData
+      if (Math.abs(newVal - this._lastScrollTop) < this._pos.height) {
+        this.setData({
+          innerScrollTop: newVal
+        });
+        return newVal;
+      }
+      if (!this._isScrollTopChanged) {
+        // 首次的值需要延后一点执行才能生效
+        setTimeout(function () {
+          _this5._isScrollTopChanged = true;
+          _this5._renderByScrollTop(newVal);
+        }, 10);
+      } else {
+        this._renderByScrollTop(newVal);
+      }
+      return newVal;
+    },
+    _scrollToIndexChanged: function _scrollToIndexChanged(newVal, oldVal) {
+      var _this6 = this;
+
+      // if (newVal === oldVal && newVal === 0) return
+      // 首次滚动到0的不执行
+      if (!this._isInitScrollToIndex && newVal === 0) {
+        this._isInitScrollToIndex = true;
+        return newVal;
+      }
+      if (!this._isReady) {
+        if (this._scrollToIndexTimerId) {
+          clearTimeout(this._scrollToIndexTimerId);
+        }
+        this._scrollToIndexTimerId = setTimeout(function () {
+          _this6._scrollToIndexChanged(newVal, oldVal);
+        }, 10);
+        return newVal;
+      }
+      this._isInitScrollToIndex = true;
+      this._scrollToIndexTimerId = null;
+      if (typeof this._lastScrollTop === 'undefined') {
+        this._lastScrollTop = this.data.scrollTop;
+      }
+      var rect = this.boundingClientRect(newVal);
+      if (!rect) return newVal;
+      // console.log('rect top', rect, this.data.beforeSlotHeight)
+      var calScrollTop = rect.top + (this.data.beforeSlotHeight || 0);
+      this.currentScrollTop = calScrollTop;
+      if (Math.abs(calScrollTop - this._lastScrollTop) < this._pos.height) {
+        this.setData({
+          innerScrollTop: calScrollTop
+        });
+        return newVal;
+      }
+      if (!this._isScrollToIndexChanged) {
+        setTimeout(function () {
+          _this6._isScrollToIndexChanged = true;
+          _this6._renderByScrollTop(calScrollTop);
+        }, 10);
+      } else {
+        this._renderByScrollTop(calScrollTop);
+      }
+      return newVal;
+    },
+
+    // 提供给开发者使用的接口
+    boundingClientRect: function boundingClientRect(idx) {
+      if (idx < 0 || idx >= this.sizeArray.length) {
+        return null;
+      }
+      return {
+        left: 0,
+        top: this.sizeArray[idx].beforeHeight,
+        width: this.sizeArray[idx].width,
+        height: this.sizeArray[idx].height
+      };
+    },
+
+    // 获取当前出现在屏幕内数据项， 返回数据项组成的数组
+    // 参数inViewportPx表示当数据项至少有多少像素出现在屏幕内才算是出现在屏幕内，默认是1
+    getIndexesInViewport: function getIndexesInViewport(inViewportPx) {
+      if (!inViewportPx) {
+        inViewportPx = 1;
+      }
+      var scrollTop = this.currentScrollTop;
+      var minTop = scrollTop + inViewportPx;
+      if (minTop < 0) minTop = 0;
+      var maxTop = scrollTop + this.data.height - inViewportPx;
+      if (maxTop > this.totalHeight) maxTop = this.totalHeight;
+      var indexes = [];
+      for (var i = 0; i < this.sizeArray.length; i++) {
+        if (this.sizeArray[i].beforeHeight + this.sizeArray[i].height >= minTop && this.sizeArray[i].beforeHeight <= maxTop) {
+          indexes.push(i);
+        }
+        if (this.sizeArray[i].beforeHeight > maxTop) break;
+      }
+      return indexes;
+    },
+    getTotalHeight: function getTotalHeight() {
+      return this.totalHeight;
+    },
+    setUseInPage: function setUseInPage(useInPage) {
+      this.useInPage = useInPage;
+    },
+    setPlaceholderImage: function setPlaceholderImage(svgs, size) {
+      var fill = 'style=\'fill:rgb(204,204,204);\'';
+      var placeholderImages = ['data:image/svg+xml,%3Csvg height=\'' + size.height + '\' width=\'' + size.width + '\' xmlns=\'http://www.w3.org/2000/svg\'%3E'];
+      svgs.forEach(function (svg) {
+        placeholderImages.push('%3Crect width=\'' + svg.width + '\' x=\'' + svg.left + '\' height=\'' + svg.height + '\' y=\'' + svg.top + '\' ' + fill + ' /%3E');
+      });
+      placeholderImages.push('%3C/svg%3E');
+      this.setData({
+        placeholderImageStr: placeholderImages.join('')
+      });
+    }
+  }
+});
+
+/***/ })
+
+/******/ });

src/compents/miniprogram-recycle-view/recycle-view.json

@@ -0,0 +1,4 @@
+{
+  "component": true,
+  "usingComponents": {}
+}

src/compents/miniprogram-recycle-view/recycle-view.wxml

@@ -0,0 +1,21 @@
+<!--components/recycle-view/recycle-view.wxml-->
+<view bindtouchstart='_beginToScroll' style="height:{{useInPage ? totalHeight + (hasBeforeSlotHeight ? beforeSlotHeight : 0) + (hasAfterSlotHeight ? afterSlotHeight : 0) : height}}px;width:{{width}}px;transform:translateZ(0);-webkit-transform:translateZ(0);" id="content" class="wrap">
+  <scroll-view bindscroll="_scrollViewDidScroll" class="content" style='height:100%;position: relative;' scroll-y="{{useInPage ? false : scrollY}}" scroll-x="{{false}}" upper-threshold="{{upperThreshold}}" lower-threshold="{{lowerThreshold}}" scroll-top="{{innerScrollTop}}" scroll-into-view="{{innerScrollIntoView}}" scroll-with-animation="{{scrollWithAnimation}}" bindscrolltoupper="_scrollToUpper" bindscrolltolower="_scrollToLower" scroll-anchoring enable-back-to-top="{{enableBackToTop}}" throttle="{{throttle}}">
+    <view style="position: absolute;z-index:1;width:100%;left: 0;top: 0;opacity: 0;visibility: hidden;">
+      <slot name="itemsize"></slot>
+    </view>
+    <view style="height:{{hasBeforeSlotHeight ? beforeSlotHeight + 'px' : 'auto'}}" class="slot-before">
+      <slot name="before"></slot>
+    </view>
+    <view style='position:relative;width:100%;z-index:10;background: url("{{placeholderImageStr}}") repeat;height:{{totalHeight}}px;'>
+      <!-- <view class='before' style="height:{{innerBeforeHeight}}px"></view> -->
+      <view style="position: absolute;left:0;width:100%;top:{{innerBeforeHeight}}px;">
+        <slot></slot>
+      </view>
+      <!-- <view class='after' style="height:{{innerAfterHeight}}px"></view> -->
+    </view>
+    <view style="height:{{hasAfterSlotHeight ? afterSlotHeight + 'px' : 'auto'}}" class="slot-after">
+      <slot name="after"></slot>
+    </view>
+  </scroll-view>
+</view>

src/compents/miniprogram-recycle-view/recycle-view.wxss

@@ -0,0 +1,5 @@
+/* components/recycle-view/recycle-view.wxss */
+:host {
+  display: block;
+  width: 100%;
+}

src/pages/house/list/index.jsx

@@ -5,11 +5,17 @@ import { View, Text, Input, Image } from '@tarojs/components'
 import ContainerLayout from '../../../compents/container/index'
 import radio from '../../../assets/radio.png'
 import request from '@/util/request'
+import RecycleList from '@/compents/RecycleList'
+
+
 let house = (props, ref) => {
 
   const [list, setList] = useState([])
   const [radioHouse, setRadioHouse] = useState()
-
+  const [width, setWidth] = useState()
+  // const [height, setHeight] = useState()
+  const [queryParams, setQueryParams] = useState({pageNum: 1, pageSize: 10})
+  const [total, setTotal] = useState(0)
 
   useImperativeHandle(ref, () => ({
     // changeVal 就是暴露给父组件的方法
@@ -18,30 +24,33 @@ let house = (props, ref) => {
     }
   }));
 
-
-
   const radioHouseState = useMemo(() => props.radioHouseState, [props.radioHouseState])
+
   wx.setNavigationBarTitle({
     title: '民宿房源管理'
   })
-  console.log(props, radioHouseState)
-  useEffect(() => {
-    console.log(props, ref,'props, ref')
-    getHouseList()
-  }, [])
-  useDidShow(() => {
 
-    getHouseList()
-  })
 
   const getHouseList = () => {
     request({
       url: '/taHouse',
-      // method: 'get',
-      params: { pageSize: 1, pageSize: 9999 }
+      params: queryParams
     }).then((res) => {
       const { records, ...page } = res.data.data
-      setList(records)
+
+      if (page.current !== 1) {
+        setList(list.concat(records))
+      } else {
+        setList(records)
+      }
+      setTotal(page.total)
+    })
+  }
+
+  const handleScrollBottom = e => {
+    setQueryParams({
+      ...queryParams,
+      pageNum: queryParams.pageNum + 1
     })
   }
 
@@ -49,34 +58,65 @@ let house = (props, ref) => {
     Taro.navigateTo({ url: `/pages/share/index?houseId=${x.houseId}` })
   }
 
+  useEffect(() => {
+    console.log(props, ref,'props, ref')
+    getHouseList()
 
+    Taro.nextTick(() => {
 
-  return <View className='houselist'>
-    {list.map((x, index) => {
-      return <View className='houselist-view'>
-        {/* <Text className='houselist-view-title'>房源编号：{x.houseId}</Text> */}
-        <ContainerLayout className='houselist-view-card'>
-          {radioHouseState && <View className='houselist-view-card-radio' onClick={() => { props.onChange(x), setRadioHouse(x) }}>
-            {radioHouse?.houseId == x?.houseId && <Image src={radio} style={{ width: '30rpx', height: '20rpx' }}></Image>}
-          </View>}
-          <View className='top' onClick={() => { if (!radioHouseState) Taro.navigateTo({ url: `/pages/house/index?houseId=${x.houseId}` }) }}>{x.title}</View>
-          <View className='bottom'>
-            <Text onClick={() => { if (!radioHouseState) Taro.navigateTo({ url: `/pages/house/household/index?houseId=${x.houseId}` }) }}>查看入住人</Text>
-            <Text onClick={()=>onShare(x)}>分享链接</Text>
-          </View>
-        </ContainerLayout>
-
-      </View>
+      Taro.createSelectorQuery()
+        .selectAll('.houselist')
+        .boundingClientRect(res => {
+          if (res) {
+            setWidth(res[0].width)
+            // setHeight(res[0].height)
+          }
+        }).exec()
+    })
 
-    })}
+  }, [])
 
+  useEffect(() => {
+    getHouseList()
+  }, [queryParams])
 
-    {
-      list.length == 0 &&
-      < View className='nodata'> 暂无数据</View>
+  useDidShow(() => {
+    setQueryParams({ ...queryParams })
+  })
 
-    }
-  </View >
+  return (
+    <View className='houselist'>
+      <RecycleList
+        height={508}
+        width={width}
+        list={list}
+        total={total}
+        dataKey="houseId"
+        onScrollToLower={handleScrollBottom}
+        renderItem={x => (
+          <View className='houselist-view'>
+            {/* <Text className='houselist-view-title'>房源编号：{x.houseId}</Text> */}
+            <ContainerLayout className='houselist-view-card'>
+              {radioHouseState && <View className='houselist-view-card-radio' onClick={() => { props.onChange(x), setRadioHouse(x) }}>
+                {radioHouse?.houseId == x?.houseId && <Image src={radio} style={{ width: '30rpx', height: '20rpx' }}></Image>}
+              </View>}
+              <View className='top' onClick={() => { if (!radioHouseState) Taro.navigateTo({ url: `/pages/house/index?houseId=${x.houseId}` }) }}>{x.title}</View>
+              <View className='bottom'>
+                <Text onClick={() => { if (!radioHouseState) Taro.navigateTo({ url: `/pages/house/household/index?houseId=${x.houseId}` }) }}>查看入住人</Text>
+                <Text onClick={()=>onShare(x)}>分享链接</Text>
+              </View>
+            </ContainerLayout>
+          </View>
+        
+        )}
+      />
+
+      {
+        (!list || !list.length) && < View className='nodata'> 暂无数据</View>
+      }
+    </View>
+  )
+  
 }
 house = forwardRef(house)
 export default house

src/pages/house/list/index.scss

@@ -1,7 +1,8 @@
 .houselist {
 
-  // padding: 13.33px 0;
   &-view {
+    // app padding: 41.3px
+    width: calc(100vw - 82.6px);
     margin: 40px 0 0;
 
     // padding: 0;

yarn.lock

@@ -8751,6 +8751,11 @@ miniprogram-exparser@2.11.2:
   resolved "https://registry.npm.taobao.org/miniprogram-exparser/download/miniprogram-exparser-2.11.2.tgz#e60b4a1433c249025f7e9a922bfe369c7436ae61"
   integrity sha1-5gtKFDPCSQJffpqSK/42nHQ2rmE=
 
+miniprogram-recycle-view@^0.1.5:
+  version "0.1.5"
+  resolved "https://registry.npm.taobao.org/miniprogram-recycle-view/download/miniprogram-recycle-view-0.1.5.tgz#854c2fe0df63c2165f739c8e0446aa35aa6c7d78"
+  integrity sha1-hUwv4N9jwhZfc5yOBEaqNapsfXg=
+
 miniprogram-simulate@^1.1.5:
   version "1.2.8"
   resolved "https://registry.npm.taobao.org/miniprogram-simulate/download/miniprogram-simulate-1.2.8.tgz#b40fb6fd3b0a43e97f292b2da28c9bb84ae4c5e1"