小程序自定义tabBar+Vant weapp

这篇具有很好参考价值的文章主要介绍了小程序自定义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

小程序自定义tabBar+Vant weapp,小程序

 页面效果:

小程序自定义tabBar+Vant weapp,小程序

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

 完成了。文章来源地址https://www.toymoban.com/news/detail-630136.html

到了这里,关于小程序自定义tabBar+Vant weapp的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 微信小程序的自定义TabBar及Vant的使用

    1、在 资源管理器 空白位置,点右键打开 在外部终端窗口打开 2、初始化NPM npm init -y 3、安装命令 npm i @vant/weapp@1.3.3 -S --production 4、构建NPM包 在 工具 里选择构建NPM包 5、删除style:v2 在app.json里,删除\\\"style\\\":\\\"v2\\\" 6、按需引入 7、使用 1、定义 2、使用 1、配置 在app.json中的 ta

    2024年02月14日
    浏览(41)
  • 微信小程序用vant自定义tabbar页面并跳转相应页面

    步骤一 安装 vant 组件库 下载完后要npm构建才能使用 步骤二 修改 app.json 将 app.json 中的 \\\"style\\\": \\\"v2\\\" 去除,小程序的新版基础组件强行加上了许多样式,难以覆盖,不关闭将造成部分组件样式混乱 步骤三 修改 project.config.json 开发者工具创建的项目, miniprogramRoot 默认为 minipro

    2024年01月22日
    浏览(49)
  • 定义tabbar,以及解决原生微信小程序使用vant的tabbar的bug(点击俩次图标才正确激活)

    详细步骤,可以参考小程序官方给出的文档: https://developers.weixin.qq.com/miniprogram/dev/framework/ability/custom-tabbar.html 在 app.json 中的 tabBar 项指定 custom 字段 在代码根目录下添加入口文件: custom-tab-bar用自定义组件的方式编写即可,用自定义组件的方式编写即可,该自定义组件完全接

    2024年04月14日
    浏览(41)
  • 微信小程序引入vant-weapp后出现[‘vant-XXX‘]:‘@vant/weapp/xxx‘未找到,错误解决

    出现“[‘vant-XXX’]:\\\'@vant/weapp/xxx’未找到”的错误提示 1、找到小程序所在的目录,用管理员模式下打开cmd 2、运行npm init,一路回车,用默认的即可 3、运行npm i @vant/weapp -S --production 如果用的是淘宝镜像的,使用cnpm i @vant/weapp -S --production 4、将 app.json 中的 “style”: “v2” 去

    2024年02月13日
    浏览(63)
  • 【小程序使用vant Weapp组件库详细教程】

    要说到小程序开发过程中用到的UI组件库,我第一个想到的就是vant,因为对于我来说,这个组件库里面的UI界面比较符合我的审美,颜值还不错,另外最重要的是,里面的功能比较齐全,项目之中要用到的一些需求,在这里都可以找到并且直接使用,就很nice了。 小程序使用轻

    2024年02月16日
    浏览(54)
  • 解决微信小程序vant weapp组件库时间选择器只显示年year的问题 vant weapp版本1.10.5

    当今网上十篇文章九个抄,抄的还都是远古文章,完全不适用现在的版本,故于2023.3.10日,出一篇现vant weapp版本1.10.5的时间选择器只显示year模式的需求,解决官方无法显示只带有年份year的时间选择器问题 找到时间选择器文件,修改datetime-picker/index.js源码 1. 先让面板支持只

    2024年02月12日
    浏览(42)
  • 小程序-封装 @vant/weapp上传图片及视频预览组件

    项目中用到了上传图片的业务,为此进行了封装 i-uploader 和 i-uploader-video 组件。 index.js : index.scss : index.json : index.wxml : 使用: page.wxml : index.js : index.json : index.scss : index.wxml : 使用: page.wxml :

    2024年02月12日
    浏览(39)
  • 微信小程序安装和使用 Vant Weapp 组件库

    Vant 是一个轻量、可靠的移动端组件库,于 2017 年开源。 目前 Vant 官方提供了 Vue 2 版本、Vue 3 版本和微信小程序版本,并由社区团队维护 React 版本和支付宝小程序版本。 在小程序项目上安装Vant Weapp,(你的电脑应该有npm环境才行)。 win + R 输入 npm -version 查看一下 如果没有

    2024年02月16日
    浏览(73)
  • Vue+elementui和uniapp小程序+vant weapp

    人都傻了,搞了两天一直报错,才知道elementui是PC端的ui,不能用于小程序。 所以我要做两个vue的练习项目,,,,又发现新大陆,小程序除了uniapp还有taro,又有新东西学 了 第一种 PC端VUE+elementui ① npm init vue@latest ②npm install element-plus --save 顺便说一句,如果安装了一个不想要

    2024年02月03日
    浏览(29)
  • 【微信小程序】Vant Weapp 组件 uploader文件上传

    wxml中: json中: js中:

    2024年02月16日
    浏览(63)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包