收藏
回答

关于自定义tabbar的点击跳动延迟

框架类型 问题类型 API/组件名称 终端类型 微信版本 基础库版本
小程序 Bug tabbar 工具 6.5.3 2.6.2

- 当前 Bug 的表现(可附上截图)


- 预期表现


- 复现路径


- 提供一个最简复现 Demo


初始化

selecttt: 0,

点击我的,会在一瞬间回到首页,点击其他的tabbar也是一样,  只有连续点击两次,才会正确显示,当点击另外一个,但是显示图标还是不会过来,路径正常显示,只是icon图标会慢一步

Component({

data: {

selecttt: 0,

color: "#333333",

backgroundColor: "#fbfbfb",

selectedColor: "#4bc4f7",

borderStyle: "white",

list: [{

pagePath: "/pages/index/index",

iconPath: "/images/index.png",

selectedIconPath: "/images/sindex.png",

text: "首页"

}, {

pagePath: "/pages/shop/shop",

iconPath: "/images/shop.png",

selectedIconPath: "/images/sshop.png",

text: "商城"

},

{

pagePath: "/pages/serve/serve",

text: "服务",

iconPath: "/images/serve.png",

selectedIconPath: "/images/sserve.png"

},

{

pagePath: "/pages/my/my",

text: "我的",

iconPath: "/images/mmy.png",

selectedIconPath: "/images/smmy.png"

}]

},

attached() {

},

methods: {

switchTab(e) {

const data = e.currentTarget.dataset

const url = data.path

wx.switchTab({ url })

this.setData({

selecttt: data.index

})

}

}

})


wxml部分

<cover-view class="tab-bar">

<cover-view class="tab-bar-border"></cover-view>

<cover-view wx:for="{{list}}" wx:key="index" class="tab-bar-item" data-path="{{item.pagePath}}" data-index="{{index}}" id='{{index}}'  bindtap="switchTab">

<cover-image src="{{selecttt === index ? item.selectedIconPath : item.iconPath}}"></cover-image>

<cover-view style="color: {{selecttt === index ? selectedColor : color}}">{{item.text}}</cover-view>

</cover-view>

</cover-view>



回答关注问题邀请回答
收藏

5 个回答

  • 圆周
    圆周
    2023-07-11

    selected 的问题,需要在tab页面的onshow里设置好selected,牛皮

    2023-07-11
    有用
    回复
  • 
    
    2019-09-02

    我的好像解决了

    2019-09-02
    有用
    回复 3
  • t0123456789
    t0123456789
    2019-08-26

    同样的问题,必须点击两次,才会选中,如何解决

    2019-08-26
    有用
    回复
  • 初夏
    初夏
    2019-03-30

    同样的问题,解决了吗?

    2019-03-30
    有用
    回复
  • 灵芝
    灵芝
    2019-03-27

    麻烦提供出现问题的具体机型、微信版本号、系统版本号,以及能复现问题的代码片段(https://developers.weixin.qq.com/miniprogram/dev/devtools/minicode.html

    2019-03-27
    有用
    回复 8
    • 长安
      长安
      2019-03-28

      我的也出现了

      2019-03-28
      回复
    • 
      
      2019-03-28回复长安

      你也是点击出现下面的图标不正常显示吗

      2019-03-28
      回复
    • 
      
      2019-03-28

      我是在win7系统开发软件上出现的,手机微信版本号是7.0.1  ,  问题的代码片段就是上面文章里的代码

      2019-03-28
      回复
    • 
      
      2019-03-28

      https://developers.weixin.qq.com/s/fCnrCcmY7Y7R

      2019-03-28
      回复
    • 灵芝
      灵芝
      2019-03-28回复

      这个代码片段没有内容哦,麻烦重新提供一下

      微信版本是7.0.1的话,可以更新一下再试试看

      2019-03-28
      回复
    查看更多(3)
登录 后发表内容