在之前的文章中,我们谈过用导入的方式实现搜索框(诺,这是这篇https://blog.csdn.net/qq_37704442/article/details/103500904),那篇文章实现搜索框的原理,就是使用了input组件,当然,今天要实现的输入框,虽然比搜索框要简单,但同样也是用input组件实现的,所以,介于input组件如此重要,我们有必要在开始之前认识一下input组件
input组件是微信小程序自带组件,不需要额外导入,就可以直接在wxml中使用,所以这里着重介绍input的常用属性,如果想看input组件的完整介绍可以查看微信官方文档(官方文档链接在此:https://developers.weixin.qq.com/miniprogram/dev/component/input.html),说回来,input的常用属性有五种,分别为type,bindinput,placeholder,confirm-type,bindconfirm,接下来分别介绍一下这五种属性。
一,type,决定input输入的类型。
二,bindinput,挂载触发事件,当键盘在input输入时触发
三,placeholder,input输入框为空时的占位符
四,confirm-type,设置键盘右下角按钮的文字,仅在type='text’时生效
五,bindconfirm,可挂载点击事件,当点击完成按钮时触发
以上就是input常用属性的介绍,接下来开始利用input组件和上面介绍的属性,实现一个简单的输入框。
首先在wxml上新建一个input,然后为了方便控制组件布局,所以用view包裹这个input,接着,新建一个button,这个button的主要作用就是用来提交input输入框内的值,然后稍微在wxss中设置一下组件样式,嗯,这样输入框的大概样子已经出来(代码如下)
wxml中的代码
<view class="Undreaming_Body">
<view class="container" >
<view class="search-body">
<input type="text" bindinput="Undreaming_ChangeSearchKey" placeholder="你梦到了什么" confirm-type="search" bindconfirm="Undreaming_Inquire" />
</view>
</view>
<button bindtap="Undreaming_Inquire">点击查询</button>
</view>
wxss中的代码
.search-body {
position: absolute;
width: 600rpx;
height: 76rpx;
margin: 0 auto;
line-height: 76rpx;
top: 30%;
left: 50%;
margin-left: -300rpx;
color: #888;
border: 1rpx solid #888;
border-radius: 40rpx;
/*border: 1px solid red;*/
}
.search-body input {
display: inline-block;
width: 500rpx;
height: 76rpx;
padding-left: 34rpx;
}
.search-body input::-webkit-input-placeholder {
color: #b2b2b2;
}
.search-body-icon {
position: absolute;
top: 50%;
right: 20rpx;
height: 76rpx;
margin-top: -30rpx;
line-height: 76rpx;
}
.search-body-icon image {
width: 38rpx;
height: 38rpx;
}
.Undreaming_Body{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.Undreaming_Body button{
width: 600rpx;
height: 76rpx;
border-radius: 70rpx;
background-color: #FF556A;
color: white;
}
输入框的效果图如下
然后,就是获取input输入的值,并完善好button的点击事件,关于如何获取input的值,这点可以通过 detail获取,确切点说, e.detail.value就是input输入框内的值,接下来,为了方便调用,我们可以在页面声明一个变量,来装载input输入框内的值,最后,把这个值放入button的点击事件内进行提交或者处理,这样的话,一个基础的输入框就完成了(代码如下,PS:关于这里代码,我个人还添加了一些功能,比如检查输入框内的值是否为空之类的)
js中的代码
// pages/Page_Undreaming/Page_Undreaming.js
const app=getApp()
Page({
/**
* 页面的初始数据
*/
data: {
TitleBar_Height_Component:app.globalData.TitleBar_Height,
searchKey:'',
Undreaming_Results:'',
},
Undreaming_Inquire()
{
if(this.Undreaming_CheckData())
{
console.log(this.data.searchKey);
this.Undreaming_GetData();
wx.showLoading({
title: '正在查询中',
mask: true
})
setTimeout(() => {
wx.hideLoading({
complete: (res) => {
this.Undreaming_Results_ShowModal();
},
})
}, 1000);
}
else{
console.log("输入框为空");
}
},
Undreaming_CheckData() {
const key = this.data.searchKey
if (key == '') {
wx.showModal({
content: '输入框不能为空',
contentColor:'#FF556A',
showCancel: false,
confirmText: '确定',
confirmColor: '#FF556A'
})
return false;
}
return true;
},
Undreaming_ChangeSearchKey(e) {
const val = e.detail.value
this.setData({
searchKey: val
})
},
Undreaming_GetData()
{
wx:wx.request({
url: 'http://v.juhe.cn/dream/query',
data:{
key:'4705f6c7303d8753788b53243715455d',
q:this.data.searchKey
},
header: {},
method: 'GET',
dataType: 'json',
responseType: 'text',
success:(res)=>{
console.log(res);
this.setData(
{
Undreaming_Results:res.data.result[0].des
}
)
console.log(this.data.Undreaming_Results);
},
})
},
Undreaming_Results_ShowModal()
{
wx.showModal({
content: this.data.Undreaming_Results,
contentColor:'#dbdbdb',
showCancel: false,
confirmText: '确定',
confirmColor: '#FF556A',
})
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})
最后实现的效果如下图