效果:
![在这里插入图片描述](https://img-blog.csdnimg.cn/2021040417414330.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lhbmdhb3l1YW4xOTk5,size_16,color_FFFFFF,t_70)
实现步骤:
①给两个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