vue+vant移动端入门实现3（仿网易严选）

最新推荐文章于 2024-05-10 23:33:41 发布

原创最新推荐文章于 2024-05-10 23:33:41 发布 · 519 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue

本文展示了如何利用Vant框架创建一个新品首发的商品列表。内容包括一个标题组件，其中包含'新品首发'标签和'更多'链接，以及一个宫格组件，展示带有图片和文字描述的商品。商品数据通过good_list数组提供，每个条目包含图片URL、文本描述、价格等信息。

效果图：

实现这部分内容：

（1）

<!--商品列表-->
      <div class='goodsListDiv'>
        <h1>
        <label>新品首发</label>
        <a href='#'>更多></a>
        </h1>
      </div>

.goodsListDiv{
  height:1rem;
  line-height:1rem;
}
.goodsListDiv label{
  display:inline-block;
  margin:0 0 0 0.3rem;
  float:left;
  font-size:0.6rem;
}
.goodsListDiv a{
  display:inline-block;
  margin:0 0 0 0;
  float:right;
  font-size:0.6rem;
}

（2）宫格使用vant框架的grip

 <!--新品首发宫格-->
      <van-grid :center='false' :border='false' :column-num="3">
        <van-grid-item v-for="(n,inx) in good_list" :key="inx">
        <img :src="n.imgurl">
        <div>{{n.text}}</div>
        </van-grid-item>
      </van-grid>

 good_list:[
        {
          imgurl:require('../assets/good_list/good_list_1.png'),
          text:'网易有道词典笔',
          price:99,
          gradientPrice:1
        },{
          imgurl:require('../assets/good_list/good_list_2.png'),
          text:'网易有道1111111词典笔',
          price:123,
          gradientPrice:2
        },{
          imgurl:require('../assets/good_list/good_list_3.png'),
          text:'网易有道词典笔',
          price:732,
          gradientPrice:3
        },{
          imgurl:require('../assets/good_list/good_list_4.png'),
          text:'网易有道词典笔',
          price:227,
          gradientPrice:0
        },{
          imgurl:require('../assets/good_list/good_list_5.png'),
          text:'网易有道词典笔',
          price:744,
          gradientPrice:4
        },{
          imgurl:require('../assets/good_list/good_list_6.png'),
          text:'网易有道词典笔',
          price:749,
          gradientPrice:0
        }

      ]

（3）

<!--底部-->
      <div style='height:10rem;background:#000;font-size:3rem;color:#666;text-align:center;'>
        footer div
      </div>