- 小程序自定义tab-bar报错
- 当前 Bug 的表现(可附上截图) [图片] - 预期表现 不报红 - 复现路径 - 提供一个最简复现 Demo Component({ data: { selected: 0, color: "#333333", backgroundColor: "#fbfbfb", selectedColor: "#4bc4f7", borderStyle: "white", list: [{ "pagePath": "/pages/index/index", "iconPath": "/static/img/index.png", "selectedIconPath": "/static/img/sindex.png", "text": "首页" }, { "pagePath": "/pages/serve/serve", "iconPath": "/static/img/serve.png", "selectedIconPath": "/static/img/sserve.png", "text": "服务" }, { "pagePath": "/pages/my/my", "iconPath": "/static/img/mmy.png", "selectedIconPath": "/static/img/smmy.png", "text": "我的" }] }, attached() { }, methods: { switchTab(e) { var _this=this const data = e.currentTarget.dataset console.log(data) const url = data.path wx.switchTab({ url }) _this.setData({ selected: data.index }) } } }) 这是tab-bar组件的js部分 <cover-view class="tab-bar"> <cover-view wx:for="{{list}}" wx:key="{{index}}" class="tab-bar-item" data-path="{{item.pagePath}}" data-index="{{index}}" bindtap="switchTab"> <cover-image src="{{selected === index ? item.selectedIconPath : item.iconPath}}"></cover-image> <cover-view style="color: {{selected === index ? selectedColor : color}}">{{item.text}}</cover-view> </cover-view> </cover-view> 这是wxml部分 分别在三个tab的onShow生命周期中添加了 if (typeof this.getTabBar === "function" && this.getTabBar()) { this.getTabBar().setData({ selected: 0 }) }
2019-04-10 - 关于自定义tabbar的点击跳动延迟
- 当前 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>
2019-03-27