商品滚动完成代码总结

商品滚动

mounted(){
    const categories = kfc['categories'];
    // for (let index=0; index < categories.length; index++){
    //   const category = categories[index];
    //   this.categories.push({id:category.id,name:category.name})
    // }
    this.categories = categories
    this.$nextTick(() => {
      var menuScroll = new BScroll(this.$refs.category,{
      scrollY: true,
      click: true
    })
      var goodsScroll = new BScroll(this.$refs.goods,{
      scrollY: true,
      click: true
    })
    })
  },

<div class="goods-group" ref="goods">
  <div class="goods-list">
    <dl v-for="category in categories" :key="category.name">
      <dt class="category-name">{{category.name}}</dt>
      <dd class="goods-item" v-for="goods in category.goods_list" :key="goods.id">
        <img :src="goods.picture" alt="" class="thumbnail">
        <div class="goods-info">
          <div class="goods-name">
            {{goods.name}}
          </div>
          <div class="goods-sale">
            月售10份
          </div>
          <div class="price">
            ￥{{goods.price}}
          </div>
        </div>
      </dd>
    </dl>
  </div>
</div>

.goods-group{
      flex: 1;
      margin-left: 10px;
      height: 100%;
      overflow: hidden;
      .category-name{
        font-size: 12px;
        height: 32px;
        line-height: 32px;
      }
      .goods-item{
        display: flex;
        margin-bottom: 10px;
        .thumbnail{
          width: 75px;
          height: 75px;
        }
        .goods-info{
          flex: 1;
          margin-left: 10px;
          display: flex;
          flex-direction: column;
          justify-content: space-around;
          .goods-name{
            font-size: 16px;
            font-weight: 700;
          }
          .price{
            color: #fb4e44;
            font-size: 16px;
            font-weight: 700;
          }
        }
      }
    }

效果图