微信小程序如何自定义底部导航，自定义导航案例

2021-11-24 阅读：2344 类型：后端分类：微信小程序标签：微信小程序

微信小程序默认的导航比较单一，不利于维护，我们可以自定义导航，通过组件的形式

1、在根目录创建components文件夹，用于放置我们的导航的组件

2、创建tabBar组件，右击组件文件夹新建Component

3、编写组件代码

tabBar.wxml

<view class="todbar {{isFullSucreen?'fix-Full-button':''}}">
 <view class="todbarItem" bindtap="tabClick" data-path='{{item.pagePath}}' wx:for="{{tabbarList}}" wx:key="{{item}}" style="width: {{750 / tabbarList.length}}rpx;">
   <view class="todbarItemImage">
     <image src="{{item.pagePath==thisUrl ? item.selectedIconPath : item.iconPath}}"></image>
   </view>
   <view class="todbarItemWord {{item.pagePath==thisUrl ? 'on' : ''}}">{{item.text}}</view>
 </view>
</view>

tabBar.js

// components/tabBar/tabBar.js
// 获取应用实例
const app = getApp()
// 引入发送请求方法
import { request } from "../../request/index.js"
Component({
 /**
  * 组件的属性列表
  */
 properties: {
 
 },
 
 /**
  * 组件的初始数据
  */
 data: {
   tabbarList:[],
   isFullSucreen: app.globalData.isFullSucreen ? true : false, //判断机型
   thisUrl:null,
 },
 
 /**
  * 组件的方法列表
  */
 methods: {
  tabClick(e){
     // console.log(e.currentTarget.dataset.path)
     wx.reLaunch({
       url:e.currentTarget.dataset.path,
     });
   },
 },
 attached(){
   // 显示加载图标
   wx.showLoading({
     title: '加载中',
   })
   request({
     url: '/Draw/getTabbar',
   }).then(result=>{
     console.log(result)
     if(result.data.code==200){
       wx.hideLoading()
       // 数据请求成功后，关闭刷新
       wx.stopPullDownRefresh({
         success (res) {
             console.log('刷新成功');
         }
       });
       this.setData({
         tabbarList:result.data.data
       })
       console.log(this.data.tabbarList)
     }else{
       wx.showLoading({
         title: '加载中'
     });
     }
   })
   var pages = getCurrentPages(); //获取加载的页面
   var currentPage = pages[pages.length - 1]; //获取当前页面的对象
   var url = currentPage.route; //当前页面url
   this.setData({
     thisUrl:'/'+url
   })
   console.log(this.data.thisUrl)
 }
})

4、效果展示：