微信小程序底部导航图标如何设置大小

Posted 2023-03-23

参考技术A

1、新建一个微信小程序0607，完成后，大致架构如图。

2、打开app.json，在其中配置topbar，如图，红色部分表示的代码；注意：绿色处的逗号，不可省略。

3、上图代码运行后，即可看到添加的底部导航，如图。

4、在app.json中，再添加一个导航test，需要添加两端代码，如图中的代码1和代码2，运行成功后，会在pages文件夹下出现test文件。

5、给添加图标，要使用 iconPath，selectedIconPath这两个属性。

6、运行后，出现底部导航图标，点击选中的显示√，如图。

7、如果不喜欢导航放在下面，可以改变position的值，将其放在最上端即可。

微信小程序 导航栏切换视图

参考技术A 效果图

.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;