微信小程序实现底部导航

(编辑：jimmy 日期: 2025/1/16 浏览：2)

之前我的做微信小程序的时候，需要一个底部导航样式，但是我搜索的时候，大部分都是写的一些小程序自定义的tabBar的样式，而当时我在网上有一个地方找到了这个模板，现在介绍给大家参考。

WXML代码：

<import src="/UploadFiles/2021-04-02/nav">

JS代码：


Page({
 data: {
  navData: [
   {
    name: "购物车", //文本
    current: 1,  //是否是当前页，0不是 1是
    style: 0,   //样式
    ico: 'icon-qiugouguanli', //不同图标
    fn: 'gotoCompanyIndex'  //对应处理函数
   }, {
    name: "我的名片",
    current: 0,
    style: 0,
    ico: 'icon-mingpianjia',
    fn: 'gotobusinessCard'
   }, {
    name: "发布中心",
    current: 0,
    style: 1,
    ico: '',
    fn: 'gotopublish'
   }, {
    name: "消息中心",
    current: 0,
    style: 0,
    ico: 'icon-yikeappshouyetubiao35',
    fn: 'gotoMessages'
   }, {
    name: "个人中心",
    current: 0,
    style: 0,
    ico: 'icon-wode',
    fn: 'bindViewMy'
   },
  ],
 
 },
 
})



WXSS代码：


/**index.wxss**/
.userinfo {
 display: flex;
 flex-direction: column;
 align-items: center;
}
 
.userinfo-avatar {
 width: 128rpx;
 height: 128rpx;
 margin: 20rpx;
 border-radius: 50%;
}
 
.userinfo-nickname {
 color: #aaa;
}
 
.usermotto {
 margin-top: 200px;
}





以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

上一篇：手把手教你如何使用nodejs编写cli命令行

下一篇：对 Vue-Router 进行单元测试的方法

微信小程序实现底部导航

一句话新闻