本文给大家带来的是微信小程序简单的搜索手机号界面设计制作开发教程，制作好以后效果图如下：
一、wxml页面代码如下：
<!--pages/mine/enterInput.wxml-->
<view class="container">
<view class="hd-title font-color-999">{{pagetype=='name' ? '真实姓名' : '手机号'}}</view>
<view class="inputbox">
<input class="font-size-16" placeholder="请输入{{pagetype=='name' ? '真实姓名' : '手机号'}}" type="{{pagetype=='name' ? 'text' : 'number'}}" bindinput="inputValue" placeholder-class="font-color-ccc font-size-16 font-family-default" value="{{pagetype=='name' ? name : phone}}" auto-focus/>
</view>
<view class="butbox" style="margin:40rpx auto; ">
<view bindtap="backWind" class="but bg-color-c24e4e font-color-white">保存并返回</view>
</view>
</view>
|
二、wxss样式文件代码如下：
/* pages/mine/enterInput.wxss */
.hd-title{
display:flex;
align-items: center;
height: 90rpx;
padding:0 30rpx;
}
.inputbox{
display: flex;
height: 110rpx;
align-items: center;
background-color: #ffffff;
padding:0 30rpx;
}
|
三、js页面代码如下：
// pages/mine/enterInput.js
Page({
data:{
pagetype:'',
},
onLoad:function(options){
// 页面初始化 options为页面跳转所带来的参数
let pagetype = options.type=='name' ? 'name' : 'phone';
let title= options.type=='name' ? '编辑真实姓名' : '修改手机号';
let phone= options.phone ||'';
let name = options.name || '';
wx.setNavigationBarTitle({
title: title
})
this.setData({
pagetype:pagetype,
phone:phone,
name:name
})
},
inputValue(e){
if(this.data.pagetype=='name'){
this.setData({
'name':e.detail.value
})
}else{
this.setData({
'phone':e.detail.value
})
}
},
backWind(){
//获改变的值
let changedata= this.data.pagetype=='name' ? {name:this.data.name} : {phone:this.data.phone}
//保存并且刷新 获得当前页面的栈
let pages=getCurrentPages();
//判断当前栈的长度是否大于一 否则不能返回 (第一个栈为首页 最后一个栈为当前页)
if(pages.length>1){
//上一个页面实例对象
let prePage = pages[pages.length - 2];
//调用上一个页面的方法 changeData()
prePage.changeData(changedata);
}
wx.navigateBack();
},
onReady:function(){
// 页面渲染完成
},
onShow:function(){
// 页面显示
},
onHide:function(){
// 页面隐藏
},
onUnload:function(){
// 页面关闭
}
})
|
.jpg)
.jpg)
