陈桥驿站 陈桥驿站

微信小程序自定义组件TabHost

--> 微信小程序 阅读 ( 244 ) 文章转载请注明来源!

微信小程序如何实现Android原生组件:TabHost。

根据原生组件TabHost原生组件的SDK文档:

Container for a tabbed window view. This object holds two children: a set of tab labels that the user clicks to select a specific tab, and a FrameLayout object that displays the contents of that page. The individual elements are typically controlled using this container object, rather than setting values on the child elements themselves。

简而言之:TabHost就是一个分页选项卡,但是微信提供的组件有限,所以只能自己通过对于事件的监听来实现。

思路

1.准备两套样式:选中和非选中的两种状态

.task-header-black{
  font-size: 32rpx;
  text-align: center;
  width: 33%;
  color: #000000;
  display: inline-block
}

.task-header-blue{
  font-size: 32rpx;
  text-align: center;
  width: 33%;
  color: #08c7b0;
  display: inline-block
}

2.判断当前的item.idselectIndex是否相等渲染不同的样式

<view class=\"task-header\">
    <block wx:for = \"{{headers}}\">
      <block wx:if=\"{{item.id == selectIndex}}\">
        <view class=\"task-header-blue\" data-id=\"{{item.id}}\" bindtap=\"onClickTaskType\">{{item.name}}</view>
      </block>
      <block wx:else>
        <view class=\"task-header-black\" data-id=\"{{item.id}}\" bindtap=\"onClickTaskType\">{{item.name}}</view>
      </block>
    </block>
</view>

3.绑定点击事件onClickTaskType改变selectIndex的值

data: {
    headers: [{\"id\": \"1\", \"name\": \"待处理\"}, {\"id\": \"2\", \"name\": \"处理中\"}, {\"id\": \"3\", \"name\": \"已结束\"}],
    selectIndex: 1
},

onClickTaskType: function(e){
        this.setData({
          selectIndex: e.currentTarget.dataset.id
    })
},

本文基于《署名-非商业性使用-相同方式共享 4.0 国际 (CC BY-NC-SA 4.0)》许可协议授权
文章链接:http://www.cctv3.net/archives/weChatTabHost.html (转载时请注明本文出处及文章链接)

微信小程序
发表新评论
雷姆
拉姆