微信小程序实现简易版tab切换效果

利用三元运算符实现登录注册效果切换

直接上代码

wxml:

<view class='top'>
  <text class="{{login?'active':''}}" catchtap='login'>登录</text>
  <text class="{{login?'':'active'}}" catchtap='register'>注册</text>
</view>

<view class='log' wx:if="{{login}}">
  <form>
    <input placeholder='账号'/>
    <button>登录</button>
  </form>

</view>
<view class='reg'wx:else>
  <form>
    <input placeholder='密码'/>
    <button>注册</button>
  </form>
</view>

wxss:

.top{
  display: flex;
  flex-direction: row;
  height: 100rpx;
  border-bottom: 1px solid #ccc;
}
.top text{
  width: 50%;
  line-height: 100rpx;
  text-align: center;
}
.top .active{
  border-bottom: 2px solid red;
}
input{
  border-bottom: 1px solid #ccc;
  line-height: 100rpx;
  height: 100rpx;
  padding-left: 40rpx;
  margin-bottom: 40rpx;
}

 

js:

 

Page({
  data: {
    login:true
  },

  /**
   * 生命周期函数--监听页面加载
   */
  login:function(){
      this.setData({
        login:true
      });
  },
  register:function(){
    this.setData({
      login: false
    });
  },
  onLoad: function (options) {
    
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {
    
  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
    
  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {
    
  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {
    
  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {
    
  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {
    
  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {
    
  }
})

想要获得更多资料的  请微信搜索公众号 【热血科技】，关注一下即可。