微信小程序开发，导航栏右边的按钮怎么设置

1、可以使用小程序的storage本地存储功能，将用户在底部导航栏点击的内容存储在storage中，开发者可以在每次用户进入小程序时，获取storage中存储的信息，实现自定义底部导航缓存。

2、也可以使用小程序的session本地存储功能，将用户在底部导航栏点击的内容存储在session中，开发者可以在每次用户进入小程序时，获取session中存储的信息，实现自定义底部导航缓存。

3、可以使用小程序的openid，将用户在底部导航栏点击的内容存储在openid中，开发者可以在每次用户进入小程序时，获取openid中存储的信息，实现自定义底部导航缓存。

4、也可以使用小程序的云数据库，将用户在底部导航栏点击的内容存储在云数据库中，开发者可以在每次用户进入小程序时，获取云数据库中存储的信息，实现自定义底部导航缓存。

效果图

wxml页面

<!-- nav导航 -->

<view class="goods">

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

    <view class="{{itemstyle}}" bindtap="tarClick" data-index="{{index}}">{{itemtitcle}}</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){

          //  consolelog(ecurrentTargetdatasetindex)

           let tab = thisdatatab;

          let that = this;

          let index = ecurrentTargetdatasetindex

           consolelog(index)

          tabmap((item,key)=>{

           if(key==index)

           {

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

           }else{

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

           }

          })

          thatsetData({tab,index})

       },changeTab(e){

          consolelog(edetailcurrent)

          let tab = thisdatatab;

          let that = this;

          let index = edetailcurrent

           consolelog(index)

          tabmap((item,key)=>{

           if(key==index)

           {

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

           }else{

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

           }

          })

          thatsetData({tab,index})

       },

}）

wxss页面

/ pages/details/detailswxss /

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;

}

以上就是关于微信小程序开发，导航栏右边的按钮怎么设置全部的内容，包括:微信小程序开发，导航栏右边的按钮怎么设置、微信小程序自定义导航栏兼容适配所有机型、小程序自定义底部导航缓存等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！