本文给大家带来的是微信小程序宏华净水员工登录页面设计制作开发教程，制作好以后效果图如下：
一、wxml页面代码如下：
<!--pages/login/login.wxml-->
<view class='login'>
<text class='title'>宏华净水</text>
<view class='inputBox flex align border-bottom'>
<view class='item'><image mode="widthFix" src="../../image/icon_login_left_phone@3x.png"></image></view>
<view class='item input'><input placeholder='请输入手机号码' type='number' maxlength='11'></input></view>
</view><!--inputBox-->
<view class='inputBox flex align border-bottom'>
<view class='item'><image mode="widthFix" src="../../image/icon_login_left_lock@3x.png"></image></view>
<view class='item input'><input placeholder='请输入密码' password='true'></input></view>
</view><!--inputBox-->
<view class='thisbtn' bindtap='gowork'>员工登录</view>
</view>
<image mode='widthFix' src='../../image/pho_login_bottom@3x.png' class='loginbg'></image>
|
二、wxss样式文件代码如下：
/* pages/login/login.wxss */
.login{
position: relative;
z-index: 11;
}
.loginbg{
position: absolute;
bottom: 0;
z-index: 1;
width: 100%;
}
|
三、js页面代码如下：
// pages/login/login.js
Page({
/**
* 页面的初始数据
*/
data: {
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
},
gowork:function(){
wx.navigateTo({
url: '../work_list/work_list',
})
}
})
|
.jpg)
.jpg)
