标签：总结 category goods 滚动 name flex 代码 font categories

商品滚动

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;
          }
        }
      }
    }

效果图

标签：总结,category,goods,滚动,name,flex,代码,font,categories
来源： https://www.cnblogs.com/YiwenGG/p/13879656.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。