3回答

ustbhuangyi

2016-12-22

贴一下模板里 foods-wrapper 下的代码

0

0

学渣之霸

提问者

2016-12-22

页面加载的时候第一个是有的，然后滚动和点击的的时候，都没有current；
  currentIndex() {
       for (let i = 0; i < this.listHeight; i++) {
         let height1 = this.listHeight[i];
         let height2 = this.listHeight[i + 1];
         if (!height2 || (this.scrollY >= height1 && this.scrollY < height2)) {
           return i;
           // console.log(i);
         }
       }
       return 0;
     }

0

0

学渣之霸

提问者

2016-12-22

  <div class="foods-wrapper" v-el:foods-wrapper>
     <ul>
        <li v-for="item in goods" class="food-list food_list_hook">
            <h1 class="title">{{item.name}}</h1>
            <ul>
              <li v-for="food in item.foods" class="food-item border-1px">
                 <div class="icon">
                     <img :src="food.icon"/>
                 </div>
                 <div class="content">
                     <h2 class="name">{{food.name}}</h2>
                     <p class="desc">{{food.description}}</p>
                     <div class="extra">
                       <span class="count">月售{{food.sellCount}}份</span><span>好评率{{food.rating}}%</span>
                     </div>
                     <div class="price">
                         <span class="now">￥{{food.price}}</span><span class="old" v-show="food.oldPrice">￥{{food.oldPrice}}</span>
                     </div>
                 </div>
              </li>
            </ul>
        </li>
     </ul>
    </div>

<script type="text/ecmascript-6">
import BScroll from 'better-scroll';
 const ERR_OK = 0;
  export default {
    props: {
      seller: {
        type: Object
      }
   },
   data() {
     return {
       goods: [],
       listHeight: [],
       scrollY: 0
     };
   },
   computed: {
     currentIndex() {
       for (let i = 0; i < this.listHeight; i++) {
         let height1 = this.listHeight[i];
         let height2 = this.listHeight[i + 1];
         if (!height2 || (this.scrollY >= height1 && this.scrollY < height2)) {
           return i;
           // console.log(i);
         }
       }
       return 0;
     }
   },
   created() {
     this.classMap = ['decrease', 'discount', 'special', 'invoice', 'guarantee'];
          this.$http.get('/api/goods').then((response) => {
            response = response.body;
            if (response.errno === ERR_OK) {
              this.goods = response.data;
              this.$nextTick(() => {
                   this._initScrool();
                   this._calculateHeight();
              });
            }
        });
   },
   methods: {
     selectMenu(index, event) {
       if (!event._constructed) {
         return;
       }
       let foodList = this.$els.foodsWrapper.getElementsByClassName('food_list_hook');
       let el = foodList[index];
       this.foodsScrool.scrollToElement(el, 300);
        // console.log(index);
     },
     _initScrool() {
       this.meunScrool = new BScroll(this.$els.menuWrapper, {
         click: true
       });
       this.foodsScrool = new BScroll(this.$els.foodsWrapper, {
         probeTyle: 3
       });
       this.foodsScrool.on('scroll', (pos) => {
         this.scrollY = Math.abs(Math.round(pos.y));
       });
     },
     _calculateHeight() {
            let foodList = this.$els.foodsWrapper.getElementsByClassName('food_list_hook');
            let height = 0;
            this.listHeight.push(height);
            for (let i = 0; i < foodList.length; i++) {
              let item = foodList[i];
              height += item.clientHeight;
              this.listHeight.push(height);
            }
     }
   }
  };
</script>

0

0