其他分享
首页 > 其他分享> > 运用swiper来实现点击切换登录

运用swiper来实现点击切换登录

作者:互联网

效果:

在这里插入图片描述

实现步骤:

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