小程序
小游戏
企业微信
微信支付
扫描小程序码分享
3 个回答
加粗
标红
插入代码
插入链接
插入图片
上传视频
// 自定义tabba --> rindex.wxml
<cover-view class="tab-bar" wx:if="{{showTabBar}}"> <cover-view class="tab-bar-border"></cover-view> <cover-view wx:for="{{isClientVersion?clientList:shopList}}" wx:key="index" class="tab-bar-item" data-path="{{item.pagePath}}" data-selectedPath="{{item.selectedIconPath}}" data-index="{{index}}" bindtap="switchTab" > <cover-image class="cover-image" src="{{selected === index ? item.selectedIconPath : item.iconPath}}"> </cover-image> <cover-view class="cover-view" style="color: {{selected === index ? selectedColor : color}}"> {{item.text}} </cover-view> </cover-view> </cover-view> // index.js var app = getApp(); Component({ data: { showTabBar:true, selected: 0, color: "#7A7E83", selectedColor: "#3cc51f", isClientVersion:app.globalData.isClientVersion, clientList: [{ pagePath: "/pages/index/index", iconPath: "/assets/tabBar/order-nor@2x.png", selectedIconPath: "/assets/tabBar/order-press@2x.png", text: "预约" }, { pagePath: "/pages/message/message", iconPath: "/assets/tabBar/my-nor@2x.png", selectedIconPath: "/assets/tabBar/my-press@2x.png", text: "我的" }], shopList: [{ pagePath: "/pages/managementServiceList/managementServiceList", iconPath: "/assets/tabBar/my-nor@2x.png", selectedIconPath: "/assets/tabBar/my-press@2x.png", text: "服务列表" }, { pagePath: "/pages/message/message", iconPath: "/assets/tabBar/my-nor@2x.png", selectedIconPath: "/assets/tabBar/my-press@2x.png", text: "我的" }], realList:[] }, // 组件生命周期 lifetimes:{ attached(){ this.setData({ isClientVersion:app.globalData.isClientVersion, }) } }, methods: { switchTab(e) { const data = e.currentTarget.dataset const url = data.path wx.switchTab({url}) } } }) // ‘我的’相关代码 onShow(){ if (typeof this.getTabBar === 'function' && this.getTabBar()) { this.getTabBar().setData({ selected: 1 // 根据tab的索引值设置 }) } // ‘预约页面’相关代码 onShow(){ if (typeof this.getTabBar === 'function' && this.getTabBar()) { this.getTabBar().setData({ selected: 0 // 根据tab的索引值设置 }) } // ‘服务列表’相关代码 onShow(){ if (typeof this.getTabBar === 'function' && this.getTabBar()) { this.getTabBar().setData({ selected: 0 // 根据tab的索引值设置 }) }
你好,麻烦通过点击下方“反馈信息”按钮,提供出现问题的。
代码的问题吧 贴下代码看看
关注后,可在微信内接收相应的重要提醒。
请使用微信扫描二维码关注 “微信开放社区” 公众号
// 自定义tabba --> rindex.wxml
<cover-view class="tab-bar" wx:if="{{showTabBar}}"> <cover-view class="tab-bar-border"></cover-view> <cover-view wx:for="{{isClientVersion?clientList:shopList}}" wx:key="index" class="tab-bar-item" data-path="{{item.pagePath}}" data-selectedPath="{{item.selectedIconPath}}" data-index="{{index}}" bindtap="switchTab" > <cover-image class="cover-image" src="{{selected === index ? item.selectedIconPath : item.iconPath}}"> </cover-image> <cover-view class="cover-view" style="color: {{selected === index ? selectedColor : color}}"> {{item.text}} </cover-view> </cover-view> </cover-view> // index.js var app = getApp(); Component({ data: { showTabBar:true, selected: 0, color: "#7A7E83", selectedColor: "#3cc51f", isClientVersion:app.globalData.isClientVersion, clientList: [{ pagePath: "/pages/index/index", iconPath: "/assets/tabBar/order-nor@2x.png", selectedIconPath: "/assets/tabBar/order-press@2x.png", text: "预约" }, { pagePath: "/pages/message/message", iconPath: "/assets/tabBar/my-nor@2x.png", selectedIconPath: "/assets/tabBar/my-press@2x.png", text: "我的" }], shopList: [{ pagePath: "/pages/managementServiceList/managementServiceList", iconPath: "/assets/tabBar/my-nor@2x.png", selectedIconPath: "/assets/tabBar/my-press@2x.png", text: "服务列表" }, { pagePath: "/pages/message/message", iconPath: "/assets/tabBar/my-nor@2x.png", selectedIconPath: "/assets/tabBar/my-press@2x.png", text: "我的" }], realList:[] }, // 组件生命周期 lifetimes:{ attached(){ this.setData({ isClientVersion:app.globalData.isClientVersion, }) } }, methods: { switchTab(e) { const data = e.currentTarget.dataset const url = data.path wx.switchTab({url}) } } }) // ‘我的’相关代码 onShow(){ if (typeof this.getTabBar === 'function' && this.getTabBar()) { this.getTabBar().setData({ selected: 1 // 根据tab的索引值设置 }) } // ‘预约页面’相关代码 onShow(){ if (typeof this.getTabBar === 'function' && this.getTabBar()) { this.getTabBar().setData({ selected: 0 // 根据tab的索引值设置 }) } // ‘服务列表’相关代码 onShow(){ if (typeof this.getTabBar === 'function' && this.getTabBar()) { this.getTabBar().setData({ selected: 0 // 根据tab的索引值设置 }) }
onTabItemTap 点击 tab 时触发,更新数据就好
代码的问题吧 贴下代码看看