小程序 tab切换

本文介绍了一个关于WXML文件中如何正确获取dataset值的问题。作者分享了使用currentTarget而非target来获取dataset值的经验教训,这对于理解WXML与JS在事件处理上的差异非常重要。

index.wxml

<view class="{{currentTab==1?'active1':''}}" data-current="1" bindtap="switchNav">
index.js

switchNav: function(event) {
    var cur = event.currentTarget.dataset.current;
    if (this.data.currentTab == cur) { return false; }
    else {
      this.setData({
        currentTab: cur
      })
    }
  },

注:原来一直没做对,是因为这里获取dataset的值,是用currentTarget,而不是target,与js不同,坑了我几十分钟。

### 美团小程序 Tab 切换样式实现 在微信小程序中,Tab 栏的切换和自定义样式可以通过 `bottom-tab-bar` 或者通过自定义组件来完成。对于美团这样的应用来说,通常会采用更灵活的方式来自定义底部导航栏。 #### 使用 tabBar 配置项 如果希望快速搭建一个带有固定样式的 Tab 导航条,则可以直接利用微信小程序内置的 `tabBar` 属性,在 app.json 文件内配置: ```json { "tabBar": { "list": [ { "pagePath": "pages/index/index", "text": "首页" }, { "pagePath": "pages/category/category", "text": "分类" } ], "color": "#9aaebc", // 默认字体颜色 "selectedColor": "#ff5a0d", // 当前选中的字体颜色 "borderStyle": "black", // 上边框的颜色 "backgroundColor": "#ffffff" // 背景颜色 } } ``` 此方式简单易用,但是灵活性有限,无法满足复杂场景下的需求[^3]。 #### 自定义 Bottom Tab Bar 组件 为了达到更加个性化的视觉效果以及交互逻辑控制,可以创建自己的 bottom tab bar 组件。这允许完全掌控每一个细节,比如图标大小、间距调整等。下面是一个简单的例子展示如何构建这样一个组件: ```html <!-- components/bottom-tabs/wxml --> <view class="tabs"> <block wx:for="{{items}}" wx:key="index"> <navigator url="{{item.pagePath}}" open-type='switchTab' hover-class='none'> <image src="{{item.iconUrl}}"></image> <text>{{item.text}}</text> </navigator> </block> </view> ``` ```css /* components/bottom-tabs.wxss */ .tabs { display: flex; position: fixed; bottom: 0; width: 100%; height: 98rpx; background-color: white; } .tabs navigator { flex-grow: 1; text-align: center; padding-top: 6rpx; } .tabs image { width: 48rpx; height: 48rpx; } .tabs text { font-size: 24rpx; } ``` ```javascript // components/bottom-tabs.js Component({ properties: {}, data: { items: [{ pagePath: '/pages/home/home', iconUrl: '../../images/tab_home.png', text: '首页' }, { pagePath: '/pages/order/order', iconUrl: '../../images/tab_order.png', text: '订单' }] } }) ``` 这种方式提供了极大的自由度去定制外观,并且可以根据实际业务需求动态改变内容或行为[^1]。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值