zoukankan      html  css  js  c++  java
  • 商品滚动完成代码总结

    商品滚动

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

    效果图

    你的无畏来源于你的无知!

  • 相关阅读:
    linux命令行挂载NTFS文件系统的移动硬盘
    windows 修改鼠标滚轮自然滚动
    spark sql 的metastore 对接 postgresql
    ubuntu 14.04 源码编译postgresql
    spark sql 对接 HDFS
    部署spark 1.3.1 standalong模式
    perl 打开二进制文件,并拷贝内容
    ubuntu 14 安装XML::Simple 模块
    linux 搭建unixODBC ,并对接 PostgreSQL 9.3.4
    sed 删除指定行
  • 原文地址:https://www.cnblogs.com/YiwenGG/p/13879656.html
Copyright © 2011-2022 走看看