【0基础入门案例】组件库使用练习——使用VantUI复刻瑞幸小程序首页

前言

本教程一共包含三部分

文档；

• 介绍文档*1：介绍基本知识及实现思路；
• 详细操作文档*1：可以跟着一步一步操作的文档；

视频资料一套；

还在审核

练习使用素材一套（图片素材仅供学习用途）；

luckincoffee-miniprogram (gitee.com)

导入项目即可开始玩耍！

效果图

（配套素材均已认为损坏，与该图有出入，仅供学习用途）!

目录

[TOC]

一、 思路分析

我们的思路会遵循：

页面需要的组件 - > VantUI里面的组件 -> 根据需求进行修改

（一）布局分析

（二）组件分析

1、顶部透明的导航栏

在app.json中可以自定义顶部导航栏。

2、 幻灯片

可以使用微信原生swiper组件。

3、 主功能卡片

（1）卡片区1

使用Vantui的栅格进行排列。栅格文档-Layout 布局

（2）卡片区2

同上，使用栅格进行排列

（3）带背景的容器

使用容器并设置容器背景，文字颜色即可。

4、中底部幻灯片

幻灯片和上面第一张幻灯片的操作一样，进行一定的设置以显示下一张幻灯片的一部分

5、标签页

使用Vantui的标签页进行实现 Tab 标签页 - Vant Weapp

6、商品卡片布局

商品卡片可以采用grid宫格进行布局，Grid 宫格

7、商品卡片

使用css对样式进行调整即可，标签使用VantUI Tag 标签实现。

二、实现

进行效果对比时，左边为原图，右边是我们实现的效果

（一）初步实现

1、顶部导航栏

在app.json的 window节点中自定义顶部导航栏。

{    
    "window": {
        "navigationStyle": "custom", //让导航栏变透明
        "navigationBarTextStyle": "white" //让胶囊的背景变成黑色半透明
    }
}

复刻效果/

2、幻灯片

使用swiper组件即可，此处需要注意的是，此处导航点的颜色喝位置都需要变一下

• 在swiper组件中定义导航点的颜色

<swiper 
indicator-color="rgba(252, 254, 255, 80%)" 
indicator-active-color="#ffff" 
indicator-dots="{{true}}">

• 在样式中，使用类选择器选中导航点.wx-swiper-dots.wx-swiper-dots-horizontal，调整其位置

.wx-swiper-dots.wx-swiper-dots-horizontal {
  top: 65%;
}

复刻效果

3、主功能区

（1）卡片区1

• 我们可以把布局想象成一个列表，一共有两行，总行宽为24，分成两列，10、14;

• 左边一列只有一张图片，右边一列有两行，一行内，它的长度又被分成24份，每个方格占一半12即可；

• 最后使用van-row的gutter属性 ，加上列与列，行与行的间距

<!-- 最外面的一行 -->
      <van-row gutter="6">
      <!-- 左边一列 -->
        <van-col span="10">
          <image/>
        </van-col>
      <!-- 右边一列 -->
        <van-col span="14">
        <!-- 右边列的上面 -->
          <van-row span="14">
           <image/>
          </van-row>
        <!-- 右边列的下面一行 -->
          <van-row gutter="2">
         <!-- 右边列的下面一行的左边一列 -->
            <van-col span="12">
              <image/>
            </van-col>
          <!-- 右边列的下面一行的有边一列 -->           
            <van-col span="12">
              <image/>
            </van-col>
          </van-row>
        </van-col>
      </van-row>

效果

（2）卡片区2

同理可得两组卡片

效果

（3）带背景的容器

使用容器并设置容器背景，文字颜色即可，但在微信小程序中，通过css设置的背景图需要放在http/https静态资源服务器中，此处提供素材https://cdn.notcloud.net/static/luckin/entrance/mid2-1.png

.带背景容器的类名{
  background: url("https://cdn.notcloud.net/static/luckin/entrance/mid2-1.png") no-repeat ;
  background-size: 685rpx;
  height: 160rpx;  
}

效果

5、标签页

使用Vantui的标签页进行实现 Tab 标签页 - Vant Weapp

有几个地方需要改变的，首先底部小横条，改变底部小横条颜色等，在导航栏右侧加上“更多”

• 先改变一下导航栏的颜色，改成#f5f5f5

<van-tabs
line-width="30rpx" 
color="#e44812" 
sticky="{{true}}" 
nav-class="tabsnav" />

.tabsnav{
    background-color: #f5f5f5;
    line-height: 2rem;
}

• 在tab标签页右边增加一个插槽，用来放“更多”和箭头，同时为插槽定义width: 150rpx;

    <view slot="nav-right" style="width: 350rpx;text-align: right;">
        <view class="icontext">
            更多
        </view>
        <!-- 更多 -->
        <van-icon name="arrow" color="#b6b3b6" custom-class="tabicon"/>
    </view>

插槽内放置文字和符号，使用图标的custom-class属性，自定义样式

.icontext{
    display: inline;
    background-color: #f5f5f5;
    font-size: 0.8rem;
    color: #b6b3b6;
    width: 2rem;
}
.tabicon{
    font-size: smaller;
    line-height: 1rem;
    margin-top: 30rpx;
    color: #b6b3b6;
}

效果

6、卡片布局

使用grid进行布局，需要调整的项目有

<van-grid 下

column-num=“2”：每行的列数

border="{{ false }}" 关闭边框

gutter=“10” 每个卡片的间距

custom-class=“grids” 外部样式类，给这个组件绑定一个样式类，用于改变背景颜色，因为默认是白色

<van-grid 
column-num="2" 
border="{{ false }}" 
gutter="10" 
custom-class="grids">
    <van-grid-item 
    use-slot wx:for="{{ 8 }}" wx:for-item="index" 
    content-class="product-card">
        <image 
        style="width: 100%; height: 130px;" src="$PROJECT_ROOT/images/products/{{index}}.jpg" />
        <van-row>
            <van-col offset="2">
                <!--
                	放商品小卡片
                -->
            </van-col>
        </van-row>
    </van-grid-item>
</van-grid>

7、 商品小卡片

• 先来做个标题

设置样式

line-height:2.5rem 设置行高为2.5个字的高度

font-size: 0.8rem 设置字体大小为0.8rem

                <view style="line-height:0.8rem;font-size: small;width: 300rpx;">
                    瑞幸吸猫系列
                </view>

• 再做个价格栏

• 使用text-align: left;将文字向左对齐

• 使用::before在price价格前填充价格单位

• 给原价originPrice加上横线装饰text-decoration: line-through;

                <view style="text-align: left;" class="price">
                    99
                    <text class="originPrice">129</text>
                </view>

.price::before{
    content: "￥";
    font-size:1.2rem;
}
.price{
    width: 300rpx;
    color: #d36f11;
    font-size: 1rem;
}
.originPrice::before{
    content: "￥";
}
.originPrice{
    color: gray;
    font-size: 0.9rem;
    text-decoration: line-through;
}

• 标签栏，使用VantUI的tag组件<van-tag/>实现

color="#fce5dd" 标签背景颜色

text-color="#ca6540" 标签文字颜色

custom-class 指定外部样式，在外部样式加上margin-right以隔开小标签

                <view style="text-align: left; width: 100%;">
                    <van-tag color="#fce5dd" text-color="#ca6540" custom-class="tag">
                    赠品
                    </van-tag>
                    <van-tag color="#fce5dd" text-color="#ca6540" custom-class="tag">
                    返卷
                    </van-tag>
                </view>

.tag{
    margin-right: 10rpx;
}

效果图

（二）扣一点小细节

1、 主功能区

图之间的缝隙需要微调

2、标签页

横线位置 需要贴着字

三、总结

1、 可能出现的报错

• 基础库报错，解决办法，降调试库版本，建议2.19.*

• 无法引入组件，检查是否打开使用NPM

2、 总结

• 本次案例主要练习的是对常用组件的辨析以及调整组件的设置，基本上沿着：“分析使用了哪些组件、布局 -> 寻找组件库对应的组件、布局 -> 对引入的组件进行定制”

• 有以下重点知识点：

• 当发现框架内部错误时，可以尝试检查“测试基础库”的版本，根据需要降低版本；

• 组件库中的组件可以通过设置外部类的方式更改样式；

• swiper中的导航点可以通过特定样式类直接进行调整

• 在原生容器中，通过wxss调整背景图片时，url只能接受http/https文件路径