微信小程序?qū)崿F(xiàn)彈出輸入框代碼實(shí)例
更新時(shí)間：2023年09月08日 08:51:59 作者：雯0609~
最近在寫(xiě)一個(gè)微信小程序,有一個(gè)需求是點(diǎn)擊一個(gè)按鈕后,出現(xiàn)一個(gè)輸入框,然后根據(jù)用戶的輸入再進(jìn)行操作,所以這篇文章主要給大家介紹了關(guān)于微信小程序?qū)崿F(xiàn)彈出輸入框的相關(guān)資料,需要的朋友可以參考下
1.微信自帶組件
樣式：
wxml
<view class="close" bindtap="close">拒絕</view>
js
Page({
//拒絕
close(e) {
wx.showModal({
editable:true,//顯示輸入框
placeholderText:'輸入拒絕原因',//顯示輸入框提示信息
success: res => {
if (res.confirm) { //點(diǎn)擊了確認(rèn)
console.log(res.content)//用戶輸入的值
} else {
console.log('用戶點(diǎn)擊了取消')
}
}
})
},
})詳見(jiàn)：wx.showModal(Object object) | 微信開(kāi)放文檔
2.自定義組件
樣式：
wxml
<view class="close" bindtap="close">拒絕</view><!--點(diǎn)擊拒絕彈出-->
<block wx:if="{{isShowConfirm}}">
<view class='toast-box'>
<view class='toastbg'></view>
<view class='showToast'>
<view class='toast-main'>
<view class='toast-input'>
<input type='text' bindinput='setValue' placeholder="請(qǐng)輸入拒絕原因" data-name='stuEidtName'></input>
</view>
</view>
<view class='toast-button'>
<view class='button1'>
<view catchtap='cancel'>取消</view>
</view>
<view class='button2'>
<view catchtap='confirmAcceptance'>確定</view>
</view>
</view>
</view>
</view>
</block>wxss
/* 彈出窗 */
.toast-box {
width: 100%;
height: 100%;
opacity: 1;
position: fixed;
top: 0px;
left: 0px;
}
.toastbg {
opacity: 0.5;
background-color: black;
position: absolute;
width: 100%;
min-height: 100vh;
}
.showToast {
position: absolute;
opacity: 1;
width: 80%;
margin-left: 10%;
margin-top: 70%;
}
.toast-main {
padding-top: 2vh;
padding-bottom: 2vh;
background-color: white;
text-align: center;
border-top-left-radius: 16rpx;
border-top-right-radius: 16rpx;
}
.toast-input {
margin-left: 5%;
margin-right: 5%;
margin-top:10%;
margin-bottom:10%;
background-color: rgb(240, 240, 240);
padding-left: 2vh;
padding-right: 2vh;
padding-top: 1vh;
padding-bottom: 1vh;
}
.toast-input input{
background-color: rgb(240, 240, 240);
}
.toast-button {
display: flex;
background-color: white;
height:50px;
width:100%;
border-radius: 0px;
border-bottom-left-radius: 16rpx;
border-bottom-right-radius: 16rpx;
border-top:1px solid rgb(211, 211, 211);
}
.button1 {
width: 50%;
display: flex;
align-items: center;
justify-content: center;
border-radius: 0px;
border-bottom-left-radius: 16rpx;
}
.button2 {
width: 50%;
border-left:1px solid rgb(211, 211, 211);
display: flex;
align-items: center;
justify-content: center;
color:#40A4D6;
}js
Page({
data: {
isShowConfirm:false
},
//輸入框中的值
setValue: function (e) {
this.setData({
walletPsd: e.detail.value
})
},
//點(diǎn)擊取消按鈕
cancel: function () {
var that = this
that.setData({
isShowConfirm: false,
})
},
//點(diǎn)擊確認(rèn)按鈕
confirmAcceptance:function(){
var that = this
that.setData({
isShowConfirm: false,
})
},
//拒絕
close(e) {
this.setData({
isShowConfirm: true,
})
},
})3.多文本框
樣式：
wxml
<view class="update" bindtap="update" data-statu="open">修改</view>
<!--彈出框-->
<view class="drawer_screen" bindtap="update" data-statu="close" wx:if="{{showModalStatus}}"></view>
<!--content-->
<!--使用animation屬性指定需要執(zhí)行的動(dòng)畫(huà)-->
<view class="animation_position">
<view animation="{{animationData}}" class="drawer_box" wx:if="{{showModalStatus}}">
<!--drawer content-->
<view class="drawer_title">修改信息</view>
<view class="drawer_content">
<view class="grid">
<label class="title col-0">報(bào)修人員:</label>
<input class="input_base input_h30 col-1" bindblur="name" placeholder="請(qǐng)輸入報(bào)修人員姓名"></input>
</view>
<view class="grid">
<label class="title col-0">聯(lián)系電話:</label>
<input class="input_base input_h30 col-1" bindblur="phone" placeholder="請(qǐng)輸入報(bào)修人員電話"></input>
</view>
<view class="grid">
<label class="title col-0">維修產(chǎn)品:</label>
<input class="input_base input_h30 col-1" bindblur="product" placeholder="請(qǐng)輸入維修產(chǎn)品名稱"></input>
</view>
<view class="grid">
<label class="title col-0">故障類型:</label>
<input class="input_base input_h30 col-1" bindblur="type" placeholder="請(qǐng)輸入故障類型"></input>
</view>
<view class="bottom grid">
<label class="title col-0">故障地點(diǎn):</label>
<input class="input_base input_h30 col-1" bindblur="address" placeholder="請(qǐng)輸入地點(diǎn)"></input>
</view>
<view class="bottom grid">
<label class="title col-0">故障描述:</label>
<input class="input_base input_h30 col-1" bindblur="description" placeholder="請(qǐng)輸入故障描述"></input>
</view>
</view>
<view class="btn_ok" bindtap="update" data-statu="close">確定</view>
</view>
</view>wxss
/* 隱藏內(nèi)容樣式 */
/*mask*/
.drawer_screen {
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
z-index: 1000;
background: #000;
opacity: 0.5;
overflow: hidden;
}
/*content*/
.animation_position{
display: flex;
width:100%;
justify-content: center;
}
.drawer_box{
overflow: hidden;
position: fixed;
/* top:80px; */
bottom:90px;
z-index: 1001;
background: #FAFAFA;
border-radius: 3px;
width: 90%;
}
.drawer_title {
padding: 15px;
font: 20px "microsoft yahei";
text-align: center;
}
.drawer_content {
overflow-y: scroll;
/*超出父盒子高度可滾動(dòng)*/
}
.btn_ok {
margin-top:5%;
padding: 10px;
font: 20px "microsoft yahei";
text-align: center;
border-top: 1px solid #E8E8EA;
color: #40A4D6;
}
.bottom {
padding-bottom: 8px;
}
.title {
display: flex;
align-items: center;
justify-content: center;
width: 25%;
margin:5% 0 0 0;
border-bottom: 2rpx solid #ccc;
}
.input_base {
width:75%;
margin:5% 0 0 0;
padding-left:5%;
border-bottom: 2rpx solid #ccc;
}
input {
font: 15px "microsoft yahei";
background: #fff;
color: #000;
}
.grid {
display: flex;
margin:20px;
}js
const app = getApp()
let id = ''
let name = ''
let phone = ''
let product = ''
let type = ''
let address = ''
let description = ''
Page({
data: {
showModalStatus: false,
},
//信息修改
//獲取用戶輸入信息
name(event) { //獲取報(bào)修人員姓名
name = event.detail.value
console.log("name", name)
},
phone(event) { //獲取手機(jī)號(hào)
phone = event.detail.value
console.log("phone", phone)
},
product(event) { //維修產(chǎn)品
product = event.detail.value
console.log("produc", product)
},
type(event) { //故障類型
type = event.detail.value
console.log("type", type)
},
address(event) { //地址
address = event.detail.value
console.log("address", address)
},
description(event) { //描述
description = event.detail.value
console.log("description", description)
},
update: function (e) {
var currentStatu = e.currentTarget.dataset.statu;
this.util(currentStatu)
},
util: function (currentStatu) {
/* 動(dòng)畫(huà)部分 */
// 第1步：創(chuàng)建動(dòng)畫(huà)實(shí)例
var animation = wx.createAnimation({
duration: 200, //動(dòng)畫(huà)時(shí)長(zhǎng)
timingFunction: "linear", //線性
delay: 0 //0則不延遲
});
// 第2步：這個(gè)動(dòng)畫(huà)實(shí)例賦給當(dāng)前的動(dòng)畫(huà)實(shí)例
this.animation = animation;
// 第3步：執(zhí)行第一組動(dòng)畫(huà)
animation.opacity(0).rotateX(-100).step();
// 第4步：導(dǎo)出動(dòng)畫(huà)對(duì)象賦給數(shù)據(jù)對(duì)象儲(chǔ)存
this.setData({
animationData: animation.export()
})
// 第5步：設(shè)置定時(shí)器到指定時(shí)候后，執(zhí)行第二組動(dòng)畫(huà)
setTimeout(function () {
// 執(zhí)行第二組動(dòng)畫(huà)
animation.opacity(1).rotateX(0).step();
// 給數(shù)據(jù)對(duì)象儲(chǔ)存的第一組動(dòng)畫(huà)，更替為執(zhí)行完第二組動(dòng)畫(huà)的動(dòng)畫(huà)對(duì)象
this.setData({
animationData: animation
})
//關(guān)閉
if (currentStatu == "close") {
this.setData({
showModalStatus: false
});
}
}.bind(this), 200)
// 顯示
if (currentStatu == "open") {
this.setData({
showModalStatus: true
});
}
},
})總結(jié)
到此這篇關(guān)于微信小程序?qū)崿F(xiàn)彈出輸入框的文章就介紹到這了,更多相關(guān)小程序彈出輸入框內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
Javascript Ajax異步讀取RSS文檔具體實(shí)現(xiàn)
這篇文章主要介紹了Javascript Ajax異步讀取RSS文檔具體實(shí)現(xiàn)，有需要的朋友可以參考一下2013-12-12
這篇文章主要介紹了js實(shí)現(xiàn)飛入星星特效代碼,主要通過(guò)控制背景與飛入點(diǎn)的樣式,結(jié)合setTimeout函數(shù)即可實(shí)現(xiàn)星星飛入的效果,對(duì)于學(xué)習(xí)javascript有不錯(cuò)的參考借鑒價(jià)值,需要的朋友可以參考下2014-10-10
JS實(shí)現(xiàn)點(diǎn)餐自動(dòng)選擇框(案例分析)
這篇文章主要介紹了JS實(shí)現(xiàn)點(diǎn)餐自動(dòng)選擇框功能，點(diǎn)擊上方全選和全不選選擇框?qū)崿F(xiàn)對(duì)應(yīng)功能，本文分步驟通過(guò)實(shí)例代碼講解的非常詳細(xì)，需要的朋友可以參考下2019-12-12
javascript設(shè)計(jì)模式Constructor（構(gòu)造器）模式
這篇文章主要為大家詳細(xì)介紹了javascript設(shè)計(jì)模式Constructor（構(gòu)造器）模式 ，感興趣的小伙伴們可以參考一下2016-08-08
來(lái)自騰訊的一個(gè)不固定高度得消息的滾動(dòng)特效
8月最后1天，趕緊補(bǔ)篇博客。貼個(gè)最近看到的騰訊的特效，寫(xiě)的還可以。先看效果。2010-09-09
JS高級(jí)調(diào)試技巧：捕獲和分析 JavaScript Error詳解
前端工程師都知道 JavaScript 有基本的異常處理能力。我們可以 throw new Error()，瀏覽器也會(huì)在我們調(diào)用 API 出錯(cuò)時(shí)拋出異常。但估計(jì)絕大多數(shù)前端工程師都沒(méi)考慮過(guò)收集這些異常信息2014-03-03
聊聊Javascript中try catch的2個(gè)作用
try...catch 可以測(cè)試代碼中的錯(cuò)誤,try 部分包含需要運(yùn)行的代碼,而catch部分包含錯(cuò)誤發(fā)生時(shí)運(yùn)行的代碼,這篇文章主要給大家介紹了關(guān)于Javascript中try catch的2個(gè)作用,需要的朋友可以參考下2021-09-09
bootstrap 模態(tài)框（modal）實(shí)現(xiàn)水平垂直居中顯示
這篇文章主要為大家詳細(xì)介紹了bootstrap 模態(tài)框modal實(shí)現(xiàn)水平垂直居中顯示，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-01-01
js實(shí)現(xiàn)HashTable(哈希表)的實(shí)例分析
本文詳細(xì)介紹javascript哈希表的實(shí)例分析及用法。下面就跟小編一起來(lái)學(xué)習(xí)下吧2016-11-11
本篇文章主要介紹了Bootstrap筆記—折疊實(shí)例代碼，詳細(xì)的介紹了折疊效果實(shí)例，包括一組多組等，非常具有實(shí)用價(jià)值，需要的朋友可以參考下。2017-03-03