jufubao-movie 1.0.39-beta1 → 1.0.39-beta4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "jufubao-movie",
-  "version": "1.0.39-beta1",
+  "version": "1.0.39-beta4",
   "private": false,
   "description": "聚福宝在线选座业务组件插件包",
   "main": "index.js",

package/src/components/JfbMovieLineLineSeat/Attr.js

@@ -4,6 +4,17 @@ export default {
   style: [],
   advanced: [],
   content: [
+    {
+      label: '是否显示影院名称:',
+      ele: 'xd-radio',
+      valueKey: 'isShowTitle',
+      value: 'Y',
+      groupKey:'content',
+      list: [
+        {label: '是', value: 'Y'},
+        {label: '否', value: 'N'},
+      ]
+    },
     {
       label: '订单确认路径:',
       ele: 'xd-select-pages-path',

package/src/components/JfbMovieLineLineSeat/JfbMovieLineLineSeat.vue

@@ -18,14 +18,23 @@
     <!-- #endif -->
     <view class="jfb-movie-line-line-seat__body">
       <view v-if="loadingList" class="skeleton-wrap">
-        <view class="seat_head">
+        <view class="seat_head" v-if="isShowTitle === 'Y'">
           <view></view>
           <view></view>
         </view>
-        <view class="seat_body">
-          <view class="seat_line" v-for="i in 7" :key="i">
-            <view class="seat_item" v-for="ii in 10" :key="ii"></view>
+        <view class="seat_tips">
+          <view></view>
+          <view></view>
+          <view></view>
+          <view></view>
+          <view></view>
+        </view>
+        <view class="seat_body" :class="{Y:this.isShowTitle ==='Y', 'N': isShowTitle ==='N'}">
+          <view class="seat_line" v-for="i in yItem" :key="i">
+            <view class="seat_item" v-for="ii in xItem" :key="ii"></view>
           </view>
+          <view v-if="isShowTitle === 'Y'" class="line-Y"></view>
+          <view v-else class="line-N"></view>
         </view>
         <view class="seat_notice"></view>
         <view class="seat_foot">
@@ -37,6 +46,7 @@
       <xd-online-seat
         v-if="filmId"
         ref="xdOnlineSeat"
+        :is-show-title="isShowTitle"
         :key="cinemaSeatKey"
         :is-old="false"
         :film-id="filmId"
@@ -84,8 +94,11 @@
         //面板
         payPath: "", //三方支付路径
         moviePayPath: "", //订单确认路径
+        isShowTitle:'Y',//是否显示影院名称
         timer: null,
         time: 0,
+        xItem: 10,
+        yItem: 7,
       }
     },
     watch: {
@@ -98,6 +111,7 @@
       this.init(this.container);
       let systemInfo = uni.getSystemInfoSync();
       getApp().globalData.$systemInfo = systemInfo;
+
     },
     methods: {
       onJfbLoad(options) {
@@ -152,7 +166,10 @@
        */
       init(container) {
         this.moviePayPath = getContainerPropsValue(container, 'content.movie_pay_path', {value: ""}).value;
-        this.payPath = getContainerPropsValue(container, "content.payPath", {value: "/system/system/pay"}).value;
+        this.payPath = getContainerPropsValue(container, "content.payPath", {value: ""}).value;
+        this.isShowTitle = getContainerPropsValue(container, "content.isShowTitle", 'Y');
+        if(this.isShowTitle === 'Y') this.yItem = 7;
+        else this.yItem = 10;
       },
       handleGetFilm(resolve) {
         // console.log('11111', paiqi.result);
@@ -326,29 +343,75 @@
 
   .jfb-movie-line-line-seat {
     &__body {
+      background-color: #f8f8f8;
       .skeleton-wrap{
         height: 100vh;
+
         .seat_head{
-          box-shadow: 0 0 7px rgba(0, 0, 0, 0.2);
-          padding: 20rpx 40rpx;
-          margin-bottom: 20rpx;
+          border-radius: 24rpx;
+          overflow: hidden;
+          margin: 20rpx 20rpx 5rpx;
+          box-shadow: 0 4rpx 40rpx rgba(0, 0, 0, 0.2);
+          position: relative;
+          padding: unit(20, rpx) unit(30, rpx);
+
           & > view:first-child{
-            .skeleton-item(300rpx);
+            .skeleton-item(80%, 36rpx);
+            padding-bottom: 15rpx;
           }
           & > view:last-child{
             .skeleton-item(100%, 30rpx);
             margin-top: 10rpx;
           }
         }
+        .seat_tips {
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          padding-top: 50rpx;
+          & > view {
+            .skeleton-item(80rpx, 40rpx);
+
+            margin-right: 20rpx;
+            & >view:last-child{
+              margin-right: 0;
+            }
+          }
+        }
         .seat_body{
-          .skeleton-item(100%, 700rpx, 0, #FEFEFE);
+          position: relative;
+
+          & .line-N {
+            position: absolute;
+            left:20rpx;
+            top:40rpx;
+            .skeleton-item(25rpx, 580rpx);
+          }
+          & .line-Y {
+            position: absolute;
+            left:20rpx;
+            top:40rpx;
+            .skeleton-item(25rpx, 400rpx);
+          }
+
+          &.Y {
+            .skeleton-item(100%, 500rpx, 0, #FEFEFE);
+          }
+          &.N {
+            .skeleton-item(100%, 700rpx, 0, #FEFEFE);
+          }
+
+
+
           padding: 20rpx 100rpx;
           box-sizing: border-box;
           .seat_line{
             display: flex;
             margin: 20rpx;
             .seat_item{
-              .skeleton-item(50rpx, 50rpx);
+              margin: 0 6rpx;
+              .skeleton-item(40rpx, 40rpx);
+              border-radius: 10rpx;
             }
           }
         }

package/src/components/JfbMovieLineLineSeat/XdOnlineSeat.vue

@@ -1,21 +1,14 @@
 <template>
   <view class="xd-seat" v-if="paiqiStatus">
+    <view class="float"></view>
     <view
       class="xd-seat__title"
-      v-if="filmInfo"
+      v-if="isShowTitle === 'Y' && filmInfo"
       id="xd-seat__title"
       :style="{ borderTopColor: styleMainColor }"
     >
-      <view class="xd-seat__title-name">{{ filmInfo["film_name"] }}</view>
-      <view class="xd-seat__title-address">{{cinemaInfo["cinema_name"] }}</view>
-      <view class="xd-seat__title-back" v-if="show" @click.stop="back">
-        <xd-font-icon
-          icon="iconzhiyuanfanhui12"
-          width="50"
-          height="50"
-          size="50"
-        ></xd-font-icon>
-      </view>
+      <view class="xd-seat__title-name" :style="{marginBottom:cinemaInfo['cinema_address']?'15rpx':0 }">{{ filmInfo["cinema_name"] }}</view>
+      <view class="xd-seat__title-address" v-if="cinemaInfo['cinema_address']">{{cinemaInfo["cinema_address"] }}</view>
     </view>
     <view class="xd-seat__content" v-if="height !== null" :style="getHeight">
       <xd-online-seat-move
@@ -38,9 +31,7 @@
           showIcon
         >
           <view
-            style="
-              padding: 10rpx 0rpx 10rpx 20rpx;
-            "
+            style="padding: 10rpx 0rpx 10rpx 20rpx;"
             v-for="(item, index) in noticeList"
             :key="index"
           >{{ item }}</view>
@@ -225,6 +216,10 @@ export default {
     XdNoticeBar,
   },
   props: {
+    isShowTitle: {
+      type: String,
+      default:'Y'
+    },
     isOld: {
       type: Boolean,
       default: true,
@@ -361,7 +356,7 @@ export default {
     this.show = false;
     // #endif
     // #ifdef H5
-    this.show = true;
+    this.show = false;
     // #endif
 
     this.getFilm();
@@ -477,6 +472,7 @@ export default {
       this.$emit("onGetFilm", (film) => {
         this.cinemaInfo = film["cinema_data"];
         this.filmInfo = this.getFilmInfo(film["film_data"]);
+        debugger
         this.getScheduleList(film["paiqi_data"]);
         console.log("getFilm", film);
         this.paiqiStatus = true;
@@ -491,10 +487,16 @@ export default {
      */
     setContent() {
       this.$nextTick(() => {
+        let elxs = [];
+        if(this.isShowTitle === 'Y') elxs.push('#xd-seat__title');
+        elxs.push('#xd-seat__footer');
         this.$xdUniHelper
-          .getWindowHeight(["#xd-seat__title", "#xd-seat__footer"], this)
+          .getWindowHeight(elxs, this)
           .then((res) => {
-            let top = res["#xd-seat__title"]["height"];
+            let top = 0;
+            if(this.isShowTitle === 'Y') {
+              top = res["#xd-seat__title"]["height"] ;
+            }
             let footer = res["#xd-seat__footer"]["height"];
             console.log("getFilm", top, footer);
             this.height = `calc(100vh - ${
@@ -648,6 +650,10 @@ export default {
 </script>
 
 <style scoped lang="less">
+.float {
+  height: 1px;
+  width: 100%;
+}
 .xd-seat {
   height: 100%;
   overflow-y: hidden;
@@ -702,22 +708,26 @@ export default {
   }
 
   &__title {
-    border-top-width: unit(4, rpx);
-    border-top-style: solid;
-    box-shadow: 0 0 unit(15, rpx) rgba(0, 0, 0, 0.2);
+    border-radius: 24rpx;
+    overflow: hidden;
+    margin: 20rpx 20rpx 5rpx;
+    box-shadow: 0 4rpx 40rpx rgba(0, 0, 0, 0.2);
     position: relative;
-    padding: unit(20, rpx) unit(20, rpx);
+    padding: unit(20, rpx) unit(30, rpx);
     z-index: 100;
 
     &-name {
-      font-size: @xd-font-size-lg;
+      font-size: 36rpx;
       line-height: unit(40, rpx);
-      padding-bottom: unit(10, rpx);
+      .uni-max-cut(1,40);
+      margin-bottom: 10rpx;
     }
 
     &-address {
-      font-size: @xd-font-size-sm;
-      color: #999;
+      font-size: 28rpx;
+      line-height: unit(36, rpx);
+      .uni-max-cut(1,36);
+      color: #A6A6A6;
     }
 
     &-back {
@@ -847,11 +857,11 @@ export default {
       &-input {
         font-size: @xd-font-size-base;
         background: #fff;
-        border-radius: unit(25, rpx);
+        border-radius: unit(30, rpx);
         flex: 1;
         height: unit(50, rpx);
         line-height: unit(50, rpx);
-        padding: unit(20,rpx) unit(25, rpx);
+        padding: unit(10,rpx) unit(25, rpx);
         background: #f8f8f8;
 
         // &:hover {

package/src/components/JfbMovieLineLineSeat/XdOnlineSeatMove.vue

@@ -407,7 +407,6 @@
       :style="{
         top : seatOffsetTop + 'px',
         width: 30 * scale + 'rpx',
-        background: styleMainColor
       }"
     >
       <view
@@ -1244,21 +1243,21 @@
     }
 
     &__stage {
-      background-image: url(@xd-bg-filmBg);
+      background-image: url('https://img.jufubao.cn/common/stage.png?v1');
       background-size: 100%;
       background-position: top left;
       background-repeat: no-repeat;
-      color: @xd-text-color;
+      color: #999;
       width: unit(533, rpx);
       height: unit(50, rpx);
-      font-size: @xd-font-size-base;
+      font-size: 20rpx;
       text-align: center;
       margin: unit(20, rpx) auto unit(40, rpx);
       box-sizing: border-box;
 
-      *, text {
+      & > text {
         display: inline-block;
-        padding: unit(30, rpx) 0 0;
+        padding: unit(40, rpx) 0 0;
       }
     }
 
@@ -1280,7 +1279,7 @@
       justify-content: center;
       align-content: center;
       height: unit(50, rpx);
-      padding: unit(30, rpx) 0;
+      padding: unit(20, rpx) 0 10rpx;
 
       &-item {
         font-size: @xd-font-size-base;
@@ -1344,7 +1343,7 @@
     &__left-bar {
       position: fixed;
       left: unit(10, rpx);
-      background-color: rgba(0, 0, 0, 0.3);
+      background-color: #ACADAF;
       border-radius: unit(14, rpx);
       overflow: hidden;
       font-size: unit(20, rpx);

package/src/components/JfbMovieTfkFilmList/ContentItem.vue

@@ -4,7 +4,7 @@
       class="image"
       :style="{marginRight: outSpacing + 'rpx',borderRadius:borderRadius+'rpx'}"
     >
-      <image :src="item['poster']"  :alt="item['show_name']"></image>
+      <image :src="item['poster']" :alt="item['show_name']" @error="handleError(item)"></image>
     </view>
     <view class="middle">
       <view class="name">{{item['show_name']}}</view>
@@ -84,6 +84,9 @@
 
     },
     methods:{
+      handleError(item){
+        item['poster'] = 'https://img.jufubao.cn/common/error_movie.png?v20'
+      },
       handleDetail(item){
         console.log('handleDetail.item',item,item.id);
         this.$emit('on-film-detail',item.id);
@@ -142,10 +145,9 @@
     align-items: flex-end;
     justify-content: flex-end;
     flex-flow: wrap;
-    height: 100%;
     box-sizing: border-box;
     width: 160rpx;
-    min-height: 200rpx;
+    height: 200rpx;
 
     & .score {
       height: 40rpx;

package/src/components/JfbMovieTfkFilmList/JfbMovieTfkFilmList.vue

@@ -81,11 +81,16 @@
           </view>
         </view>
         <!--poster-->
+        <view id="content-ref" class="content-ref"></view>
         <!--film hot|rightnow-->
         <view
           v-if="type === 'hot' || type === 'rightnow'"
           class="list-cont"
-          :style="{marginTop:outSpacing + 'rpx'}"
+          :style="{
+            marginTop:outSpacing + 'rpx',
+            paddingTop:paddingTop,
+            paddingBottom:paddingBottom,
+          }"
         >
           <view class="skeleton-wrap" v-if="dataList === null">
             <view
@@ -230,6 +235,37 @@
             ></view>
           </template>
         </view>
+        <view
+          id="preRendering"
+          class="preRendering"
+          v-if="type === 'list' && preRendering.length >0"
+          :style="{padding:outSpacing + 'rpx'}"
+        >
+          <view
+            class="list-cont-item"
+            v-for="(film,index) in preRendering"
+            :key="film.cinema_id"
+            :data-index="index"
+            :style="{
+              marginBottom:outSpacing + 'rpx',
+              padding:contMarginComp,
+              borderRadius:contRradius+ 'rpx',
+              border:contBorder,
+              boxShadow:contShadow,
+              backgroundColor:contBgColor,
+              height: 'auto'
+            }"
+          >
+            <content-cinema
+              style="width: 100%;height: 100%"
+              :item="film"
+              :out-spacing="outSpacing"
+              :color="{SEAT:mainColor,CODE:subMainColor,SELL:successColor}"
+              :type="type"
+              :border-radius="imgRradius"
+            ></content-cinema>
+          </view>
+        </view>
         <!--cinema-->
         <view class="hasNoData" v-if="dataList && dataList.length > 0 && pageToken === ''">已经到底没有更多数据了</view>
       </view>
@@ -260,6 +296,7 @@
   import XdQueryFilter from "./XdQueryFilter.vue";
   import {mapState} from "vuex";
   import Color from "color";
+  import VirtualList from "@/lib/VirtualList";
 
   export default {
     name: "JfbMovieTfkFilmList",
@@ -276,6 +313,8 @@
     ],
     data() {
       return {
+        /**@type {VirtualList}**/
+        virtualList:null,
         options: {},
         //hideMask: true,
         type:'', //hot rightnow
@@ -284,7 +323,7 @@
         backgroundColor:'',
         isPreview: false,
         pageToken:'1',
-        pageSize: 20,
+        pageSize: 10,
         total: null,
         isFirstLoadingData: false,
         dataList:null,
@@ -347,7 +386,9 @@
 
         buyPath:'',
         fimeDetailPath:'',
-
+        paddingTop: 0,
+        paddingBottom: 0,
+        preRendering:[],
 
       }
     },
@@ -447,6 +488,17 @@
         this.clearDataVar();
         this.getList();
       },
+      preRendering(){
+        this.$nextTick(()=>{
+          const query = uni.createSelectorQuery().in(this);
+          query
+            .select('#preRendering > .list-cont-item')
+            .boundingClientRect((data) => {
+              console.log("得到布局位置信息" + JSON.stringify(data));
+            })
+            .exec();
+        })
+      }
     },
     created() {
       this.isPreview = this.$configProject.isPreview;
@@ -597,6 +649,7 @@
         //过滤之后不够分页直接返回值
         if(fitlerData.length <= this.pageSize) {
           this.dataList = this.$xdUniHelper.cloneDeep(fitlerData);
+          this.preRendering = this.$xdUniHelper.cloneDeep(fitlerData);
           this.pageToken = ''
           return;
         }
@@ -611,6 +664,7 @@
           return;
         }
 
+        this.preRendering = this.$xdUniHelper.cloneDeep(list);
         this.dataList = (this.dataList||[]).concat(this.$xdUniHelper.cloneDeep(list));
         if(this.pageSize < list.length) this.pageToken = '';
         else this.pageToken = (Number(this.pageToken)+1) + '';
@@ -618,6 +672,9 @@
 
       handleTab(value){
         if(value === this.type) return;
+        if(value === 'hot' || value === 'rightnow' ) {
+          this.virtualList.onChangeTab();
+        }
         this.type = value;
         this.dataList = null;
         this.pageToken = '1';
@@ -667,9 +724,11 @@
         }).then(res => {
           if(this.isFirstLoadingData) this.$xdHideLoading({});
 
+
           //影片列表处理
           if(this.type === 'rightnow' || this.type==='hot'){
-            this.dataList = (this.dataList||[]).concat(res['list']);
+            //this.dataList = (this.dataList||[]).concat(res['list']);
+            this.virtualList.pushVirtualData(res['list']);
             this.pageToken = res.next_page_token;
             return;
           }
@@ -684,6 +743,7 @@
             //小于数量页面显示记录
             if(res['list'].length <= this.pageSize) {
               this.dataList = res['list'];
+              this.preRendering = this.$xdUniHelper.cloneDeep(res['list']);
               this.pageToken = '';
               return
             }
@@ -701,6 +761,33 @@
       onJfbLoad(options) {
         this.options = options;
 
+        this.virtualList = new VirtualList(this, '#content-ref', {
+          fixedHeight: 240 + Number(this.outSpacing) + 20 * 2 ,
+          otherHeight: Number(this.outSpacing),
+          //获取节点数据
+          getDom:(id)=>{
+            return new Promise((resolve,reject)=>{
+              uni.createSelectorQuery().in(this).select(id)
+                .boundingClientRect((data)=>{
+                  if(data && data.top !== undefined)  resolve(data);
+                  else reject(null)
+                }).exec()
+            });
+          },
+          //获取当前this
+          getParentThis(){
+            return this
+          },
+          callback: ({data, paddingTop,  paddingBottom}) =>{
+            if(this.type === 'hot' ||this.type ==='rightnow' ) {
+              this.paddingTop = paddingTop;
+              this.paddingBottom = paddingBottom;
+              this.dataList = data;
+            }
+
+          },
+        });
+
         jfbRootExec('getTFKPosterContent', {
           vm: this,
           data: {
@@ -782,6 +869,12 @@
         this.setShowTypeList();
       },
 
+      onJfbScroll(options){
+        if(this.type === 'hot' || this.type === 'rightnow'){
+          this.virtualList.onScrollEvent(options.e.scrollTop);
+        }
+      },
+
       setShowTypeList(){
         let list = [];
         if(this.showHot === 'Y') list.push(this.typeList["hot"]);
@@ -811,6 +904,7 @@
           this.$xdUniHelper.navigateBack();
         }
       },
+
       //重新回去广告位置工
       onJfbUpdate() {
         this.onJfbLoad(this.options)
@@ -853,6 +947,7 @@
       .list-cont {
         position: relative;
         z-index: 2;
+        min-height: 600rpx;
         .skeleton-wrap {
           .skeleton-wrap-item {
             height: 240rpx;
@@ -1011,6 +1106,17 @@
       font-size: 26rpx;
     }
 
+    .preRendering {
+      position: fixed;
+      top: -9999px;
+      left: -9999px;
+      opacity: 0;
+      z-index: 0;
+      width: 100%;
+      box-sizing: border-box;
+      overflow: hidden;
+    }
+
     .hasNoData {
       height: 80rpx;
       line-height: 80rpx;

package/src/components/JfbMovieTfkFilmRecommend/JfbMovieTfkFilmRecommend.vue

@@ -106,7 +106,7 @@
               @click="toFilmInfo(item.id)"
             >
               <view class="tfk-scroll-item-image" :style="{borderRadius:contItemRradius + 'rpx'}">
-                <image :src="item.poster" :alt="item.show_name" mode="scaleToFill"></image>
+                <image :src="item.poster" :alt="item.show_name" mode="scaleToFill" @error="handleError(item)"></image>
               </view>
               <view class="tfk-scroll-item-title">{{item.show_name}}</view>
               <view class="tfk-scroll-item-btn">
@@ -310,6 +310,9 @@
       this.init(this.container);
     },
     methods: {
+      handleError(item){
+        item['poster'] = 'https://img.jufubao.cn/common/error_movie.png?v20'
+      },
       toFilmInfo(film_id){
         console.warn(`toFilmInfo(影片详情).${film_id}`)
         if(!this.fimeDetailPath) {

package/src/lib/VirtualList.js

@@ -0,0 +1,184 @@
+'use strict';
+//原点对象
+let __orgUpdateTop = null;
+
+export default class VirtualList {
+  virtualType='fixed';
+  virtualBufferHeight= 300;
+  virtualFixedItemHeight; //固定模式高度设置
+  virtualVue; //当前组件vm实例
+  virtualTotalData=[]; //数组长度
+  virtualHeightObj = {}; //高度序列index: {max:xx,min:xx}
+  $el= null; //开始点元素
+  offsetTop= null;//开始点元素的偏移量
+  eqMaxTimer = 0;//
+  otherHeight= 0; //调节高度
+  orgUpdateTop = 0; //开始点元素原点偏移量
+  isFirst = true;
+  startIndex= 0;
+  endIndex= 0;
+  screenHeight=0;//全屏高度
+
+  top=0;
+  bottom=0;
+  virtualCallback=  ()=>{};
+  status= false
+
+  /**
+   * @description 初始化或者重置对象
+   * @param $vm {Vue} vue对象
+   * @param $el {string}
+   * @param params {Object}
+   * @param params.type {string} 元素高度为固定或者非固定 其值：auto|fixed
+   * @param params.fixedHeight {number} 固定(rpx)（fixed）模式 (必选)
+   * @param params.bufferHeight {number} 缓冲高度(rpx)
+   * @param params.otherHeight {number} 其他高度(rpx)
+   * @param params.callback {Function} 回调方法
+   */
+  constructor($vm,$el, params ) {
+    this.virtualVue = $vm;
+    this.virtualBufferHeight = 480 *  this.virtualVue.$rpxNum;
+    if(params.type && ['auto','fixed'].includes(params.type)) this.virtualType = params.type;
+    if(params.bufferHeight) this.virtualBufferHeight = params.bufferHeight * this.virtualVue.$rpxNum;
+    if(params.otherHeight) this.otherHeight = params.otherHeight * this.virtualVue.$rpxNum;
+    if(this.virtualType === 'fixed'){
+      if(params.fixedHeight === undefined) throw new Error(`FixedHeight is require, got is ${params.fixedHeight}`);
+      else this.virtualFixedItemHeight = params.fixedHeight * this.virtualVue.$rpxNum;
+    }
+    this.virtualTotalData = [];
+    this.virtualVue.virtualViewData = null;
+    this.$el = $el;
+    this.virtualVue.$nextTick(()=>{
+      this.checkOffsetTop();
+    });
+    this.screenHeight = uni.getSystemInfoSync().safeArea.height;
+    if(typeof params.callback !== 'function') {
+      throw new Error(`FixedHeight is require, got is ${params.fixedHeight}`);
+    }else this.virtualCallback = params.callback;
+
+  }
+
+  checkOffsetTop(){
+    if(__orgUpdateTop) {
+      this.orgUpdateTop = __orgUpdateTop;
+      this.status = true;
+      return;
+    }
+    //相对了10次不在检查
+    if(this.eqMaxTimer >= 3) {
+      this.status = true;
+      __orgUpdateTop = this.orgUpdateTop;
+      return
+    }
+    if(this.virtualVue.$refs[this.$el]) {
+      let offsetTop =  this.virtualVue.$refs[this.$el].$el.getBoundingClientRect().top;
+      if(this.offsetTop === offsetTop) {
+        this.eqMaxTimer++;
+      }
+      else this.offsetTop = offsetTop;
+      this.orgUpdateTop = offsetTop + this.otherHeight;
+      if(this.virtualType === 'fixed') this.computedMinAndMaxFixed();
+    }
+    setTimeout(()=>{
+      this.checkOffsetTop();
+    }, 200)
+  }
+
+  cloneDeep(data){
+    return JSON.parse(JSON.stringify(data));
+  }
+
+  computedMinAndMaxFixed(){
+    let itemHeight = this.virtualFixedItemHeight;
+    this.virtualTotalData.map((item,index)=>{
+      if(index === 0) {
+        this.virtualHeightObj[index] = {
+          min: this.orgUpdateTop,
+          max: this.orgUpdateTop + itemHeight
+        }
+      }
+      else {
+        let prev = this.virtualHeightObj[index-1];
+        this.virtualHeightObj[index] = {
+          min: prev.max,
+          max: prev.max + itemHeight
+        }
+      }
+    });
+  }
+
+  pushVirtualData(data, height){
+    //清空响应对象
+    this.virtualVue.virtualViewData = null;
+    if(this.virtualTotalData.length > 0) this.isFirst = false;
+
+    //非固定模式
+    if(this.virtualType === 'auto') {
+      if(!height) throw new Error(`height is require, got is ${height}`);
+      this.virtualHeightObj = Object.assign({},this.virtualHeightObj, this.cloneDeep(height));
+    }
+
+    //固定模式
+    if(this.virtualType === 'fixed') {
+      this.virtualTotalData = this.virtualTotalData.concat(this.cloneDeep(data));
+      this.computedMinAndMaxFixed();
+      if(this.isFirst) this.onScrollEvent(0);
+    }
+
+    this.isFirst = false
+  }
+
+  /**
+   * @description 滚动事件
+   * @param scrollTop
+   */
+  onScrollEvent(scrollTop) {
+    //非固定计算索引
+    let time = new Date().getTime();
+    //计算开始索引
+    Object.keys(this.virtualHeightObj).map((key,index)=>{
+      let top = scrollTop - this.virtualBufferHeight;
+
+      //滚动高度小于元素顶部与屏幕顶部偏移量直接取值0索引
+      if(top <= this.orgUpdateTop) {
+        this.startIndex = 0;
+        return;
+      }
+
+
+      ////距离底部有1屏幕高度
+      let maxScroll = this.virtualHeightObj[this.virtualTotalData.length -1].max - this.screenHeight;
+      if(scrollTop >= maxScroll) {
+        top = maxScroll;
+      }
+
+      if(top >= this.virtualHeightObj[key].min && top < this.virtualHeightObj[key].max){
+        this.startIndex = Number(key);
+      }
+    })
+
+    //计算结束索引
+    this.endIndex = this.virtualTotalData.length;
+    Object.keys(this.virtualHeightObj).map((key,index)=>{
+      let top = scrollTop <= this.orgUpdateTop ? this.orgUpdateTop : scrollTop
+      let endScrollTop = top + this.screenHeight + this.virtualBufferHeight;
+      if(endScrollTop >= this.virtualHeightObj[key].min && endScrollTop < this.virtualHeightObj[key].max){
+        this.endIndex = Number(key);
+      }
+    });
+
+
+    this.top = this.virtualHeightObj[this.startIndex].min - this.orgUpdateTop.toString() + 'px'
+    this.bottom = this.virtualHeightObj[this.virtualTotalData.length-1].max - this.virtualHeightObj[this.endIndex-1].max.toString() + 'px'
+    console.log('onScrollEvent.index',this.endIndex - this.startIndex, this.startIndex,this.endIndex, this.top, this.bottom)
+
+    /**@type Function **/
+    this.virtualCallback({
+      paddingTop:this.top,
+      paddingBottom: this.bottom,
+      data:this.cloneDeep(this.virtualTotalData).slice(this.startIndex, this.endIndex + 1)}
+    );
+  }
+}
+
+