小程序tab切换显示不同内容

WXML：

<view class='container'>

<view class='customer-management-panel'>

<view class='customer-management-nav-panel'>

<view class='management-nav flex-between'>

<view class='management-nav-subitem {{nav_index==1 ? "nav-active" : ""}}' bindtap='change_nav' data-index='1'>客户</view>

<view class='management-nav-subitem {{nav_index==2 ? "nav-active" : ""}}' bindtap='change_nav' data-index='2'>+导入</view>

</view>

<view class='management-select flex-around'>

<view class='flex-around management-select-subitem' hidden='{{nav_index==1 ? false : true}}'>

<view class='marked-as green-marked-as'>潜在客户</view>

<view class='marked-as gray-marked-as'>跟进中</view>

<view class='marked-as gray-marked-as'>已成交</view>

<view class='marked-as gray-marked-as'>其他</view>

</view>

<view class='flex-around management-select-subitem' hidden='{{nav_index==2 ? false : true}}'>

<view class='long-marked-as text24519'>从好友列表导入</view>

<view class='long-marked-as text24519'>从客户公海导入</view>

</view>

</view>

</view>

</view>

</view>

wxss:

@import "/templete/common.wxss";
.flex-around{

display: flex;

align-items: center;

justify-content: space-around;

}

.text24519{

font-size:24rpx;

font-weight:500;

color:rgba(19,176,179,1);

}

.customer-management-nav-panel{

background-color: #fff;

margin-bottom: 24rpx;

}

.management-nav{

border-bottom: 2rpx solid rgba(226,229,236,1);

}

.management-nav-subitem{

width: 50%;

text-align: center;

font-size:32rpx;

font-weight:bold;

color:rgba(0,0,0,1);

padding:0 0 10rpx 0;

margin: 24rpx 0;

}

.nav-active {

color:#13AFB2;

background:url('https://res.tuoluohuodong.com/text-selected.png')no-repeat center bottom 0rpx;

background-size:24rpx 6rpx;

}



.management-select{

height: 81rpx;

}

.management-select-subitem{

width: 100%;

}

.long-marked-as{

width:221rpx;

height:50rpx;

line-height: 50rpx;

text-align: center;

border:2rpx solid rgba(19,176,179,1);

border-radius:25rpx;

}

js:

// pages/mine/customer_management/customer_management.js

Page({



/**

* 页面的初始数据

*/

data: {

nav_index:1

},

/*

*nav切换

*/

change_nav:function(e){

this.setData({

nav_index:e.currentTarget.dataset.index

})

},

/**

* 生命周期函数--监听页面加载

*/

onLoad: function (options) {

var that=this;

},



/**

* 生命周期函数--监听页面初次渲染完成

*/

onReady: function () {



},



/**

* 生命周期函数--监听页面显示

*/

onShow: function () {



},



/**

* 生命周期函数--监听页面隐藏

*/

onHide: function () {



},



/**

* 生命周期函数--监听页面卸载

*/

onUnload: function () {



},



/**

* 页面相关事件处理函数--监听用户下拉动作

*/

onPullDownRefresh: function () {



},



/**

* 页面上拉触底事件的处理函数

*/

onReachBottom: function () {



},



/**

* 用户点击右上角分享

*/

onShareAppMessage: function () {



}

})