【0基础入门案例】组件库使用练习——使用VantUI复刻瑞幸小程序首页
发布于 3 年前 作者 yinjing 4096 次浏览 来自 分享

【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组件&lt;van-tag/&gt;实现

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、 总结

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

有以下重点知识点：

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

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

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

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

支持！教程写得也挺详细的，话说那些商品列表这么多商品的话，有做优化不？感觉不做优化的话第一时间加载出来可能比较费时间

正在学小程序开发，关注了。

能说说新人悬浮礼券和首页的新人礼券部分怎么实现的么？

希望能实现更多的页面，哈哈

回到顶部