jufubao-movie 1.0.39-beta6 → 1.0.39-beta8

package/package.json

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

package/src/components/JfbMovieTfkFilmList/JfbMovieTfkFilmList.vue

@@ -81,7 +81,7 @@
           </view>
         </view>
         <!--poster-->
-        <view id="content-ref" class="content-ref"></view>
+        <view v-if="type === 'hot' || type === 'rightnow'" id="content-ref" class="content-ref"></view>
         <!--film hot|rightnow-->
         <view
           v-if="type === 'hot' || type === 'rightnow'"
@@ -174,10 +174,15 @@
             ></xd-query-filter>
           </view>
         </view>
+        <view id="content-list-ref" v-if="type === 'list'" class="content-ref"></view>
         <view
           v-if="type === 'list'"
           class="list-cont"
-          :style="{marginTop:outSpacing + 'rpx'}"
+          :style="{
+            marginTop:outSpacing + 'rpx',
+            paddingTop:paddingTop,
+            paddingBottom:paddingBottom,
+          }"
         >
           <view class="skeleton-wrap" v-if="dataList === null">
             <view
@@ -326,7 +331,7 @@
         pageSize: 10,
         total: null,
         isFirstLoadingData: false,
-        dataList:null,
+
         cinemaOrgDataList:null,
         cinemaAreaList:null,
         sort_consume_mode:'',//获取影院数据排序
@@ -386,8 +391,13 @@
 
         buyPath:'',
         fimeDetailPath:'',
+
+        //页面列表展示数据
+        dataList:null,
         paddingTop: 0,
         paddingBottom: 0,
+
+        //计算高度预加载列表
         preRendering:[],
 
       }
@@ -442,6 +452,7 @@
         }
         return style[this.mode]
       },
+
       contMarginComp(){
         let str = `${this.checkValue(this.contMargin.top, 20)}rpx`;
         str = `${str} ${this.checkValue(this.contMargin.right, 20)}rpx`;
@@ -463,8 +474,6 @@
           height: 280,
         }
       },
-
-
     },
     watch: {
       container(value, oldValue) {
@@ -487,15 +496,12 @@
         this.clearDataVar();
         this.getList();
       },
-      preRendering(){
+
+      preRendering(val){
         this.$nextTick(()=>{
-          const query = uni.createSelectorQuery().in(this);
-          query
-            .select('#preRendering > .list-cont-item')
-            .boundingClientRect((data) => {
-              console.log("得到布局位置信息" + JSON.stringify(data));
-            })
-            .exec();
+          if(val.length > 0) {
+            this.handlePreRendering(val);
+          }
         })
       }
     },
@@ -503,8 +509,53 @@
       this.isPreview = this.$configProject.isPreview;
       this.backgroundColor = Color(this.warningColor).alpha(0.2).toString();
       this.init(this.container);
+
+      this.virtualList = new VirtualList(this, this.type ==='list'?'#content-list-ref':'#content-ref', {
+        fixedHeight: 240 + Number(this.outSpacing) + 20 * 2 ,
+        otherHeight: Number(this.outSpacing),
+        type:this.type ==='list'?'auto':'fixed',
+        //获取节点数据
+        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}) =>{
+          this.paddingTop = paddingTop;
+          this.paddingBottom = paddingBottom;
+          this.dataList = data;
+        },
+      });
     },
     methods: {
+      /**
+       * @description 非固定高度处理
+       * @param list
+       */
+      handlePreRendering(list){
+        const query = uni.createSelectorQuery().in(this);
+        query
+          .selectAll('#preRendering > .list-cont-item')
+          .boundingClientRect((data) => {
+            if(data && data.length > 0) {
+              let height = [];
+              data.map(item=>{
+                height[item.dataset.index] = item.height + Number(this.outSpacing) * this.$rpxNum;
+              });
+              this.virtualList.pushVirtualData(list,height);
+            }
+          })
+          .exec();
+      },
+
       clearDataVar(){
         this.dataList = null;
         this.pageToken = '1';
@@ -602,6 +653,7 @@
         this.areaName = sortData.area_name;
         this.pageToken = '1';
         this.dataList = null;
+        this.virtualList.onChangeTab();
         this.getList();
         setTimeout(()=>{
           this.curQueryTab = '';
@@ -647,7 +699,6 @@
 
         //过滤之后不够分页直接返回值
         if(fitlerData.length <= this.pageSize) {
-          this.dataList = this.$xdUniHelper.cloneDeep(fitlerData);
           this.preRendering = this.$xdUniHelper.cloneDeep(fitlerData);
           this.pageToken = ''
           return;
@@ -664,7 +715,6 @@
         }
 
         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) + '';
       },
@@ -672,7 +722,10 @@
       handleTab(value){
         if(value === this.type) return;
         if(value === 'hot' || value === 'rightnow' ) {
-          this.virtualList.onChangeTab();
+          this.virtualList.onChangeTab(this,'#content-ref', 'fixed' );
+        }
+        if(value === 'list') {
+          this.virtualList.onChangeTab(this,'#content-list-ref', 'auto' );
         }
         this.type = value;
         this.dataList = null;
@@ -735,25 +788,26 @@
 
           //影院列表处理
           if(this.type === 'list') {
-            //res['list'].splice(0, 31);
+            debugger
             this.cinemaOrgDataList = res['list'];
             this.cinemaAreaList = [{area_code:'all', area_name:'全城'}].concat(res['area_list']);
 
+            //预览模式
+            if(this.isPreview)  {
+              this.dataList = (this.dataList||[]).concat(res['list'].slice(0, 20));
+              return;
+            }
+
             //小于数量页面显示记录
             if(res['list'].length <= this.pageSize) {
-              this.dataList = res['list'];
+              //this.dataList = res['list'];
               this.preRendering = this.$xdUniHelper.cloneDeep(res['list']);
               this.pageToken = '';
               return
             }
 
-            if(this.isPreview) {
-              this.dataList = (this.dataList||[]).concat(res['list'].slice(0, 20));
-            }
-            else {
-              //正常处理
-              this.getCinemaOrgData();
-            }
+            //正常处理
+            this.getCinemaOrgData();
 
           }
 
@@ -765,34 +819,6 @@
 
       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: {

package/src/lib/VirtualList.js

@@ -5,7 +5,7 @@ let idx = 0;
 
 export default class VirtualList {
   virtualType='fixed';
-  virtualBufferHeight= 300;
+  virtualBufferHeight= 0;
   virtualFixedItemHeight; //固定模式高度设置
   //virtualVue; //当前组件vm实例(小程序不可用)
   virtualTotalData=[]; //数组长度
@@ -44,13 +44,13 @@ export default class VirtualList {
     if(params.type && ['auto','fixed'].includes(params.type)) this.virtualType = params.type;
     if(params.bufferHeight) this.virtualBufferHeight = params.bufferHeight * $vm.$rpxNum;
     if(params.otherHeight) this.otherHeight = params.otherHeight * $vm.$rpxNum;
-    if(this.virtualType === 'fixed'){
-      if(params.fixedHeight === undefined) throw new Error(`FixedHeight is require, got is ${params.fixedHeight}`);
-      else this.virtualFixedItemHeight = params.fixedHeight * $vm.$rpxNum;
+    if(params.fixedHeight){
+      this.virtualFixedItemHeight = params.fixedHeight * $vm.$rpxNum;
     }
     this.virtualTotalData = [];
     this.$el = $el;
     $vm.$nextTick(()=>{
+      debugger
       this.checkOffsetTop();
     });
     this.screenHeight = uni.getSystemInfoSync().safeArea.height;
@@ -220,7 +220,7 @@ export default class VirtualList {
 
   /**
    * @description 切换Tab调用此方法（对外）
-   * @param virtualType {string} 类型
+   * @param virtualType {string} 类型 fixed|auto
    * @param $vm {Vue} vue实例 (在自动高度模式必选)
    * @param ref 元素对象 (在自动高度模式必选)
    */