jufubao-movie 1.0.39-beta1 → 1.0.39-beta11

package/src/lib/VirtualList.js

@@ -0,0 +1,269 @@
+'use strict';
+
+export default class VirtualList {
+  virtualType='fixed';
+  virtualBufferHeight= 300;
+  virtualFixedItemHeight; //固定模式高度设置
+  //virtualVue; //当前组件vm实例(小程序不可用)
+  virtualTotalData=[]; //数组长度
+  virtualHeightObj = {}; //高度序列index: {max:xx,min:xx}
+  autoHeight = []; //保存动态高度高度值
+  $el= null; //开始点元素
+  offsetTop= null;//开始点元素的偏移量
+  eqMaxTimer = 0;//
+  marginTopAndBottom= 0; //上下边距
+  paddingTopAndBottom= 0; //上下边距
+  orgUpdateTop = 0; //开始点元素原点偏移量
+  isFirst = true;
+  startIndex= 0;
+  endIndex= 0;
+  screenHeight=0;//全屏高度
+  contentRefBottomMargin= 0 //计算偏移量容器与内容直接的边距
+
+  top=0;
+  bottom=0;
+  virtualCallback=  ()=>{};
+  status= false;
+  options = null;
+
+
+
+  /**
+   * @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.marginTopAndBottom {Number} 上下边距 单位：rpx
+   * @param params.paddingTopAndBottom {Number} 上下填充 单位：rpx
+   * @param params.contentRefBottomMargin {Number}  计算偏移量容器与内容直接的边距 rpx
+   * @param params.bufferHeight {number} 缓冲高度(rpx)
+   * @param params.callback {Function} 回调方法
+   */
+  constructor($vm ,$el, params ) {
+    this.options = params;
+    this.$pxNum = $vm.$pxNum
+    this.virtualBufferHeight = 300;
+    if(params.type && ['auto','fixed'].includes(params.type)) this.virtualType = params.type;
+    if(params.bufferHeight) this.virtualBufferHeight = params.bufferHeight * $vm.$rpxNum;
+    if(params.marginTopAndBottom) this.marginTopAndBottom = params.marginTopAndBottom * $vm.$rpxNum;
+    if(params.paddingTopAndBottom) this.paddingTopAndBottom = params.paddingTopAndBottom * $vm.$rpxNum;
+    if(params.contentRefBottomMargin) this.contentRefBottomMargin = params.contentRefBottomMargin * $vm.$rpxNum;
+    if(params.fixedHeight)  this.virtualFixedItemHeight = params.fixedHeight * $vm.$rpxNum;
+    this.virtualTotalData = [];
+    this.$el = $el;
+    $vm.$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;
+  }
+
+  /**
+   * @description 获取原点的偏移量
+   */
+  checkOffsetTop(){
+
+    //检查前后返回值相等并且大于5次就不在检查
+    if(this.eqMaxTimer >= 5) {
+      this.status = true;
+      return
+    }
+
+    this.options.getDom(this.$el).then(res=>{
+      let offsetTop =  res.top
+      if(this.offsetTop === offsetTop) {
+        this.eqMaxTimer++;
+      }
+      else this.offsetTop = offsetTop;
+      this.orgUpdateTop = offsetTop + this.contentRefBottomMargin;
+      this.computedMinAndMaxFixed();
+      setTimeout(()=>{
+        this.checkOffsetTop();
+      }, 10)
+    }).catch(res=>{
+      setTimeout(()=>{
+        this.checkOffsetTop();
+      }, 10)
+    })
+  }
+
+  cloneDeep(data){
+    return JSON.parse(JSON.stringify(data));
+  }
+
+  /**
+   * @description 固定高度模式初始化列表记录范围
+   */
+  computedMinAndMaxFixed(){
+    if(this.virtualType === 'fixed' &&
+      this.virtualFixedItemHeight === undefined
+    ) throw new Error(`FixedHeight is require, got is ${this.virtualFixedItemHeight}`);
+
+    let itemHeight = this.virtualFixedItemHeight + this.marginTopAndBottom + this.paddingTopAndBottom;
+    let height =  this.virtualFixedItemHeight;
+
+    this.virtualTotalData.map((item,index)=>{
+      if(this.virtualType === 'auto'){
+        itemHeight = this.autoHeight[index] + this.marginTopAndBottom + this.paddingTopAndBottom;
+        height = this.autoHeight[index];
+      }
+
+      if(index === 0) {
+        this.virtualHeightObj[index] = {
+          min: this.orgUpdateTop,
+          max: this.orgUpdateTop + itemHeight,
+          height: height * this.$pxNum ,
+          itemHeight
+        }
+      }
+      else {
+        let prev = this.virtualHeightObj[index-1];
+        this.virtualHeightObj[index] = {
+          min: prev.max,
+          max: prev.max + itemHeight,
+          height: height * this.$pxNum ,
+          itemHeight
+        }
+      }
+    });
+
+    console.log(this.virtualHeightObj)
+  }
+
+  /**
+   * @description 新增数据时候调用此方法（对外）
+   * @param data {Array} 列表数据
+   * @param height {Array} 高度数组
+   */
+  pushVirtualData(data, height){
+    if(this.status) {
+      //清空响应对象
+      if(this.virtualTotalData.length > 0) this.isFirst = false;
+      this.virtualTotalData = this.virtualTotalData.concat(this.cloneDeep(data));
+
+      //非固定模式
+      if(this.virtualType === 'auto') {
+        if(!height) throw new Error(`height is require, got is ${height}`);
+        this.autoHeight = this.autoHeight.concat(height)
+        this.computedMinAndMaxFixed();
+      }
+
+      //固定模式
+      if(this.virtualType === 'fixed') {
+        this.computedMinAndMaxFixed();
+      }
+
+      //首次加载
+      if(this.isFirst) this.onScrollEvent(0);
+      this.isFirst = false
+    }
+    else {
+      setTimeout(()=>{
+        this.pushVirtualData(data, height)
+      },100)
+    }
+  }
+
+  /**
+   * @description 滚动事件（对外）
+   * @param scrollTop
+   */
+  onScrollEvent(scrollTop) {
+
+    if(!this.status || this.virtualTotalData.length === 0) {
+      /**@type Function **/
+      this.virtualCallback({
+        paddingTop:0,
+        paddingBottom: 0,
+        data: []
+      });
+      return;
+    }
+
+    //非固定计算索引
+    //计算开始索引
+    Object.keys(this.virtualHeightObj).map((key,index)=>{
+      let top = scrollTop -  this.virtualBufferHeight;
+
+      //滚动高度小于元素顶部与屏幕顶部偏移量直接取值0索引
+      if(top < this.orgUpdateTop) {
+        this.startIndex = 0;
+        return;
+      }
+
+      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;
+
+      ////距离底部有1屏幕高度
+      let maxScroll = this.virtualHeightObj[this.virtualTotalData.length -1].max;
+      if(endScrollTop >= maxScroll) {
+        endScrollTop = maxScroll;
+      }
+      if(endScrollTop > this.virtualHeightObj[key].min && endScrollTop <= this.virtualHeightObj[key].max){
+        this.endIndex = Number(key);
+      }
+    });
+
+    //计算数据是否显示
+    let data = this.cloneDeep(this.virtualTotalData).map((item,index)=>{
+      item['is_content_show'] = index >= this.startIndex && index <= this.endIndex;
+      item['is_content_height'] =  this.virtualHeightObj[index].height
+      return item
+    });
+
+    console.log('onScrollEvent.index',this.endIndex - this.startIndex, this.startIndex,this.endIndex, scrollTop);
+
+    /**@type Function **/
+    this.virtualCallback({
+      data: data
+    });
+
+  }
+
+  /**
+   * @description 切换Tab调用此方法（对外）
+   * @param virtualType {string} 类型 auto|fixed
+   * @param $vm {Vue} vue实例 (在自动高度模式必选)
+   * @param ref 元素对象 (在自动高度模式必选)
+   */
+  onChangeTab($vm , ref , virtualType){
+    this.virtualTotalData = [];
+    this.isFirst = true;
+    this.autoHeight = [];
+    this.endIndex = 0;
+    this.startIndex = 0;
+
+    //改变顶部偏移量元素
+    if(['auto','fixed'].includes(virtualType) && virtualType !== this.virtualType) {
+      if(!$vm)  throw new Error(`onChangeTab, $vm is require, got is ${$vm.$xdUniHelper.checkVarType($vm)},value is ${$vm}`);
+      if(!ref)  throw new Error(`onChangeTab, ref is require, got is ${$vm.$xdUniHelper.checkVarType(ref)}, value is ${ref}`);
+      this.virtualType = virtualType;
+      this.orgUpdateTop = 0;
+      this.$el = ref;
+      this.status = false;
+      this.eqMaxTimer = 4;
+      $vm.$nextTick(()=>{
+        this.checkOffsetTop();
+      });
+      this.virtualCallback({
+        paddingTop: this.top,
+        paddingBottom: this.bottom,
+        data:null,
+      });
+    }
+  }
+}
+
+

package/src/mixins/posterMixins.js

@@ -61,65 +61,6 @@ export default {
       }
       return ''
     },
-
-    handlePosterClick(item) {
-      if(!item.redirect_data) {
-        console.warn(`未配置链接地址: ${item.redirect_data}`);
-        console.error(`未配置链接地址: ${item.redirect_data}`);
-        return
-      }
-
-      //内部链接跳转地址
-      if (item.redirect_type === 'INN') {
-        try {
-          let url = JSON.parse(item.redirect_data);
-          let params = '';
-          if(url.page) {
-            if (item['redirect_params']) params = `?${item['redirect_params']}`;
-            this.$xdUniHelper.navigateTo({url: url.page + params})
-          }
-          else {
-            console.error(`应用链接配置错误: ${url.page}`)
-          }
-        } catch (e) {
-          console.error(`应用链接配置错误: ${item.redirect_data}`)
-        }
-      }
-
-      //外部链接
-      if (item.redirect_type === 'URL') {
-        let reg = /^(http:\/\/|https:\/\/|\/\/)+.+$/;
-        let spReg = /(-apiuri\/v)/;
-        //#ifdef MP-WEIXIN
-        try {
-          let url = JSON.parse(item.redirect_data);
-          if (reg.test(url.url) || spReg.test(url.url)) {
-            console.warn(`广告跳转外站: ${url.url}`)
-            this.$xdUniHelper.navigateTo(url);
-          } else {
-            console.error(`广告跳转外站配置错误: ${url.url}`)
-          }
-        } catch (e) {
-          console.error(`广告跳转外站配置错误: ${item.redirect_data}`)
-        }
-        //#endif
-        //#ifdef H5
-        try {
-          let url = JSON.parse(item.redirect_data);
-          console.warn(`广告跳转外站: ${url.url}`);
-          this.$xdUniHelper.redirectTo(url, false)
-        } catch (e) {
-          console.error(`广告跳转外站配置错误: ${item.redirect_data}`)
-        }
-        //#endif
-
-      }
-
-      //无跳转地址
-      if(item.redirect_type === 'EMP') {
-        console.warn(`无跳转地址`);
-      }
-    },
   },
 }