小程序中tabs标签页的实现
原创
效果图
2022-03-07_201751.png
实现步骤
引入组件
在page.json文件中引入组件
"usingComponents": {
"van-tab": "@vant/weapp/tab/index",
"van-tabs": "@vant/weapp/tabs/index"
},页面使用组件
在wxml中使用组件
<van-tabs
animated
swipeable
active="{{ active }}"
bind:change="onChange"
>
<van-tab title="今日业绩">
<view class="top">
<view class="title">
今日开发
</view>
<view class="content">
{{countday}}
</view>
</view>
<view class="tr bg-w">
<view class="th">小区名</view>
<view class="th ">状态</view>
<view class="th ">联络时间</view>
</view>
<view class="table">
<block wx:for="{{achieveList}}" wx:key="{[code]}">
<view class="tr bg-g" wx:if="{{index % 2 == 0}}" bindtap="gotoEstateDetail" data-id="{{item.id}}">
<view class="td">{{item.estatename}}</view>
<view class="td">{{item.statusvalue}}</view>
<view class="td">{{item.t}}</view>
</view>
<view class="tr bg-e" wx:else bindtap="gotoEstateDetail" data-id="{{item.id}}">
<view class="td">{{item.estatename}}</view>
<view class="td">{{item.statusvalue}}</view>
<view class="td">{{item.t}}</view>
</view>
</block>
</view>
</van-tab>
<van-tab title="累计业绩">
<view class="top">
<view class="title">
累计开发
</view>
<view class="content">
{{countall}}
</view>
</view>
<view class="tr bg-w">
<view class="th">小区名</view>
<view class="th ">状态</view>
<view class="th ">联络时间</view>
</view>
<view class="table">
<block wx:for="{{achieveAlllist}}" wx:key="{[code]}">
<view class="tr bg-g" wx:if="{{index % 2 == 0}}" bindtap="gotoEstateDetail" data-id="{{item.id}}">
<view class="td">{{item.estatename}}</view>
<view class="td">{{item.statusvalue}}</view>
<view class="td">{{item.t}}</view>
</view>
<view class="tr bg-e" wx:else bindtap="gotoEstateDetail" data-id="{{item.id}}">
<view class="td">{{item.estatename}}</view>
<view class="td">{{item.statusvalue}}</view>
<view class="td">{{item.t}}</view>
</view>
</block>
</view>
</van-tab>
</van-tabs>原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
评论
登录后参与评论
推荐阅读
目录