微信小程序之wx:if wx:else的使用

一、内容简介

今天呢我们用wx:if wx:else 语句实现用账号密码登录。

二、界面示例图

1、简陋的主界面

2、简陋的登录失败反馈

3、简陋的登录成功界面

三、代码实现

1、布局代码

<!--miniprogram/pages/login/admin.wxml-->
<view wx:if='{{logined==false}}' class='contain'>
  <text class='title'>管理系統</text>
  <form id='info' bindsubmit='login'>
    <input name='usr' class='admin' placeholder='输入管理员账号'></input>
    <input name='psw' password='true' class='admin' placeholder='输入管理员密码'></input>
    <button type='primary' form-type='submit'>登录</button>
  </form>
</view>
<view wx:else>
  <view>登录成功</view>
  <button bindtap='exit'>退出登录</button>
</view>

2、样式代码

/* miniprogram/login/admin.wxss */
.contain{
  text-align: center;
  color: rgba(51, 26, 161, 0.89);
  font-size: 60rpx;
  margin-top: 100rpx;
}

.admin{
  margin-top: 150rpx;
  margin-left: 30rpx;
  margin-right: 30rpx;
  margin-bottom: 100rpx;
  background: rgba(99, 235, 133, 0.582);
  border: 1px solid black;
}

3、js代码

动态控制界面的更换

//miniprogram/login/admin.js

Page({
  data: {
    logined:false		//用于控制哪个view视图展现在界面上
  },
  login(res){				//点击登录按钮，提交表单后执行的函数，用于验证账号与密码
    if(res.detail.value.usr == '123'&&res.detail.value.psw == 'abc')  
    {
      wx.showToast({
        title: '登录成功',
      })
      this.setData({
        logined:true
      })
    }
    else{
      wx.showToast({
        title: '账号与密码不对应',
        icon:'none'
      })
    }
  },
  exit(){			//退出登录的函数实现，即简单地将管理界面藏起来，使登录界面展现出来。
    this.setData({
      logined:false
    })
  }
})

四、总结

1、想要控制哪个视图显示，就在他的布局代码中加入wx:if wx:else语句，然后通过js文件动态设置视图是否显示。

2、控制视图显示与隐藏，还有一个属性是hidden，hidden在页面加载的时候无论是否隐藏，都会渲染所有的布局，而wx:if语句，只有显示出来的视图才会被渲染。建议当频繁使用显示与隐藏功能时，用属性hidden，其他情况可以使用wx:if ,wx:else 会节省初次渲染的时间。

OK，本次分享到此结束，拜拜。