小程序自定义tabBar+Vant weapp

 

1.构建npm,安装Vant weapp:

1)根目录下 ,初始化生成依赖文件package.json

npm init -y

2)安装vant

# 通过 npm 安装
npm i @vant/weapp -S --production

3)修改 package.json 文件

开发者工具创建的项目,miniprogramRoot 默认为 miniprogram,package.json 在其外部,npm 构建无法正常工作。
需要手动在 project.config.json 内添加如下配置,使开发者工具可以正确索引到 npm 依赖的位置(修改miniprogramNpmDistDir的路径)。

{..."setting": {..."packNpmManually": true,"packNpmRelationList": [{"packageJsonPath": "./package.json","miniprogramNpmDistDir": "./miniprogram/"}]}
}

***注意***:

由于目前新版开发者工具创建的小程序目录文件结构问题,npm构建的文件目录为miniprogram_npm,并且开发工具会默认在当前目录下创建miniprogram_npm的文件名,所以新版本的miniprogramNpmDistDir配置为 ‘./’ 即可。

4)构建npm包:点击左上角工具--->构建npm--->显示构建完成

2. 测试引入和使用vant组件

1)引入:

// 通过 npm 安装的vant
// 在app.json

"usingComponents": {"van-button": "@vant/weapp/button/index"
}

2)使用:

// 在wxml中:

<van-button type="primary">按钮</van-button>

3. 自定义tabBar配置:

 1)在app.json 以下代码添加对应文件

{"pages": ["custom-tab-bar/index","pages/home/home","pages/topic/topic","pages/category/category","pages/cart/cart","pages/user/user"],
}

2)注意第1点生成的tabBar 代码文件custom-tab-bar是在根目录下的,生成了以下文件

custom-tab-bar/index.js
custom-tab-bar/index.json
custom-tab-bar/index.wxml
custom-tab-bar/index.wxss

3)在app.json配置tabBar信息

  • 在 app.json 中的 tabBar 项指定 custom 字段为true,同时其余 tabBar 相关配置也补充完整。
  • 所有 tab 页的 json 里需声明 usingComponents 项,也可以在 app.json 全局开启。
  • 这里的pagePath值前面没有“/”。
"tabBar": {"custom": true,"list": [{"pagePath": "pages/home/home","text": "首页"},{"pagePath": "pages/topic/topic","text": "专题"},{"pagePath": "pages/category/category","text": "分类"},{"pagePath": "pages/cart/cart","text": "购物车"},{"pagePath": "pages/user/user","text": "我的"}]},"usingComponents": {}

4) 配置active为活动的tab的索引,默认为0则显示首页,iconPath即为vant中的图标,text是文字,path对应路径值,记得前面有“/”。

// custom-tab-bar/index.js
Component({data: {active: 0,list: [{iconPath: "home-o",text: "首页",path: "/pages/home/home"},{iconPath: "label-o",text: "专题",path: "/pages/topic/topic"},{iconPath: "apps-o",text: "分类",path: "/pages/category/category"},{iconPath: "cart-o",text: "购物车",path: "/pages/cart/cart"},{iconPath: "user-o",text: "我的",path: "/pages/user/user"}]},methods: {onChange(event) {// event.detail 的值为当前选中项的索引wx.switchTab({url: this.data.list[event.detail].path});},}
})

5)引入组件

// custom-tab-bar/index.json

{"usingComponents": {"van-tabbar": "@vant/weapp/tabbar/index","van-tabbar-item": "@vant/weapp/tabbar-item/index"}
}

6)页面结构

// custom-tab-bar/index.wxml

<van-tabbar class="tab-bar" active="{{ active }}" bind:change="onChange" active-color="darkred" inactive-color="#333"><block wx:for="{{list}}" wx:key="index"><van-tabbar-item icon="{{item.iconPath}}">{{item.text}}</van-tabbar-item></block>
</van-tabbar>

7) 动态修改tab样式

在每个子页面修改active的值,来动态修改tabBar选中样式

例如在cart.js中active改为3,即在页面中显示的索引为3

 页面效果:

记得每个子页面都要改!!! 

 完成了。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/23349.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

51单片机(普中HC6800-EM3 V3.0)实验例程软件分析 实验四 蜂鸣器

目录 前言 一、原理图及知识点介绍 1.1、蜂鸣器原理图&#xff1a; 二、代码分析 前言 第一个实验:51单片机&#xff08;普中HC6800-EM3 V3.0&#xff09;实验例程软件分析 实验一 点亮第一个LED_ManGo CHEN的博客-CSDN博客 第二个实验:51单片机&#xff08;普中HC6800-EM…

深度学习实战46-基于CNN的遥感卫星地图智能分类,模型训练与预测

大家好,我是微学AI,今天给大家介绍一下深度学习实战46-基于CNN的遥感卫星地图智能分类,模型训练与预测。随着遥感技术和卫星图像获取能力的快速发展,卫星图像分类任务成为了计算机视觉研究中一个重要的挑战。为了促进这一领域的研究进展,EuroSAT数据集应运而生。本文将详细…

嵌入式面试刷题(day3)

文章目录 前言一、怎么判断两个float是否相同二、float数据可以移位吗三、数据接收和发送端大小端不一致怎么办四、怎么传输float类型数据1.使用联合进行传输2.使用字节流3.强制类型转换 总结 前言 本篇文章我们继续讲解嵌入式面试刷题&#xff0c;给大家继续分享嵌入式中的面…

python+django+mysql项目实践二(前端及数据库)

python项目实践 环境说明&#xff1a; Pycharm 开发环境 Django 前端 MySQL 数据库 Navicat 数据库管理 前端模板 添加模板 在templates下创建 views文件中添加 创建数据库 连接数据库 在setting文件中进行配置 创建表

车载软件架构 —— 车载软件安全启动关键技术解读

车载软件架构 —— 车载软件安全启动关键技术解读 我是穿拖鞋的汉子,魔都中坚持长期主义的汽车电子工程师。 老规矩,分享一段喜欢的文字,避免自己成为高知识低文化的工程师: 没有人关注你。也无需有人关注你。你必须承认自己的价值,你不能站在他人的角度来反对自己。人生…

uniapp uview文件上传的文件不是文件流,该如何处理?用了uni.chooseImage预览功能要如何做

在使用uniapp开发&#xff0c;运用的ui是用uview&#xff0c;这边需要做一个身份认证&#xff0c;如下图 使用的是uview的u-upload组件&#xff0c;可是这个组件传给后端的不是文件流 后端接口需要的是文件流格式&#xff0c;后面使用了uniapp的选择图片或者拍照的api&#x…

亚马逊云科技七项生成式AI新产品生成式AI,为用户解决数据滞后等难题

7月27日&#xff0c;亚马逊云科技在纽约峰会上一连发布了七项生成式AI创新&#xff0c;涵盖了从底层硬件到工具、软件、再到生态的全方位更新&#xff0c;成为它在该领域迄今最全面的一次升级展示&#xff0c;同时也进一步降低了生成式AI的使用门槛。 亚马逊云科技凭借自身端到…

HOT74-数组中的第K个最大元素

leetcode原题链接&#xff1a;数组中的第K个最大元素 题目描述 给定整数数组 nums 和整数 k&#xff0c;请返回数组中第 k 个最大的元素。请注意&#xff0c;你需要找的是数组排序后的第 k 个最大的元素&#xff0c;而不是第 k 个不同的元素。 你必须设计并实现时间复杂度为 O…

Redis - 数据过期策略

Redis提供了两种数据过期策略 惰性删除 和 定期删除 惰性删除 当某个key过期时&#xff0c;不马上删除&#xff0c;而是在调用时&#xff0c;再判断它是否过期&#xff0c;如果过期再删除它 优点 &#xff1a; 对CPU友好&#xff0c;对于很多用不到的key&#xff0c;不用浪费…

P1205 [USACO1.2] 方块转换 Transformations

题目描述 一块 n n n \times n nn 正方形的黑白瓦片的图案要被转换成新的正方形图案。写一个程序来找出将原始图案按照以下列转换方法转换成新图案的最小方式&#xff1a; 转 90 90\degree 90&#xff1a;图案按顺时针转 90 90\degree 90。 转 180 180\degree 180&am…

全志F1C200S嵌入式驱动开发(从DDR中截取内存)

【 声明:版权所有,欢迎转载,请勿用于商业用途。 联系信箱:feixiaoxing @163.com】 linux内核起来的时候,不一定所有的内存都是分配给linux使用的。有的时候,我们是希望能够截留一部分内存的。为什么保留这部分内存呢?这里面可以有很多的用途。比如说,第一,如果…

非阻塞IO

非阻塞IO fcntl 一个文件描述符, 默认都是阻塞IO。fcntl可以将某个文件描述符设置为非阻塞IO&#xff0c;先看一下文档介绍。 传入的cmd的值不同&#xff0c;后面追加的参数也不相同。 fcntl函数有5种功能: 复制一个现有的描述符&#xff08;cmd F_DUPFD&#xff09;。获得…

【SpringBoot】86、SpringBoot中集成Quartz根据Cron表达式获取接下来5次执行时间

本篇文章根据集成 Quartz 根据 Cron 表达式获取接下来的 5 次执行时间,在配置定时任务时,可以清晰地知道自己的 Cron 表达式是否正确,对于 Quartz 不熟悉的同学可以先看看我之前的文章 【SpringBoot】82、SpringBoot集成Quartz实现动态管理定时任务 【SpringBoot】83、Spri…

安全基础 --- 编码(02)+ form表单实现交互

浏览器解析机制和XSS向量编码 <!-- javascript伪协议不能被urlcode编码&#xff0c;但可以被html实体编码:也是js协议的一部分&#xff0c;不能被编码js协议被解码后&#xff0c;URL解析器继续解析链接剩下的部分unicode编码可识别实现解码但符号不能被编码&#xff0c;编码…

Go和Java实现桥接模式

Go和Java实现桥接模式 我们下面通过跨平台(Windows、Mac 和 Linux)播放不同格式的视频文件(mpeg、rmvb、avi 和 wmv)来说明桥接 模式的使用。 1、桥接模式 桥接是用于把抽象化与实现化解耦&#xff0c;使得二者可以独立变化。这种类型的设计模式属于结构型模式&#xff0c;…

Communications link failure

异常信息&#xff1a; org.springframework.orm.jpa.JpaSystemException: Unable to commit against JDBC Connection; nested exception is org.hibernate.TransactionException: Unable to commit against JDBC Connectionat org.springframework.orm.jpa.vendor.Hibernate…

android 测试设备以太网口的黄绿灯

需求&#xff1a;测试android 设备以太网口的黄灯和绿灯是否正常 ThreadUtils.runOnSubThread(new Runnable() { Override public void run() { Log.d("coco","test network 1000m start."); LinuxCommandRunner.exec("su"); LinuxCommandRunner…

【JavaScript 】深入理解浏览器本地存储

简介 Web本地存储是一种在浏览器中存储数据的机制,允许开发者在客户端存储和检索数据。本教程将详细介绍Web本地存储的不同技术和方法,包括LocalStorage和SessionStorage。 LocalStorage 存储数据 LocalStorage是一种在浏览器中存储数据的API,可以将键值对保存到客户端浏览…

11.物联网操作系统内存管理

一。STM32编译过程及程序组成 STM32编译过程 程序的组成、存储与运行 MDK生成的主要文件分析 1.STM32编译过程 1.源文件&#xff08;Source code&#xff09;--》目标文件&#xff08;Object code&#xff09; .c(C语言)通过armcc生成.o&#xff0c;.s&#xff08;汇编&…

gdb学习笔记

参考:https://blog.csdn.net/Stars_WW/article/details/88994391 gdb常用交互命令 启动gdb后&#xff0c;进入到交互模式&#xff0c;通过以下命令完成对程序的调试&#xff1b;注意高频使用的命令一般都会有缩写&#xff0c;熟练使用这些缩写命令能提高调试的效率&#xff1b;…