首页：商品列表页优化

htmldev/cps/README.md

@@ -29,4 +29,4 @@ See [Configuration Reference](https://cli.vuejs.org/config/).
 - [x] 搜索页
 - [ ] 分享测试：默认、带有分享人信息、分享赚钱、商品列表及详情
 - [x] 商品详情页：淘宝复制口令
-- [ ] 底部导航：新增购物
+- [x] 底部导航：新增购物

htmldev/cps/src/views/category/index/child/main.vue

@@ -110,7 +110,8 @@ export default {
       pagenum: 0,
       pagesize: 20,
       list: [],
-      scroll: null
+      scroll: null,
+      screenHeight: Math.round(window.screen.height / 2)
     }
   },
   methods: {
@@ -172,6 +173,7 @@ export default {
             this.$nextTick(() => {
               if (!this.scroll) {
                 this.scroll = new BScroll(this.$refs.returnWrapper, {
+                  probeType: 1,
                   click: true,
                   pullDownRefresh: {
                     threshold: 50, // 顶部下拉的距离
@@ -190,6 +192,10 @@ export default {
                 this.scroll.on('pullingUp', () => {
                   this.getList()
                 })
+
+                this.scroll.on('scroll', ({ y }) => {
+                  this.$emit('setShowHeader', Math.abs(y) < this.screenHeight)
+                })
               } else {
                 this.scroll.finishPullDown()
                 this.scroll.finishPullUp()
@@ -224,7 +230,7 @@ export default {
 .wrapper {
   position: absolute;
   left: 0;
-  top: 137px;
+  top: 0;
   right: 0;
   bottom: 0;
   width: 100%;
@@ -235,7 +241,7 @@ export default {
     flex-direction: column;
     align-items: center;
     width: 100%;
-    padding: 0 0 102px;
+    padding: 136px 0 102px;
   }
 }
 

htmldev/cps/src/views/category/index/index.vue

@@ -1,76 +1,83 @@
 <template>
   <div
     class="category-container">
-    <!--模拟搜索-->
-    <div class="jump-search">
-      <van-search
-        :shape="'round'"
-        v-model="searchValue"
-        placeholder="搜索商品标题 领优惠券拿返现"/>
-      <router-link
-        :to="{name: 'Search'}">去搜索页
-      </router-link>
-    </div>
-    <!--商家-->
-    <div class="business-list">
-      <van-tabs
-        v-model="businessValue"
-        :color="'#ee0a24'"
-        :title-active-color="'#FFF'"
-        :title-inactive-color="'#8A8A8A'"
-        :background="'#fff'"
-        @click="fetchCateList"
-        ref="fbtBusinessList">
-        <van-tab
-          :name="item.value"
-          v-for="item in sourceList"
-          :key="item.value">
-          <template #title>
-            <i>{{ item.name }}</i>
-          </template>
-        </van-tab>
-      </van-tabs>
-    </div>
-    <!--分类-->
-    <div
-      class="cate-header">
-      <van-tabs
-        v-model="catId"
-        :color="'#F09E38'"
-        :title-active-color="'#333333'"
-        :title-inactive-color="'#515151'"
-        :background="'#fff'"
-        @click="selectCateId"
-        ref="fbtCateList">
-        <van-tab
-          :name="item.id"
-          v-for="item in cateList"
-          :key="item.id">
-          <template #title>{{ item.name }}</template>
-        </van-tab>
-      </van-tabs>
-      <van-dropdown-menu
-        class="fbt-van-dropdown-menu">
-        <van-dropdown-item
-          ref="fbtCateDropdownMenu">
-          <template #title>
-            <van-icon name="arrow-down"/>
-          </template>
-          <ul>
-            <li
-              :class="{'active': item.id === catId}"
+    <transition name="fade">
+      <div
+        class="header-wrap"
+        v-show="showHeader">
+        <!--模拟搜索-->
+        <div class="jump-search">
+          <van-search
+            :shape="'round'"
+            v-model="searchValue"
+            placeholder="搜索商品标题 领优惠券拿返现"/>
+          <router-link
+            :to="{name: 'Search'}">去搜索页
+          </router-link>
+        </div>
+        <!--商家-->
+        <div class="business-list">
+          <van-tabs
+            v-model="businessValue"
+            :color="'#ee0a24'"
+            :title-active-color="'#FFF'"
+            :title-inactive-color="'#8A8A8A'"
+            :background="'#fff'"
+            @click="fetchCateList"
+            ref="fbtBusinessList">
+            <van-tab
+              :name="item.value"
+              v-for="item in sourceList"
+              :key="item.value">
+              <template #title>
+                <i>{{ item.name }}</i>
+              </template>
+            </van-tab>
+          </van-tabs>
+        </div>
+        <!--分类-->
+        <div
+          class="cate-header">
+          <van-tabs
+            v-model="catId"
+            :color="'#F09E38'"
+            :title-active-color="'#333333'"
+            :title-inactive-color="'#515151'"
+            :background="'#fff'"
+            @click="selectCateId"
+            ref="fbtCateList">
+            <van-tab
+              :name="item.id"
               v-for="item in cateList"
-              :key="item.id"
-              @click="onConfirm(item)">{{ item.name }}
-            </li>
-          </ul>
-        </van-dropdown-item>
-      </van-dropdown-menu>
-    </div>
+              :key="item.id">
+              <template #title>{{ item.name }}</template>
+            </van-tab>
+          </van-tabs>
+          <van-dropdown-menu
+            class="fbt-van-dropdown-menu">
+            <van-dropdown-item
+              ref="fbtCateDropdownMenu">
+              <template #title>
+                <van-icon name="arrow-down"/>
+              </template>
+              <ul>
+                <li
+                  :class="{'active': item.id === catId}"
+                  v-for="item in cateList"
+                  :key="item.id"
+                  @click="onConfirm(item)">{{ item.name }}
+                </li>
+              </ul>
+            </van-dropdown-item>
+          </van-dropdown-menu>
+        </div>
+      </div>
+    </transition>
     <!--商品列表-->
     <Main
       :source="this.businessValue"
       :catId="catId"
+      @setShowHeader="setShowHeader"
       ref="myMain"/>
   </div>
 </template>
@@ -119,7 +126,8 @@ export default {
       businessValue: 'jd',
       catId: '',
       cateList: [], // 分类列表
-      numPositionY: 0 // BS纵轴坐标
+      numPositionY: 0, // BS纵轴坐标
+      showHeader: true // 是否展示顶部模块：搜索、商家筛选、类别筛选
     }
   },
   activated () {
@@ -128,6 +136,7 @@ export default {
       this.businessValue = this.sourceList[0].value
       this.catId = ''
       this.numPositionY = 0
+      this.showHeader = true
       this.fetchCateList()
     } else {
       this.$nextTick(() => {
@@ -169,6 +178,9 @@ export default {
         this.$refs.fbtCateDropdownMenu.toggle()
         this.$refs.myMain.init()
       })
+    },
+    setShowHeader (val) {
+      this.showHeader = val
     }
   },
   beforeRouteLeave (to, from, next) {
@@ -191,6 +203,24 @@ export default {
   width: 100%;
 }
 
+.fade-enter-active,
+.fade-leave-active {
+  transition: all 1s;
+}
+
+.fade-enter,
+.fade-leave-active {
+  transform: translate3d(0, -136px, 0);
+}
+
+.header-wrap {
+  position: absolute;
+  left: 0;
+  top: 0;
+  z-index: 10;
+  width: 100%;
+}
+
 .jump-search {
   ::v-deep .van-search {
     padding-bottom: 0;