add food$menu scroll

Joker0824 · Sep 30, 2017 · c22f6f3 · c22f6f3
1 parent da8115d
commit c22f6f3
Show file tree

Hide file tree

Showing 3 changed files with 88 additions and 24 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -12,6 +12,7 @@
   },
   "dependencies": {
     "axios": "^0.16.2",
+    "better-scroll": "^1.3.1",
     "vue": "^2.4.2",
     "vue-router": "^2.7.0"
   },

diff --git a/src/components/goods/goods.vue b/src/components/goods/goods.vue
@@ -1,16 +1,16 @@
 <template>
     <div class="goods">
-        <div class="menu-wrapper">
+        <div class="menu-wrapper" ref="menuScroll">
             <ul v-if="goods">
                 <li class="menu-item border-1px" v-for="(item,index) in goods" :key="item.type">
                     <span class="text">
                         <i class="icon" :class="classMap[item.type]" v-if="item.type>0"></i>{{item.name}}</span>
                 </li>
             </ul>
         </div>
-        <div class="goods-wrapper">
+        <div class="goods-wrapper" ref="goodsScroll">
             <ul>
-                <li class="goods-item" v-for="good in goods" :key="good.name">
+                <li class="goods-item" v-for="good in goods" :key="good.name" ref="goodsItemHook">
                     <h1 class="good-name">{{good.name}}</h1>
                     <ul>
                         <li class="food-item" v-for="food in good.foods" :key="food.name">
@@ -19,15 +19,14 @@
                             </div>
                             <div class="content">
                                 <h3 class="food-name">{{food.name}}</h3>
-                                <p class="description">{{food.description}}</p>
+                                <p class="description" v-if="food.description">{{food.description}}</p>
                                 <div class="other">
                                     <span class="sellCount">月售{{food.sellCount}}份</span>
                                     <span class="rating">好评率{{food.rating}}%</span>
                                 </div>
                                 <div class="price">
                                     <span class="price">￥{{food.price}}</span>
-                                    <span class="oldPrice" v-show="food.oldPrice">￥{{food.oldPrice}}</span>
-
+                                    <span class="oldPrice" v-if="food.oldPrice">￥{{food.oldPrice}}</span>
                                 </div>
                             </div>
                         </li>
@@ -38,21 +37,69 @@
     </div>
 </template>
 <script>
+/* 引入better-scroll插件 */
+import BScroll from 'better-scroll';
 const ERR_OK = 0;
 export default {
     data() {
         return {
             goods: [],
-            classMap: ['decrease', 'discount', 'guarantee', 'invoice', 'special']
+            classMap: ['decrease', 'discount', 'guarantee', 'invoice', 'special'],
+            // food对应的每种套餐的高度
+            goodHeighList: [],
+            //  food的滚动高度
+            scrollY: 0
+
         };
     },
+    computed: {
+        // 根据foods的scrollY算出左边是哪种类型的套餐
+        menuCurrentIndex() {
+            let height = 0;
+            for (var i = 0; i < this.goodHeighList.length; i++) {
+                let item = this.goodHeighList[i];
+                height += item;
+            }
+        }
+    },
+    methods: {
+        _initBScroll() {
+            // 实例化menuscroll和goodscroll
+            this.menuScroll = new BScroll(this.$refs.menuScroll, {});
+            this.goodsScroll = new BScroll(this.$refs.goodsScroll, {
+                probeType: 3
+            });
+            this.goodsScroll.on('scroll', (pos) => {
+                let scrollY = Math.abs(pos.y);
+                console.log(scrollY);
+            });
+        },
+        _calculHeight() {
+            let goodsItems = this.$refs.goodsItemHook;
+            this.goodHeighList = [];
+            let height = 0;
+            goodsItems.forEach(function(element) {
+                height += element.offsetHeight;
+                goodHeighList.push(element.offsetHeight);
+            }, this);
+            console.log(height);
+            console.log(goodHeighList);
+            // console.log(goodsItems);
+            // return goodsItems;
+        }
+    },
     created() {
         this.axios.get('api/goods')
             .then((res) => {
                 console.log(res.data);
                 if (res.data.errno === ERR_OK) {
                     this.goods = res.data.data;
-                    console.log(this.goods);
+                    // dom更新后进行的操作
+                    this.$nextTick(() => {
+                        this._initBScroll();
+                        this._calculHeight();
+                    });
+                    // console.log(this.goods);
                 }
             })
             .catch((error) => {
@@ -83,21 +130,21 @@ export default {
      .icon
        display inline-block
        width 12px
-       height 12px   
+       height 12px
        margin-right 2px
        background-size 12px 12px
        background-repeat no-repeat
        vertical-align top
        margin-top 2px
-       &.decrease 
+       &.decrease
          bg-img('./imgs/decrease_3')
-       &.discount 
+       &.discount
          bg-img('./imgs/discount_3')
-       &.guarantee 
+       &.guarantee
          bg-img('./imgs/guarantee_3')
-       &.invoice 
+       &.invoice
          bg-img('./imgs/invoice_3')
-       &.special 
+       &.special
          bg-img('./imgs/special_3')
      .text
        line-height 14px
@@ -106,17 +153,17 @@ export default {
        vertical-align middle
   .goods-wrapper
     .goods-item
-      padding-right 18px     
       .good-name
         height 26px
         font-size 12px
         color rgb(147,153,159)
         line-height 26px
         background-color #f3f5f7
-        border-left 4px solid #d9dde1
+        border-left 2px solid #d9dde1
         padding-left 14px
       .food-item
-        padding 18px  
+        margin 18px
+        border-1px(rgba(7,17,27,0.1))
       .icon-wrapper
         display inline-block
         vertical-align top
@@ -125,19 +172,30 @@ export default {
         font-size 10px
         line-height 10px
         color rgb(147,153,159)
-        padding-top 2px 
+        padding-top 2px
         .food-name
           font-size 14px
           line-height 14px
           color rgb(7,17,27)
           padding 2px 0 8px 0
         .description
+          line-height 18px
           padding-bottom 8px
         .other
           font-size 0
           .sellCount
             font-size 10px
             padding-right 12px
           .rating
-            font-size 10px   
+            font-size 10px
+        .price
+          line-height 24px
+          font-weight 700
+          .price
+            font-size 14px
+            color rgb(255,0,0)
+            margin-right 8px
+          .oldPrice
+            font-size 10px
+            text-decoration line-through
 </style>