效果：

实现步骤：

	①给两个view选择项分别设置两个current属性，用来区分页面，一个值为0，一个为1
	②给两个view选项都设置一个样式的属性判断，双向数据绑定currentTab，currentTab初始为0，
	第一个view中当currentTab为0时为选中状态，否则不选中，第二个view为1时为选中状态，否则不选中
	③给两个选项都设置一个点击事件，如果currentTab等于current说明选中第一个，退出程序
	如果currentTab不等于current,说明选择第二个view，将current的值赋给currentTab，即currentTab等于1，
	然后第二个view将处于选中状态。
	④swiper中的current属性根据currentTab的值会进行切换

wxml中的代码：

<view class="content"> 
	//选择区域
	 <view class="loginTitle">
      <view class="{{currentTab==0?'select':'default'}}" data-current="0" bindtap="switchNav">账号密码登录</view>
      <view class="{{currentTab==1?'select':'default'}}" data-current="1" bindtap="switchNav">手机快捷登录</view>
     </view>
/* data-current 给元素的设置一个属性current，且值为0,取值时在e.target.dataset.current中取*/

	//分割线
	<view class="hr"></view>
	
	 <swiper current="{{currentTab}}" style="height:{{winHeight}}px">
          <swiper-item>
          <view style="margin-top:10px; border:1px solid #cccccc; width:99%;height:300rpx">
          我用来进行账号密码登录区域
          </view>
          </swiper-item>

          <swiper-item>
          <view style="margin-top:10px; border:1px solid #cccccc; width:99%; height:300rpx">
          我是用来进行手机快捷登录区域
           </view>
          </swiper-item>
    </swiper>

/*swiper中current的值为0时,显示第一个swiper-item的内容,当值为1时显示第二个swiper-item的内容,*/
</view>

wxss中的代码：

.loginTitle{
  display: flex;
  flex-direction: row;
  width:100%;
}
/*设置标题为弹性布局,横向分部，每个盒子占50%，选中时底部加红色边框
未选中时不加*/
.select{
  color:red;
  text-align:center;
  height:45px;
  line-height: 45px;
  border-bottom: 5rpx solid red;
  width:50%;
}
.default{
  text-align:center;
  height:45px;
  line-height: 45px;
  width:50%;
}
.hr{
  border:3rpx solid #cccccc;
  opacity: 0.2;
}

js中的代码：

Page({

  /**
   * 页面的初始数据
   */
  data: {
        currentTab:0,
        winWidth:0,
        winHeight:0
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onl oad: function (options) {
          // var page=this;
          wx.getSystemInfo({
          /*获取页面系统信息，windowWidth是可使用窗口宽度,单位是px*/
            success: (result) => {
              console.log(result);
              this.setData({winWidth:result.windowWidth});
              this.setData({winHeight:result.windowHeight});
            },
          })
  },
  switchNav:function(e){
      // var page=this;
      console.log(e);
      console.log(e.target.dataset.current);
      if(this.data.currentTab == e.target.dataset.current){
        return false;
      }
      else{
        this.setData({currentTab:e.target.dataset.current});
      }
  },

})

标签：登录,height,current,点击,选中,swiper,currentTab,view
来源： https://blog.csdn.net/yangaoyuan1999/article/details/115431145