<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>

.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;}

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 () {   }})