实验八智能手机互联网程序设计(微信程序方向)实验报告

  • 请在上一次实验的基础之上完成"手机快速注册"页面、"企业用户注册"页面,并实现点击手机快速注册和企业用户注册后转跳至该页面
  • 在"手机快速注册"页面,输入框内输入内容并失去焦点后,下方的按钮会变化
  • 在企业用户注册页面,用户名输入框输入内容并失去焦点后,注册按钮也会发生变化

、实验步骤与结果(给出对应的代码或运行结果截图)

index.js

Page({

data:{

disabled:true,

btnstate:"default",

account:"",

password:""

},

accountInput:function(e){

var content = e.detail.value;

console.log(content);

if(content != ''){

this.setData({disabled:false,btnstate:"primary",account:content});

}else{

this.setData({disabled:true,btnstate:"default"});

}

},

pwdBlur:function(e){

var password = e.detail.value;

if(password != ''){

this.setData({password:password});

}

}

})

index.wxml

<view class="content">

<view class="account">

<view class="title">账号</view>

<view class="num"><input bindinput="accountInput" placeholder="用户名/邮箱/手机号" placeholder-style="color:#999999;"/></view>

</view>

<view class="hr"></view>

<view class="account">

<view class="title">密码</view>

<view class="num"><input bindblur="pwdBlur" placeholder="请输入密码" password placeholder-style="color:#999999;"/></view>

<view class="see">

<image src="/images/see.jpg" style="width:42px;height:30px;"></image>

</view>

</view>

<view class="hr"></view>

<button class="btn" disabled="{{disabled}}" type="{{btnstate}}" bindtap="login">登录</button>

<view class="operate">

<view><navigator url="../logs/logs">手机快速注册</navigator></view>

<view><navigator url="../company/company">企业用户注册</navigator></view>

<view>找回密码</view>

</view>

<view class="login">

<view><image src="/images/wxlogin.png" style="width:70px;height:98px;"></image></view>

<view><image src="/images/qqlogin.png" style="width:70px;height:98px;"></image></view>

</view>

</view>

Index.wxss

.content{

margin-top: 40px;

}

.account{

display: block;

padding-left: 20px;

padding-top: 20px;

padding-bottom: 10px;

width: 90%;

}

.title{

float: left;

margin-right: 30px;

font-weight: bold;

}

.hr{

border: 1px solid #cccccc;

opacity: 0.2;

width: 90%;

margin: 0 auto;

}

.see{

position: absolute;

right: 20px;

}

.btn{

width: 90%;

margin-top:40px;

color: #999999;

}

.operate{

display: block;

}

.operate view{

display: inline-block;

width: 33%; /* Assuming there are three items, each can take one-third of the container width */

text-align: center;

margin-top: 40px;

font-size: 14px;

color: #333333;

}

.login{

display: block;

margin-top: 150px;

text-align: center;

}

.login view{

display: inline-block;

}

logs.js

Page({

/**

* 页面的初始数据

*/

data: {

mobile:"",

disabled:true,

type:"default"

},

mobileblur:function(e){

var content = e.detail.value;

if(content !=""){

this.setData({

disabled:false,type:"primary",mobile:content

});

}else{

this.setData({

disabled:true,type:"default",mobile:null

});

}

console.log("注册成功,电话为:"+this.data.mobile)

}

})

logs.wxml

<view class="content">

<view class="hr"></view>

<view class="numbg">

<view>+86</view>

<view><input bindblur="mobileblur" placeholder="" maxlength="11" /></view>

</view>

<view>

<view class="xieyi">

<icon type="success" color="red" size="18"></icon>

<text class="agree">同意</text>

<text class="opinion">京东用户注册协议</text>

</view>

</view>

<button class="btn" disabled="{{disabled}}" type="{{type}}">下一步</button>

</view>

logs.wxss

.contene{

width: 100%;

height: 600px;

color: #f2f2f2;

}

.hr{

padding: 20px;

}

.numbg{

border: 1px solid #cccccc;

width: 90%;

margin: 0 auto;

background-color: white;

border-radius: 5px;

display: flex;

flex-direction: row;

height: 50px;

}

.numbg view{

margin-left: 20px;

margin-top: 14px;

}

.xieyi{

margin-left: 15px;

margin-top: 15px;

}

.agree{

font-size: 13px;

margin-left: 5px;

color: #666666;

}

.opinion{

font-size: 13px;

color: black;

font-weight: bold;

}

.btn{

width: 90%;

margin-top: 30px;

}

效果图

相关推荐
轻口味1 小时前
命名空间与模块化概述
开发语言·前端·javascript
前端小小王2 小时前
React Hooks
前端·javascript·react.js
迷途小码农零零发2 小时前
react中使用ResizeObserver来观察元素的size变化
前端·javascript·react.js
真滴book理喻5 小时前
Vue(四)
前端·javascript·vue.js
程序员_三木6 小时前
Three.js入门-Raycaster鼠标拾取详解与应用
开发语言·javascript·计算机外设·webgl·three.js
云云3216 小时前
怎么通过亚矩阵云手机实现营销?
大数据·服务器·安全·智能手机·矩阵
开心工作室_kaic7 小时前
springboot476基于vue篮球联盟管理系统(论文+源码)_kaic
前端·javascript·vue.js
川石教育7 小时前
Vue前端开发-缓存优化
前端·javascript·vue.js·缓存·前端框架·vue·数据缓存
搏博7 小时前
使用Vue创建前后端分离项目的过程(前端部分)
前端·javascript·vue.js
温轻舟7 小时前
前端开发 之 12个鼠标交互特效上【附完整源码】
开发语言·前端·javascript·css·html·交互·温轻舟