微信小程序实现简易切换

微信小程序实现简易切换

废话不多说，先上图

收入界面

支出界面

.wxml

<button type="primary" bindtap="Income">收入</button>
<button type="warn" bindtap="Expenditure">支出</button>

<view wx:if="{{chooseIncome == true}}">
  这是收入界面
</view>

<view wx:if="{{chooseExpenditure == true}}">
  这是支出界面
</view>

.wxss

button{
  display: inline-block;
}

.js

Page({

  /**
   * 页面的初始数据
   */
  data: {
    chooseIncome:true,
    chooseExpenditure:false,
  },
  Income:function(){
    wx.clearStorage(),
    this.setData({
      chooseIncome:true,
      chooseExpenditure:false,
    })
  },
  Expenditure:function(){
    wx.clearStorage(),
    this.setData({
      chooseIncome:false,
      chooseExpenditure:true,
    })
  }
})

代码很简单，实现切换的原理就是在点击按钮之后，通过相应的点击事件修改data里面的值，通过if判断该界面是否显示，从而实现简易切换。