微信小程序自定义底部导航栏,切换不同页面显示不同tabbar

微信小程序自定义底部导航栏,切换不同页面显示不同tabbar,第1张

在一个微信小程序中想要用到两种不同的tabbar样式,需要在app.js中自定义,在页面加载时进行调用。

比如一个小程序需要两个版本(用户版、商家版),并且能通过一个按钮在两个版本间进行切换,可能会用到这种方式。

此处以两个页面(index,logs)显示两种tabbar样式为例,通过切换按钮进行切换。

首先有一个模板文件:tabbar.wxml

在app.json中无需定义“tabBar”

在app.js中自定义如下

在app.wxss中定义显示样式

index.wxml,用到自定义tabbar的页面的首部都需要引入模板文件

index.js

logs.js

加载自定义tabbar的那句话(app.editTabBar)写在onload或onshow中都可以。

只写了两个主页面,其他页面可自行定义跳转。

最后放上效果图:

1.用于实现多页面的快速切换。

2.tabbar导航栏只能配置最少 2 个、最多 5 个 tab 页签。

3.步骤:

① 通过 app.json 文件的 pages 节点,新建 对应的 tab 页面

② tabBar 节点中,新增 list 数组,这个数组中存放的,是每个 tab 项的配置对象

③ 在 list 数组中,新增每一个 tab 项的配置对象。对象中包含的属性如下:

-pagePath 指定当前 tab 对应的页面路径【必填】

-text 指定当前 tab 上按钮的文字【必填】

-iconPath 指定当前 tab 未选中时候的图片路径【可选】

-selectedIconPath 指定当前 tab 被选中后高亮的图片路径【可选】

使用组件:<navigator url=" / ">1</navigator>

使用api:wx.navigateTo({url:" / "})

效果图

.wxml页面

<!-- nav导航 -->

<view class="goods">

  <block wx:for="{{tab}}" wx:key="key">

    <view class="{{item.style}}" bindtap="tarClick" data-index="{{index}}">{{item.titcle}}</view>

  </block>

</view>

<!--导航下  视图滑块 -->

<swiper bind:change="changeTab" current="{{index}}">

   <block>

     <swiper-item>

     <text>11111</text>

     </swiper-item>

     <swiper-item>

     <text>2222</text>

     </swiper-item>

     <swiper-item>

     <text>3333</text>

     </swiper-item>

   </block>

</swiper>

.js页面

Page({

    data: {

       tab:[

         {titcle:"商品参数",style:"color"}, 

         {titcle:"商品介绍",style:""},

         {titcle:"商品规格",style:""},

        ],

        index:0,

       goods:''

    },

       tarClick(e){

          //  console.log(e.currentTarget.dataset.index)

           let tab = this.data.tab

          let that = this

          let index = e.currentTarget.dataset.index

           console.log(index)

          tab.map((item,key)=>{

           if(key==index)

           {

              tab[key]['style']='color'

           }else{

             tab[key]['style']=''

           }

          })

          that.setData({tab,index})

       },changeTab(e){

          console.log(e.detail.current)

          let tab = this.data.tab

          let that = this

          let index = e.detail.current

           console.log(index)

          tab.map((item,key)=>{

           if(key==index)

           {

              tab[key]['style']='color'

           }else{

             tab[key]['style']=''

           }

          })

          that.setData({tab,index})

       },

})

.wxss页面

/* pages/details/details.wxss */

.goods{

    width: 100%

    height: 100rpx

    /* background-color:yellowgreen */

    display:flex

    justify-content: space-around

    align-items: center

}

.goods view{

    width: 160rpx

    height: 100rpx

    display: flex

    justify-content: center

    align-items: center

}

.color{

    color: red

    border-bottom: 2px solid red

}


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/yw/11467757.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-05-16
下一篇 2023-05-16

发表评论

登录后才能评论

评论列表(0条)

保存