wux-weapp/packages/lib/virtual-list/index.js

一套组件化、可复用、易扩展的微信小程序 UI 组件库

"use strict";var _observers,_baseComponent=_interopRequireDefault(require("../helpers/baseComponent")),_classNames=_interopRequireDefault(require("../helpers/libs/classNames")),_styleToCssString=_interopRequireDefault(require("../helpers/libs/styleToCssString")),_debounce=require("../helpers/shared/debounce"),_useDOM=require("../helpers/hooks/useDOM"),_utils=require("./utils");function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e}}function ownKeys(t,e){var n=Object.keys(t);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(t);e&&(r=r.filter(function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable})),n.push.apply(n,r)}return n}function _objectSpread(t){for(var e=1;e<arguments.length;e++){var n=null!=arguments[e]?arguments[e]:{};e%2?ownKeys(n,!0).forEach(function(e){_defineProperty(t,e,n[e])}):Object.getOwnPropertyDescriptors?Object.defineProperties(t,Object.getOwnPropertyDescriptors(n)):ownKeys(n).forEach(function(e){Object.defineProperty(t,e,Object.getOwnPropertyDescriptor(n,e))})}return t}function _defineProperty(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}(0,_baseComponent.default)({relations:{"../virtual-item/index":{type:"descendant",observer:function(){this.callDebounceFn(this.updated)}}},properties:{prefixCls:{type:String,value:"wux-virtual-list"},itemHeight:{type:Number,value:50},itemBuffer:{type:Number,value:0},scrollToIndex:{type:Number,value:0},upperThreshold:{type:Number,value:50},lowerThreshold:{type:Number,value:50},scrollWithAnimation:{type:Boolean,value:!1},enableBackToTop:{type:Boolean,value:!1},disableScroll:{type:Boolean,value:!1},enablePageScroll:{type:Boolean,value:!1},height:{type:Number,value:300},debounce:{type:Number,value:0}},data:{wrapStyle:"",scrollOffset:0,innerScrollOffset:0,startIndex:0,endIndex:-1},computed:{classes:["prefixCls",function(e){return{wrap:(0,_classNames.default)(e),mask:"".concat(e,"__mask"),scrollView:"".concat(e,"__scroll-view"),scrollArea:"".concat(e,"__scroll-area")}}]},observers:(_observers={itemHeight:function(e){this.updated(e)},height:function(e){this.updatedStyle(e)},debounce:function(e){this.setScrollHandler(e)}},_defineProperty(_observers,"enablePageScroll, height, itemHeight, itemBuffer",function(){this.firstRendered&&this.onChange(this.data.scrollOffset,!0)}),_defineProperty(_observers,"scrollToIndex",function(e){this.firstRendered&&this.scrollToIndex(e)}),_observers),methods:{updated:function(e){var n=0<arguments.length&&void 0!==e?e:this.data.itemHeight,r=this.data.startIndex,t=this.getRelationsByName("../virtual-item/index");0<t.length&&t.forEach(function(e,t){e.updated(r+t,n)})},updatedStyle:function(e){this.setValue((0,_styleToCssString.default)({height:e}),"wrapStyle")},setValue:function(e,t,n){var r=1<arguments.length&&void 0!==t?t:"scrollOffset",i=2<arguments.length?n:void 0;this.data[r]===e&&!i||this.setData(_defineProperty({},r,e))},loadData:function(e){var t=this,n=this.data,r=n.itemHeight,i=n.startIndex,o=n.endIndex,s=n.scrollOffset,a={items:this.items,itemHeight:r},l={startIndex:i,endIndex:o},c=(0,_utils.mapVirtualToProps)(a,l);this.setData(c,function(){"function"==typeof e&&e.call(t,_objectSpread({},c,{},l,{scrollOffset:s}))})},onChange:function(t,n,r){var i=this,e=this.data,o=e.itemHeight,s=e.height,a=e.itemBuffer,l=e.startIndex,c=e.endIndex,u=e.offsetTop,d=e.enablePageScroll,h=Math.max(0,this.items.length-1),f=t-(d?u:0),p=(0,_utils.getVisibleItemBounds)(f,s,h,o,a),g=p.startIndex!==l||p.endIndex!==c,b=t>this.data.scrollOffset?"Down":"Up",m="Up"==b&&f<l*o,v="Down"==b&&c*o-s<f;void 0===p||p.startIndex>p.endIndex||((g&&(m||v)||n)&&this.setData(p,function(){i.loadData(function(e){n&&i.setValue(t,"innerScrollOffset",!0),i.triggerEvent("change",_objectSpread({},e,{direction:b,scrollOffset:t})),"function"==typeof r&&r.call(i,_objectSpread({},e,{direction:b,scrollOffset:t}))})}),this.setValue(t))},onScroll:function(e){this.onChange(e.detail.scrollTop),this.triggerEvent("scroll",e.detail)},onScrollToUpper:function(e){this.triggerEvent("scrolltoupper",e.detail)},onScrollToLower:function(e){this.triggerEvent("scrolltolower",e.detail)},getOffsetForIndex:function(e,t,n){var r=1<arguments.length&&void 0!==t?t:this.data.itemHeight,i=2<arguments.length&&void 0!==n?n:this.items.length;return Math.max(0,Math.min(e,i-1))*r},render:function(e,t){var n=this,r=this.data.scrollOffset;Array.isArray(e)&&(this.items=e),this.firstRendered||(this.firstRendered=!0,r=this.getOffsetForIndex(this.data.scrollToIndex)),this.getBoundingClientRect(function(){return n.onChange(r,!0,t)})},scrollTo:function(e,t){if("number"==typeof e){var n=Math.max(0,Math.min(e,this.items.length*this.data.itemHeight));this.onChange(n,!0,t)}},scrollToIndex:function(e,t){"number"==typeof e&&this.onChange(this.getOffsetForIndex(e),!0,t)},setScrollHandler:function(e){var t=0<arguments.length&&void 0!==e?e:this.data.debounce;this.scrollHandler=t?(0,_debounce.debounce)(this.onScroll.bind(this),t,{leading:!0,maxWait:t,trailing:!0}):this.onScroll},noop:function(){},getBoundingClientRect:function(t,e){var n=this;void 0===this.data.offsetTop||e?(0,_useDOM.useRect)(".".concat(this.data.prefixCls),this).then(function(e){e&&n.setData({offsetTop:e.top},t)}):t.call(this)}},created:function(){this.items=[],this.firstRendered=!1},ready:function(){var e=this.data,t=e.height,n=e.debounce;this.updatedStyle(t),this.setScrollHandler(n),this.getBoundingClientRect(),this.loadData()}});