标签：登录 height current 点击 选中 swiper currentTab view

效果：

实现步骤：

	①给两个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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。