微信小程序用vant自定义tabbar页面并跳转相应页面

news2024/12/23 15:53:22

0.前置安装

步骤一 安装 vant 组件库

npm i @vant/weapp -S --production

下载完后要npm构建才能使用

步骤二 修改 app.json

将 app.json 中的 "style": "v2" 去除,小程序的新版基础组件强行加上了许多样式,难以覆盖,不关闭将造成部分组件样式混乱

步骤三 修改 project.config.json

开发者工具创建的项目,miniprogramRoot 默认为 miniprogrampackage.json 在其外部,npm 构建无法正常工作。

需要手动在 project.config.json 内添加如下配置,使开发者工具可以正确索引到 npm 依赖的位置。

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

注意: 由于目前新版开发者工具创建的小程序目录文件结构问题,npm构建的文件目录为miniprogram_npm,并且开发工具会默认在当前目录下创建miniprogram_npm的文件名,所以新版本的miniprogramNpmDistDir配置为’./'即可
在这里插入图片描述

步骤四 构建 npm

打开微信开发者工具,点击 工具 -> 构建 npm,并勾选 使用 npm 模块 选项,构建完成后,即可引入组件。

在这里插入图片描述

微信小程序用vant自定义tabbar并跳转相应页面

vant官网Tabbar部分 结合 微信小程序官网文档

1. 配置信息

  • app.json 中的 tabBar 项指定 custom 字段,同时其余 tabBar 相关配置也补充完整。
  • 所有 tab 页的 json 里需声明 usingComponents 项,也可以在 app.json 全局开启。

示例:

{
 "tabBar": {
		"custom": true,
		"color": "#000000",
		"selectedColor": "#000000",
		"backgroundColor": "#000000",
		"list": [
			{
				"pagePath": "pages/home/home"
			},
			{
				"pagePath": "pages/my/my"
			},
			{
				"pagePath": "pages/setting/setting"
			}
		]
	},
   //全局组件配置 下面是vant的组件导入
  "usingComponents": {
    "van-button": "@vant/weapp/button/index",
    "van-tabbar": "@vant/weapp/tabbar/index",
    "van-tabbar-item": "@vant/weapp/tabbar-item/index"
  },
}

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-eg43Cbea-1675156855447)(C:\Users\28132\AppData\Roaming\Typora\typora-user-images\1675155499168.png)]

2. 添加 tabBar 代码文件

在根目录下创建文件夹custom-tab-bar

文件名:

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

我是修改为index了,也可以就用上面的

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-4oX7p70p-1675156855448)(C:\Users\28132\AppData\Roaming\Typora\typora-user-images\1675155638516.png)]

3. 编写 tabBar 代码

用自定义组件的方式编写即可,该自定义组件完全接管 tabBar 的渲染。另外,自定义组件新增 getTabBar 接口,可获取当前页面下的自定义 tabBar 组件实例。

4 .tabbar页面实现跳转

4.1 在custom-tab-bar/index.wxml中:

<van-tabbar active="{{ active }}" bind:change="onChange">
  <van-tabbar-item wx:for="{{ list }}" wx:key="index" icon="{{ item.icon }}"  >
    {{item.text}}
  </van-tabbar-item>
</van-tabbar>

4.2 在custom-tab-bar/index.js中

url要是相对应的文件位置,注意加 /

Component({
  data: {
    active: '0',
    list: [{
        icon: 'home-o',
        text: '主页',
        name: 'home',
        url: '/pages/home/home'
      },
      {
        icon: 'search',
        text: '我的',
        name: 'my',
        url: '/pages/my/my'
      },  
      {
        icon: 'setting-o',
        text: '设置',
        name: 'setting',
        url: '/pages/setting/setting'
      }
    ]
  },

  methods: {
    onChange(event) {
      this.setData({
        active: event.detail
      });
      wx.switchTab({
        url: this.data.list[event.detail].url,
      });
    },

    init() {
      const page = getCurrentPages().pop();
      this.setData({
        active: this.data.list.findIndex(item => item.url === `/${page.route}`)
      });
    }
  }
});

4.3 注意要在pages中要有这些页面,在app.json中配置

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Wow5ZTvV-1675156855448)(C:\Users\28132\AppData\Roaming\Typora\typora-user-images\1675156025879.png)]

在这里插入图片描述

4.4 在每个页面的onShow() 生命周期函数使用init函数

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-mQMQoX58-1675156855448)(C:\Users\28132\AppData\Roaming\Typora\typora-user-images\1675156211879.png)]

my页面 setting页面一样要添加!

最后效果:
在这里插入图片描述

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

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

相关文章

分布式定时任务框架选型

目录 1. 前言 2. 定时任务框架 3. 分布式任务调度系统对比 4. 和quartz框架对比 5. 综合对比 6. 总结和结论 7. 附定时任务的其他方案 1. 前言 我们先思考下面几个业务场景的解决方案: 支付系统每天凌晨1点跑批&#xff0c;进行一天清算&#xff0c;每月1号进行上个月清…

【算法】快速排序算法原理及实现

1.什么是快速排序算法 快速排序是对冒泡排序的一种改良版&#xff0c;通过一趟排序&#xff0c;把要排序的序列分割成两个部分&#xff0c;一部分的所有数据要比另一部分的数据都小&#xff0c;然后再根据这两部分的数据来进行快速排序。以此来达到整一个数据都变成了有序序列…

AI算法创新赛-人车目标检测竞赛总结01

AI0000020摘要:人车目标检测竞赛主要考察目标检测算法与 TPU 部署推理&#xff0c;主要考察算法选型与调 优&#xff0c;面向算能 TPU 迁移部署与推理加速两项能力;主要考核目标是算法效果(mAP)与推 理性能(单张图片推理时间)。针对这些要求&#xff0c;笔者从算法选型&#xf…

【实际开发11】- 统计 / 科学计算 - 1

目录 1. sql 统计返回值为 null 时 , 赋值 为 : 0 ( return UI ) 1. 手动 null 判断 , 进行 “0” 赋值 2. XxxxVO 展示对象 , 初始化时 , 赋值默认值 ( 待优化 ) 2. 统计异常 1. 注意中间表数据的维护 ( 同步删除 / 避免手动删数据 ) 3. 精度损失 1. Java 类型 float、…

.NET(C#、VB)APP开发——Smobiler平台控件介绍:LiveStream和LiveStreamPlayer

本文简述如何在Smobiler中使用LiveStream和LiveStreamPlayer。 LiveStream 直播推送插件 Step 1. 新建一个SmobilerForm窗体&#xff0c;并在窗体中加入LiveStream和Button&#xff0c;布局如下 选中LisvStream&#xff0c;在设计器中设置Url&#xff08;需要事先准备一个视频…

【面试原型链】前端面试那些事(1)之原型链详解

【写在前面】辞旧迎新的春季佳节&#xff0c;在这里博主先祝各位看官新的一年赚钱多多&#xff0c;知识满满&#xff0c;年后谈到面试&#xff0c; 好多人在面试的时候就倒在原型链知识点上面&#xff0c;主要原因还是基本功不够扎实&#xff0c;针对以前的知识我也计划在2023年…

C语言小题,通过指向结构体变量的指针变量输出结构体变量中成员的信息。(指针结构体变量的指针)

前言&#xff1a; 此篇是针对 指针结构体变量的指针 方面的练习。 解题思路&#xff1a; 在已有的基础上&#xff0c;本题要解决两个问题&#xff1a; &#xff08;1&#xff09;怎样对结构体变量成员赋值&#xff1b; &#xff08;2&#xff09;怎样通过指向结构体变量的指针…

天云数据:Hubble数据库系统自主研发率99.62%,是真正的信创数据库

软件是新一代信息技术的灵魂&#xff0c;是数字经济发展的基础&#xff0c;是制造强国、网络强国、数字中国建设的关键支撑。2021年&#xff0c;工信部印发的《“十四五”软件和信息技术服务业发展规划》明确指出&#xff0c;要聚力攻坚基础软件&#xff0c;关键基础软件补短板…

Javascript基础复盘5

内置对象 值属性 这些全局属性返回一个简单值&#xff0c;这些值没有自己的属性和方法。 InfinityNaNundefinedglobalThis函数属性 全局函数可以直接调用&#xff0c;不需要在调用时指定所属对象&#xff0c;执行结束后会将结果直接返回给调用者。 eval()uneval()isFinite()isN…

Q-Learning以及.NET环境下的实现

Q-Learning以及.NET环境下的实现写在前面机器学习Q-Learning环境准备试题准备解题过程写在结尾写在前面 看过我的文章的朋友应该都知道&#xff0c;我之前一直在研究视觉相关的知识&#xff0c;也看了一些卷积神经网络&#xff08;CNN&#xff09;&#xff0c;深度学习相关的文…

强化学习之:价值学习Value-Based Learning

文章目录参考内容动作价值函数&#xff08;Action-value Function&#xff09;深度强化学习&#xff08;DQN&#xff09;学习目标&#xff08;Goal&#xff09;如何获得尽可能好的 Q∗(st,a)→Q^{*}(s_t, a) \rightarrowQ∗(st​,a)→ 用神经网络通过学习获得时间差分算法&…

cocos creater 3.x 开发笔记(踩坑总结)

1、cocos creater 3.x 花屏闪屏黑屏 1.1 花屏 排序是一个很简单的功能&#xff0c;但是最终的呈现却是根据不同平台提供的渲染能力来的。因此&#xff0c;在这里说明一下&#xff0c;如果遇到了 UI 渲染出错&#xff0c;花屏&#xff0c;闪屏等现象&#xff0c;首先要检查的就…

【安装合集】Mysql8.0安装 2023年1月31日 22点15分

1.鼠标右击【Mysql8.0】压缩包选择【解压到Mysql8.0】。 2. 鼠标右击【mysql-installer-community-8.0.17.0】选择【安装】 3. 勾选【I accept the license terms】然后点击【Next】。 4. 选择【Custom】然后点击【Next】。 5. 双击【MySQL Servers】 双击【MySQL Server】&am…

数据指标体系的建设思考(四)

这一篇主要介绍对数据指标体系的价值、数据指标管理平台的理解及数据分析的趋势解读。 一、数据指标体系价值 关于数据指标体系的价值&#xff0c;我想大多数从事数据工作的人员都可以感受得到&#xff0c;毕竟数据指标的输出可以通过可视化的方式&#xff08;如大屏、驾驶舱…

Linux 中去除 vi/vim 和 git diff 中的 ^M 问题解决办法

去除 vi/vim 和 git diff 中的 ^M 问题解决办法问题现象初步分析进一步查看问题解决Source Insightdos2unixNodpadVimsed 命令综上Reference问题现象 git diff 时发现下面的情况&#xff0c;新修改的代码之处都是携带 ^M 字符&#xff0c; 初步分析 肯定是因为 Windows 和 …

推荐5款常用的有限元分析CAE软件

正如我们之前谈到的&#xff0c;计算机辅助软件有助于进行有限元分析。但是我们如何识别好的 CAE 软件呢&#xff1f;CAE 软件必须满足以下要求才能被纳入其类别使用户能够通过图形用户界面 (GUI) 创建模拟允许在模拟中测试组件&#xff0c;同时具有可自定义的环境变量协助优化…

JAVA队列-接口

前言 说到队列,大家都不陌生,很多场景都需要使用到队列,今天我们一起学习JDK提供的队列源码 类图 Queue接口的实现类有很多 从中,我们看到几个熟悉的,BlockingQueue 阻塞队列、Deque 双端队列 Queue 官方介绍: A collection designed for holding elements prior to proce…

MORPHVOX PRO 变声器 软件 Crack

MORPHVOX PRO 变声器 变音的全新层次 在网上聊天和游戏中使你变音 它具有超高语音学习技术&#xff0c;背景取消和高音质特点&#xff0c;将变音带向全新层次。 上好的变音质量 聆听MorphVOX Pro上好的变音质量。 *变音的音频因人而异&#xff0c;但它确实是同一个说话者发出…

国内爬虫图鉴

文章目录爬虫图鉴1.三个问题2.互联网上的爬虫2.1豪哥与爬虫2.2爬虫简介2.3APP身边的爬虫2.4爬虫排名1、排名第一的是出行2、排名第二的是社交。3、排名第三的是电商。4、接下来是 O2O 和搜索引擎。5、最后再说说政府部门。3.关于爬虫的几点疑问4.爬虫的TopN爬虫图鉴 本文案例来…