首页调整

package.json

@@ -15,6 +15,7 @@
     "vant": "^2.4.7",
     "vue": "^2.6.11",
     "vue-router": "^3.1.5",
+    "vue-waterfall2": "^1.9.6",
     "vuex": "^3.1.2"
   },
   "devDependencies": {

src/components/GoodsList.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="goods-list">
     <div v-for="(item, index) in goodsList" :key="index" class="goods-item">
-      <img :src="item.show.img" alt="">
+      <img :src="item.show.img" alt="" @load="imageLoad">
       <div class="goods-info">
         <p>{{ item.title }}</p>
         <div>
@@ -22,33 +22,50 @@ export default {
         return []
       }
     }
+  },
+  methods: {
+    imageLoad () {
+      this.$bus.$emit('imageLoad')
+    }
   }
 }
 </script>
 
 <style lang="scss" scoped>
 .goods-list{
-  padding: 0 15px;
-  // display: flex;
-  // width: 100%;
-  // flex-wrap: wrap;
-  column-count: 2;
+  padding: 10px 15px;
+  display: flex;
+  width: 100%;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  // column-count: 2;
   .goods-item{
-    // width: 48%;
-    break-inside: avoid;
+    width: 48%;
+    display: flex;
+    flex-direction: column;
+    // break-inside: avoid;
+    // max-height: 300px;;
+    margin-bottom: 6px;
     img{
       width: 100%;
       border-radius: 6px;
     }
     .goods-info{
-      height: 55px;
       padding: 4px;
       box-sizing: content-box;
+      position: relative;
+      flex: 1;
       p{
-        height: 35px;
+        max-height: 36px;
         overflow: hidden;
+        margin-bottom: 20px;
       }
       div{
+        height: 20px;
+        width: 100%;
+        position: absolute;
+        bottom: 0;
+        left: 0;
         display: flex;
         justify-content: space-between;
         .price{

src/components/Scroll.vue

@@ -14,6 +14,10 @@ export default {
     probeType: {
       type: Number,
       default: 0
+    },
+    pullUpLoad: {
+      type: Boolean,
+      default: false
     }
   },
   data () {
@@ -24,17 +28,25 @@ export default {
   mounted () {
     this.scroll = new BScroll(this.$refs.wrapper, {
       click: true,
-      probeType: this.probeType
+      probeType: this.probeType,
+      pullUpLoad: this.pullUpLoad
     })
     // 监听滚动
     this.scroll.on('scroll', position => {
       // 向父组件传递数据
       this.$emit('scroll', position)
     })
+    // 监听上拉
+    this.scroll.on('pullingUp', () => {
+      this.$emit('pullingUp')
+    })
   },
   methods: {
     scrollTo (x, y, time = 300) {
-      this.scroll.scrollTo(x, y, time)
+      this.scroll && this.scroll.scrollTo(x, y, time)
+    },
+    refresh () {
+      this.scroll && this.scroll.refresh()
     }
   }
 }

src/components/Tabbar.vue

@@ -24,7 +24,7 @@
         :src="props.active ? cart.active : cart.inactive"
       >
     </van-tabbar-item>
-    <van-tabbar-item to="mine">
+    <van-tabbar-item to="/mine">
       <span>我的</span>
       <img
         slot="icon"

src/main.js

@@ -9,6 +9,7 @@ import 'vant/lib/index.css'
 Vue.use(Vant)
 
 Vue.config.productionTip = false
+Vue.prototype.$bus = new Vue()
 
 new Vue({
   router,

src/network/request.js

@@ -2,8 +2,8 @@ import axios from 'axios'
 
 export function request (config) {
   const instance = axios.create({
-    baseURL: 'http://123.207.32.32:8000/api/hy',
-    // baseURL: 'http://106.54.54.237:8000/api/hy',
+    // baseURL: 'http://123.207.32.32:8000/api/hy',
+    baseURL: 'http://106.54.54.237:8000/api/hy',
     timeout: 5000
   })
 

src/views/Home.vue

@@ -1,13 +1,20 @@
 <template>
   <div id="home">
     <nav-bar class="home-nav"><div slot="center">Meow Shopping</div></nav-bar>
-    <scroll class="scroll-wrapper" ref="scroll" :probeType="3" @scroll="scroll">
-      <swiper :bannerList="bannerList" />
+    <tab v-show="isTabFixed" :titles="['流行','新款','精选']" class="tab-fixed" @tabChange="tabChange" ref="tab1" />
+    <scroll class="scroll-wrapper"
+            ref="scroll"
+            :probeType="3"
+            :pullUpLoad="true"
+            @scroll="scroll"
+            @pullingUp="loadMore">
+      <swiper :bannerList="bannerList" @swiperImageLoad="getTabOffsetTop" />
       <recommend-view :recommendList="recommendList" />
       <single-recommend/>
-      <tab :titles="['流行','新款','精选']" class="home-tab" @tabChange="tabChange" />
+      <tab :titles="['流行','新款','精选']" class="home-tab" @tabChange="tabChange" ref="tab" />
       <goods-list :goodsList="currentGoodsList" />
     </scroll>
+
     <back-top @click.native="backTop" v-show="isBackTopShow" />
   </div>
 </template>
@@ -47,7 +54,9 @@ export default {
         sell: { page: 0, list: [] }
       },
       currentSort: 'pop',
-      isBackTopShow: false
+      isBackTopShow: false,
+      tabOffsetTop: 0,
+      isTabFixed: false
     }
   },
   computed: {
@@ -65,13 +74,26 @@ export default {
     this.getGoodsData('new')
     this.getGoodsData('sell')
   },
+  mounted () {
+    // 监听图片加载，刷新scroll，重新计算高度
+    this.$bus.$on('imageLoad', () => {
+      const refresh = this.$refs.scroll.refresh
+      this.debounce(refresh, 200)
+    })
+    // 等上方轮播的图片加载完毕后再计算
+  },
+  destroyed () {
+    this.$bus.$off('imageLoad')
+  },
   methods: {
     // 数据请求
     getGoodsData (type) {
       const page = this.goods[type].page + 1
       getHomeGoods(type, page).then(res => {
         this.goods[type].list.push(...res.data.list)
         this.goods[type].page += 1
+        this.$refs.scroll.scroll.finishPullUp()
+        this.$refs.scroll.scroll.refresh()
       })
     },
     // 事件监听
@@ -87,12 +109,33 @@ export default {
           this.currentSort = 'sell'
           break
       }
+      this.$refs.tab.current = i
+      this.$refs.tab1.current = i
     },
     backTop () {
       this.$refs.scroll.scrollTo(0, 0)
     },
     scroll (position) {
       this.isBackTopShow = (-position.y) > 1000
+
+      this.isTabFixed = (-position.y) >= this.tabOffsetTop
+    },
+    loadMore () {
+      this.getGoodsData(this.currentSort)
+      this.$refs.scroll.scroll.refresh()
+    },
+    getTabOffsetTop () {
+      this.tabOffsetTop = this.$refs.tab.$el.offsetTop
+    },
+    // 防抖函数
+    debounce (func, delay) {
+      let timer = null
+      return function (...args) {
+        if (timer) clearTimeout(timer)
+        timer = setTimeout(() => {
+          func.apply(this, args)
+        }, delay)
+      }
     }
   }
 }
@@ -101,24 +144,25 @@ export default {
 <style lang="scss" scoped>
 #home{
   height: 100vh;
-  padding-top: 44px;
+  position: relative;
+  // padding-top: 44px;
   .home-nav{
     background-color: #d4237a;
     color: #ffffff;
-    position: fixed;
-    top: 0;
-    left: 0;
-    right: 0;
-    z-index: 999;
-  }
-  .home-tab{
-    // position: sticky;
-    // top: 43px;
+    // position: fixed;
+    // top: 0;
     // left: 0;
+    // right: 0;
+    // z-index: 999;
+  }
+  .tab-fixed{
+    position: absolute;
+    z-index: 9;
   }
   .scroll-wrapper{
-    height: calc(100% - 50px);
+    height: calc(100% - 94px);
     overflow: hidden;
+    position: relative;
   }
 }
 </style>

src/views/home/SingleRecommend.vue

@@ -10,7 +10,6 @@
 <style lang="scss" scoped>
   .single{
     width: 100%;
-    margin-bottom: 5px;
     .title{
       font-weight: bold;
       width: 100%;
@@ -20,6 +19,7 @@
     }
     img{
       width: 100%;
+      vertical-align: middle;
     }
   }
 </style>

src/views/home/Swiper.vue

@@ -2,7 +2,7 @@
   <van-swipe :autoplay="3000" indicator-color="#d4237a">
     <van-swipe-item v-for="(item, index) in bannerList" :key="index">
       <a :href="item.link">
-        <img :src="item.image" />
+        <img :src="item.image" @load="imageLoad" />
       </a>
     </van-swipe-item>
   </van-swipe>
@@ -17,6 +17,19 @@ export default {
         return []
       }
     }
+  },
+  data () {
+    return {
+      isLoad: false
+    }
+  },
+  methods: {
+    imageLoad () {
+      if (!this.isLoad) {
+        this.$emit('swiperImageLoad')
+        this.isLoad = true
+      }
+    }
   }
 }
 </script>

vue.config.js

@@ -0,0 +1,3 @@
+module.exports = {
+  lintOnSave: false
+}