收藏
回答

关于自定义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>



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

4 个回答

登录 后发表内容