我微信小程序自定义底部导航栏

最新推荐文章于 2025-06-11 13:11:18 发布

ঞ᭄阿້໌ᮩ莲໌້ᮨꦿ

最新推荐文章于 2025-06-11 13:11:18 发布

阅读量293

点赞数

CC 4.0 BY-SA版权

分类专栏：微信小程序

本文链接：https://blog.youkuaiyun.com/qq_41241504/article/details/91044579

tabbar.wxml

<template name="tabBar">
  <view class="menu-tab-bar" style="color: {
  
  {tabBar.color}}; background:#fff; {
  
  {tabBar.position=='top'? 'top: 0' : 'bottom: 0'}}; {
  
  {tabBar.borderStyle? (tabBar.position=='top'? 'border-bottom: solid 1px '+tabBar.borderStyle + ';' : 'border-top: solid 1px '+tabBar.borderStyle + ';') : ''}}">
    <block wx:for="{
  
  {tabBar.list}}" wx:key="pagePath">
      <navigator url="{
  
  {item.pagePath}}" open-type="redirect" class="{
  
  {item.clas}}" style="{
  
  {item.active? 'color: '+(item.selectedColor? item.selectedColor : tabBar.selectedColor) : ''}}">
        <image src="{
  
  {item.selectedIconPath}}" wx:if="{
  
  {item.active}}" class="menu-img"></image>
        <image src="{
  
  {item.iconPath}}" wx:if="{
  
  {!item.active}}" class="menu-img"></image>