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

2021-11-24   阅读:1896   分类:后端    标签: 微信小程序

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

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、效果展示:

【腾讯云】 爆款2核2G3M云服务器首年 61元,2核2G4M云服务器新老同享 99元/年,续费同价

‘简忆博客’微信公众号 扫码关注‘简忆博客’微信公众号,获取最新文章动态
转载:请说明文章出处“来源简忆博客”。http://www.tpxhm.com/adetail/854.html

×
觉得文章有用就打赏一下文章作者
微信扫一扫打赏 微信扫一扫打赏
支付宝扫一扫打赏 支付宝扫一扫打赏

文章评论(0)

登录
简忆博客壁纸一
简忆博客壁纸二
简忆博客壁纸三
简忆博客壁纸四
简忆博客壁纸五
简忆博客壁纸六
简忆博客壁纸七
简忆博客壁纸八
头像

简忆博客
勤于学习,乐于分享

置顶推荐

打赏本站

如果你觉得本站很棒,可以通过扫码支付打赏哦!
微信扫码:你说多少就多少~
微信扫码
支付宝扫码:你说多少就多少~
支付宝扫码
×