[微信小程序]使用input组件实现简单的输入框功能 |
您所在的位置：网站首页 › 微信输入特效怎么弄出来 › [微信小程序]使用input组件实现简单的输入框功能 |
[微信小程序]使用input组件实现简单的输入框功能
|
在之前的文章中，我们谈过用导入的方式实现搜索框（诺，这是这篇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中的代码 点击查询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; }输入框的效果图如下 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 () { } })最后实现的效果如下图 |
然后，就是获取input输入的值，并完善好button的点击事件，关于如何获取input的值，这点可以通过 detail获取，确切点说， e.detail.value就是input输入框内的值，接下来，为了方便调用，我们可以在页面声明一个变量，来装载input输入框内的值，最后，把这个值放入button的点击事件内进行提交或者处理，这样的话，一个基础的输入框就完成了（代码如下，PS：关于这里代码，我个人还添加了一些功能，比如检查输入框内的值是否为空之类的）
【本文地址】