对于黑马程序员微信小程序课程中自定义tabbar图标闪烁的理解_"slot=\"icon-active"_sbuds的博客-程序员秘密

最近在学习b站黑马程序员的小程序课程,在学习基础知识接近尾声时,我自己发现了一个问题,老师讲的也并不是很清晰,弹幕也有对此有疑问,我仔细想了想,根据自己的理解,感觉大概应该是这么回事

自定义tabbar,在app.json文件的list中声明custom节点,在根目录中创建custom-tab-bar文件夹,在此目录下创建index组件,在编写index组件中使用了vant weapp第三方插件,在app.json中导入包,编辑index.wxml具体代码如下

//index.wxml
<van-tabbar active="{
   { active }}" bind:change="onChange" active-color="#13A7a0">
  <van-tabbar-item  wx:for="{
   {list}}" wx:key="index" info="{
   {item.info?item.info:''}}">
    <image
      slot="icon"
      src="{
   {item.iconPath}}"
      mode="aspectFit"
      style="width: 25px; height: 25px;"
    />
    <image
      slot="icon-active"
      src="{
   {item.selectedIconPath}}"
      mode="aspectFit"
      style="width: 25px; height: 25px;"
    />
    {
   {item.text}}
  </van-tabbar-item>
 
</van-tabbar>

通过onchange方法中的active触发底部tabbar图标颜色的变换(通过鼠标点击)和页面的跳转,active的默认值设置在index.js文件中,onchange方法如下,

 methods: {
    onChange(event) {
     



       //此处中间部分的以下两行就是问题的所在
      // this.setData({ active: event.detail });
      this.updateActive(event.detail)




      wx.switchTab({
        url: this.data.list[event.detail].pagePath,
      })
    },

  }

如果将active设置在组件的data中,在点击事件开始后,底部的图标将先开始跳转,也就是变成选中图标,然后页面跳转,可是图标又变成未选中图标,选中图标为上次的选中图标,我很不理解,老师直接给出了将active变量设置在store外部全局共享数据中,通过调用store中的方法,同时将传递的值传给store中的active将变化的值又映射到组件index.js中,active的值并不会发生变化,所以图标的变亮和跳转页面是同步发生的,可是定义到index.js中,执行完跳转页面后,页面会进行刷新,也就是active的值会回到上一次的值当中,也就是使用了store.js全局数据共享,保证了active的不变,只有像java一样调用store.js接口中的方法,才可以改变active的值

以上仅代表个人看法,如有大神或者老师,请多指教

本文链接：https://blog.csdn.net/weixin_52261391/article/details/123390855

原作者删帖不实内容删帖广告或垃圾文章投诉

智能推荐

代码重构-艰难的开始——重构_代码重构困难_bluebell_55的博客-程序员秘密

转自：http://my.oschina.net/caiyuan/blog/29796你曾去想重构一个很老的模块，但是你只看了一眼你就恶心极了。文档，奇怪的函数和类的命名，等等，整个模块就像一个带着脚镣的衣衫褴褛的人，虽然能走，但是其已经让人感到很不舒服。面对这种情况，真正的程序员会是不会认输的，他们会接受挑战认真分析，那怕重写也在所不惜。最终那个模块会被他们重构，就像以前和大家介

VC++6.0怎么编译Debug版本和Release版本。_LeoSame的博客-程序员秘密

右键点击菜单空白处——选择“组建”——选择“Win32 Release“——重新编译链接右键点击菜单空白处——选择“组建”——选择“Win32 Debug“——重新编译链接

微软ime日文输入法在假名输入模式下怎么快速输入英文_小妖666的博客-程序员秘密

为假名输入模式很麻烦。有什么办法呢？使用方法：在假名输入模式下按 Shift 键，这时可以输入英文了，输入完后按回车就可以继续输入假名了，很方便。

没去现场？一文 Get 云栖大会「移动专场」精华内容~含PPT下载_阿里巴巴淘系技术团队官网博客的博客-程序员秘密

出品|阿里巴巴新零售淘系技术部2019年9月27日，「杭州云栖大会-淘系技术嘉年华」移动端侧技术专场，在云栖小镇举办，现场爆满 200+开发者齐聚，共同进行了一次面对面的...

Pycharm IDE错误：_weixin_30915275的博客-程序员秘密

设置anaconda环境1、点击Create New Project选项2、选择Existing interpreter，在弹出来的页面中配置删除工程1、在菜单中选择：file——>close project2、选择需要删除的项目右上角的“×”号进行删除工程项目3、找到工程项目的存放路径，删除对应的工程项目文件使用Anaconda时报错：Import...

2019牛客暑期多校训练营（第十场）Han Xin and His Troops(高精度拓展中国剩余定理_nuoyanli的博客-程序员秘密

题目来源https://ac.nowcoder.com/acm/contest/890/D题意给定n,m和{a1a2⋮an}给定n,m和\left\{ \begin{matrix}a_1\\a_2\\\vdots\\a_n \end{matrix} \right\}给定n,m和⎩⎪⎪⎪⎨⎪⎪⎪⎧a1a2⋮an⎭⎪⎪⎪⎬⎪⎪⎪⎫和{b1b2⋮bn}求X\left\...