jufubao-movie 1.0.39-beta11 → 1.0.39-beta12

package/package.json

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

package/src/components/JfbMovieTfkFilmList/JfbMovieTfkFilmList.vue

@@ -122,8 +122,22 @@
         </view>
         <!--film hot|rightnow-->
         <!--cinema-->
-        <view v-if="type === 'list'" id="list-filter" class="list-filter" :style="{marginTop:outSpacing + 'rpx'}">
-          <view class="list-filter-block" :class="{hasFitler:!!curQueryTab}">
+        <view class="list-filter-empty" v-if="isFixed"></view>
+        <view
+          v-if="type === 'list'"
+          id="list-filter"
+          class="list-filter"
+          :class="{
+            isFixed: isFixed,
+          }"
+          :style="{
+            marginTop:isFixed?0:(outSpacing + 'rpx'),
+            top: isFixed ? ((layoutInfo.top) +'rpx'): 0,
+            marginLeft:isFixed?0:(-outSpacing + 'rpx'),
+            marginRight:isFixed?0:(-outSpacing + 'rpx'),
+          }"
+        >
+          <view class="list-filter-block">
             <view @click="handleFilterTab('filter')">
               <xd-font-icon icon="iconrepository-xialaxuanxiangdown" size="24" color="#999"></xd-font-icon>
               <text>{{areaName}}</text>
@@ -386,6 +400,7 @@
         preRendering:[],
         listFilterTop:null,
         listFilterTopTimer:0,
+        isFixed: false,
       }
     },
     computed:{
@@ -544,7 +559,7 @@
               .select('#list-filter')
               .boundingClientRect((data) => {
                 if(data && data.top !==undefined){
-                  let listFilterTop = data.top - this.layoutInfo.top * this.$rpxNum - this.outSpacing  * this.$rpxNum;
+                  let listFilterTop = data.top - this.layoutInfo.top * this.$rpxNum;
                   if(listFilterTop !== this.listFilterTop) {
                     setTimeout(()=>{
                       this.getListFilterEleTop();
@@ -662,7 +677,7 @@
       handleFilterTab(tab){
         uni.pageScrollTo({
           scrollTop: this.listFilterTop,
-          duration: 200,
+          duration: 1,
           success:()=>{
             if(tab === this.curQueryTab ) {
               this.curQueryTab = ''
@@ -754,6 +769,7 @@
         if(value === this.type) return;
         this.type = value;
         if( this.type === 'hot' ||  this.type === 'rightnow' ) {
+          this.isFixed = false;
           this.virtualList.onChangeTab(this,'#content-ref', 'fixed' );
         }
         if( this.type === 'list') {
@@ -945,6 +961,12 @@
       onJfbScroll(options){
         //console.log(options.e.scrollTop)
         this.virtualList.onScrollEvent(options.e.scrollTop);
+
+        //未初始化完成不执行改逻辑
+        if(this.listFilterTop !== null) {
+          this.isFixed = options.e.scrollTop >= this.listFilterTop
+        }
+
       },
 
       setShowTypeList(){
@@ -1005,6 +1027,8 @@
   @import "./JfbMovieTfkFilmListLess.less";
 
   .jfb-movie-tfk-film-list {
+    position: relative;
+    z-index: 200;
     &__body{
       .tfk-list {
         & >view:first-child {
@@ -1149,9 +1173,12 @@
       .list-filter {
         position: relative;
         z-index: 3;
-        .hasFitler {
-          box-shadow: 0 -5rpx 20rpx 0 rgba(0,0,0, .1);
-          border-radius: 20rpx 20rpx 0 0;
+
+        &.isFixed {
+          position: fixed;
+          left:0;
+          right: 0;
+          z-index: 9999;
         }
 
         &-block {
@@ -1183,7 +1210,12 @@
           width: 100%;
           z-index: 3;
         }
+
+        &-empty{
+          height: 100rpx;
+        }
       }
+
     }
 
     .noConfig {

package/src/components/JfbMovieTfkFilmList/XdQueryFilter.vue

@@ -46,7 +46,7 @@ export default {
 
 <style lang="less" scoped>
   .xd-query-filter {
-    box-shadow: 0 5rpx 20rpx 0 rgba(0,0,0, .1);
+    box-shadow: 0 10rpx 20rpx 0 rgba(0,0,0, .1);
     background: #fff;
     border-radius: 0 0 20rpx 20rpx;
   }