小程序 - tab两栏切换效果

    <view class="shop-box">
        <view class="item">
            <view class="titel">
            <!-- style 可通过三元运算控制class类得到 -->
                <view class="p-text {{currentTab == "0" ? "text-bg" : ""}}" dada-current="0" 
                   bindtap="clickTab" style="color: {{currentTab=="0"?"#00a9fe":"#333"}}">
                    待缴费
                </view>
                <view class="p-text {{currentTab == "1" ? "text-bg" : ""}}" dada-current="0" 
                   bindtap="clickTab" style="color: {{currentTab=="1"?"#00a9fe":"#333"}}">
                    已缴费
                </view>
                <view class="img-box">
                    <picker mode="date" name="action_date" value="{{date}}" start="2010-09-01"
                     end="2099-09-01" bindchange="bindDateChange">
                         <image class="img" src="" mode="widthFix"></image>
                    </packer>
                </view>
            </view>
        </view>
    </view>
    <view class="form-box">
        <view class="weui-cell" wx:for="{{bill_list}}" wx:key="index">
            <view class="weui-cell-bd">{{iterm.unitName}}</view>
            <view class="weui-cell-ft">{{currentTab == 0 ? '未缴费':'已缴费'}}</view>
        </view>
        <view class="weui-cell" wx:for="{{bill_list}}" wx:key="index">
            <view class="weui-cell-bd">缴费类型</view>
            <view class="weui-cell-ft">{{type}}</view>
        </view>
        <view class="border-top">
            <button class="weui-btn" wx:if="{{currentTab==0}}" open-type="share" 
            data-id="{{item.id}}">催缴</button>
            <button class="weui-btn" wx:if="{{currentTab==0}}" open-type="share" 
            data-id="{{item.id}}" bindtap="navigatorUrl">缴费</button>
            <button class="weui-btn" wx:if="{{currentTab==1}}" open-type="share" 
            data-id="{{item.id}}" bindtap="navigatorUrl">查看</button>
        </view>
    </view>

var app = getApp();
Page({
    data: {
        currentTab: 0,
    },
    onLoad: function(option) {
        var that = this
        var currentType = option.currentType
        form_util.saveFormIds(app)  // 调用一个js
        that.setData({
            "type": currentType === "tube" ? "物业费" : (currentType === "water" ? "水费" ："电费")，
            "option": option
        })
        that.loadPager(1)
    },
    // 选项卡切换
    clickTab: function(e) {
        var that = this
        this.setData({
            currentTab: e.target.dataset.current
        })
        that.loadPager(1)
    },
    // 判断页面属性跳转
    navigatorUrl: function(e) {
        var id = e.currentTarget.dataset.id;
        var currentType = this.data.option.currentType;
        id && wx.navigateTo({
            url: "/pages/payment/info/index?id=" + id + "&currentType=" +  currentType,
        })  
    },  
  //转发
  onShareAppMessage: function(e) {
    var that = this;
    var id = e.target.dataset.id,
      currentType = that.data.option.currentType,
      typeName = that.data.type;
    var shareData = {
      title: '你这个月的' + typeName + '账单出来了, 赶快查看一下吧！',
      desc: '查看账单',
      path: '/pages/payment/info/index?id=' + id + '&currentType='+currentType,
    }
    //   分享给好友
    return shareData
  },
  // 日历
    bindDateChange: function(e) {
    var that = this
    that.setData({
      "date": e.detail.value
    })
    that.loadPager(1)
  },
})

效果图：