小程序项目实战-第一篇

全栈开发日记

发布于 2022-05-13 14:35:19

3710

发布于 2022-05-13 14:35:19

文章被收录于专栏：全栈开发日记

本篇目录：

引入图标库搭建tabber结构

引入图标库

搜索阿里巴巴矢量图标库。网址：https://www.iconfont.cn/

① 找到需要的图标添加到购物车

② 点击购物车将图标添加至项目（新建项目）

③ 可以在项目styles中新建wxss文件，将上面网址中的wxss样式粘贴到文件中。也可以直接使用在线样式，直接使用上图中的网址。

④ 在app.wxss中导入刚刚自建的样式。

@import "./styles/iconfont.wxss";
/*或*/
@import "//at.alicdn.com/t/font_2190675_mtf454qlnp.css";

使用：类样式中指定样式名：iconfont icon-geren1

如：

<view class="iconfont icon-kuaidihuoyun"></view>

搭建tabber结构

小程序的tabber是如下图部分。

① 将点击前和点击后的图标准备好，放到一个文件夹中

② 在app.json文件中添加tabber属性

内容如下

注意：在实际开发中小程序json文件不允许有注释内容

"tabBar": {
    "color": "#999", //未被点击时的字体颜色，十六进制颜色
    "selectedColor": "#ff2d4a", //被点击后达到字体颜色
    "backgroundColor": "#fafafa", //背景颜色
    "position": "bottom", //tabber显示位置
    "borderStyle": "black", //边框
    "list": [
      {
        "pagePath": "pages/index/index", //点击后要跳转的页面路径
        "text": "首页", //显示的页面名称
        "iconPath": "./icon/主页0.png", //未被点击时的图标
        "selectedIconPath": "./icon/主页1.png" //被点击后的图标
      },
      {
        "pagePath": "pages/category/index",
        "text": "分类",
        "iconPath": "./icon/分类0.png",
        "selectedIconPath": "./icon/分类1.png"
      },
      {
        "pagePath": "pages/cart/index",
        "text": "购物车",
        "iconPath": "./icon/购物车0.png",
        "selectedIconPath": "./icon/购物车1.png"
      },
      {
        "pagePath": "pages/user/index",
        "text": "我的",
        "iconPath": "./icon/我的0.png",
        "selectedIconPath": "./icon/我的1.png"
      }
    ]
},

本文参与腾讯云自媒体同步曝光计划，分享自微信公众号。

原始发表：2021-02-06，如有侵权请联系 cloudcommunity@tencent.com 删除

小程序