微信小程序彈窗輸入組件的實現解析

更新時間：2019年08月12日 11:47:46 作者：kevie

這篇文章主要介紹了微信小程序彈窗輸入組件的實現解析,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下

寫項目的時候發(fā)現小程序沒有自帶的彈窗輸入的組件，只能自己寫一個。

1.半透明的遮蓋層

遮蓋層的樣式和顯隱事件

wxml代碼：

<view class="body">
 <button bindtap='eject'>彈窗</button>
</view>
<view class="model" catchtouchmove='preventTouchMove' wx:if='{{showModal}}'></view>

wxss代碼：

.model{
 position: absolute;
 width: 100%;
 height: 100%;
 background: #000;
 z-index: 999;
 opacity: 0.5;
 top: 0;
 left:0;
}

js代碼：

 /**
  * 頁面的初始數據
  */
 data: {
  showModal: false,
 },
 /**
  * 控制遮蓋層的顯示
  */
 eject:function(){
  this.setData({
   showModal:true
  })
 }

2.彈窗窗口實現

彈窗窗口的樣式和顯隱事件

wxml代碼：

<view class="modalDlg" catchtouchmove='preventTouchMove' wx:if='{{showModal}}'>
 <view class='windowRow'>
  <text class='userTitle'>標題
 </text>
  <view class='back' bindtap='back'>
   返回
  </view>
 </view>
 <view class='wishName'>
  <input bindinput='wish_put' placeholder='請輸入內容' class='wish_put'></input>
 </view>
 <view class='wishbnt'>
  <button class='wishbnt_bt' bindtap='ok'>確定</button>
 </view>
</view>

wxss代碼：

.modalDlg{
 width: 70%;
 position: fixed;
 top:350rpx;
 left: 0;
 right: 0;
 z-index: 9999;
 margin: 0 auto;
 background-color: #fff;
 border-radius: 10rpx;
 display: flex;
 flex-direction: column;
 align-items: center;
}
.windowRow{
 display: flex;
 flex-direction: row;
 justify-content: space-between;
 height: 110rpx;
 width: 100%;
}
.back{
 text-align: center;
 color: #f7a6a2;
 font-size: 30rpx;
 margin: 30rpx;
}
.userTitle{
 font-size: 30rpx;
 color: #666;
 margin: 30rpx;
}
.wishName{
 width: 100%;
 justify-content: center;
 flex-direction: row;
 display: flex;
 margin-bottom: 30rpx;
}
.wish_put{
 width: 80%;
 border: 1px solid;
 border-radius: 10rpx;
 padding-left: 10rpx;
}
.wishbnt{
 width: 100%;
 font-size: 30rpx;
 margin-bottom: 30rpx;
}
.wishbnt_bt{
 width: 50%;
 background-color: #f7a6a2;
 color: #fbf1e8;
 font-size: 30rpx;
 border: 0;
}

js代碼：

/**
  * 頁面的初始數據
  */
 data: {
  showModal: false,
  textV:''
 },
 /**
  * 控制顯示
  */
 eject:function(){
  this.setData({
   showModal:true
  })
 },
 /**
  * 點擊返回按鈕隱藏
  */
 back:function(){
  this.setData({
   showModal:false
  })
 },
 /**
  * 獲取input輸入值
  */
 wish_put:function(e){
  this.setData({
   textV:e.detail.value
  })
 },
 /**
  * 點擊確定按鈕獲取input值并且關閉彈窗
  */
 ok:function(){
  console.log(this.data.textV)
  this.setData({
   showModal:false
  })
 }

3.完整代碼

最后獻上完整代碼，有點啰嗦了，想盡量詳細點

wxml代碼：

<view class="body">
 <button bindtap='eject'>彈窗</button>
</view>
<view class="model" catchtouchmove='preventTouchMove' wx:if='{{showModal}}'></view>
<view class="modalDlg" catchtouchmove='preventTouchMove' wx:if='{{showModal}}'>
 <view class='windowRow'>
  <text class='userTitle'>標題
 </text>
  <view class='back' bindtap='back'>
   返回
  </view>
 </view>
 <view class='wishName'>
  <input bindinput='wish_put' placeholder='請輸入內容' class='wish_put'></input>
 </view>
 <view class='wishbnt'>
  <button class='wishbnt_bt' bindtap='ok'>確定</button>
 </view>
</view>

wxss代碼：

.body{
 width: 100%;
 height: 100%;
 background-color: #fff;
 position: fixed;
 display: flex;
}
.body button{
 height: 100rpx;
}
.model{
 position: absolute;
 width: 100%;
 height: 100%;
 background: #000;
 z-index: 999;
 opacity: 0.5;
 top: 0;
 left:0;
}
.modalDlg{
 width: 70%;
 position: fixed;
 top:350rpx;
 left: 0;
 right: 0;
 z-index: 9999;
 margin: 0 auto;
 background-color: #fff;
 border-radius: 10rpx;
 display: flex;
 flex-direction: column;
 align-items: center;
}
.windowRow{
 display: flex;
 flex-direction: row;
 justify-content: space-between;
 height: 110rpx;
 width: 100%;
}
.back{
 text-align: center;
 color: #f7a6a2;
 font-size: 30rpx;
 margin: 30rpx;
}
.userTitle{
 font-size: 30rpx;
 color: #666;
 margin: 30rpx;
}
.wishName{
 width: 100%;
 justify-content: center;
 flex-direction: row;
 display: flex;
 margin-bottom: 30rpx;
}
.wish_put{
 width: 80%;
 border: 1px solid;
 border-radius: 10rpx;
 padding-left: 10rpx;
}
.wishbnt{
 width: 100%;
 font-size: 30rpx;
 margin-bottom: 30rpx;
}
.wishbnt_bt{
 width: 50%;
 background-color: #f7a6a2;
 color: #fbf1e8;
 font-size: 30rpx;
 border: 0;
}

js代碼：

Page({
 /**
  * 頁面的初始數據
  */
 data: {
  showModal: false,
  textV:''
 },
 /**
  * 控制顯示
  */
 eject:function(){
  this.setData({
   showModal:true
  })
 },
 /**
  * 點擊返回按鈕隱藏
  */
 back:function(){
  this.setData({
   showModal:false
  })
 },
 /**
  * 獲取input輸入值
  */
 wish_put:function(e){
  this.setData({
   textV:e.detail.value
  })
 },
 /**
  * 點擊確定按鈕獲取input值并且關閉彈窗
  */
 ok:function(){
  console.log(this.data.textV)
  this.setData({
   showModal:false
  })
 }
})

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

Javascript數組的?splice?方法詳細介紹
這篇文章主要介紹了Javascript數組的splice方法詳細介紹，splice方法通過刪除或替換現有元素或者原地添加新的元素來修改數組,并以數組形式返回被修改的內容。此方法會改變原數組
2022-09-09
JavaScript利用鍵盤碼控制div移動
這篇文章主要為大家詳細介紹了JavaScript利用鍵盤碼控制div移動，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2020-03-03
JavaScript中常見的高階函數總結
JavaScript的函數其實都指向某個變量,既然變量可以指向函數,函數的參數能接收變量,那么一個函數就可以接收另一個函數作為參數,這種函數就稱之為高階函數,這篇文章主要給大家介紹了關于JavaScript中常見的高階函數,需要的朋友可以參考下
2022-02-02
bootstrap是什么_動力節(jié)點Java學院整理
這篇文章主要介紹了bootstrap是什么，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2017-07-07
JS中進行字符串替換的方法
replace() 方法用于在字符串中用一些字符替換另一些字符，或替換一個與正則表達式匹配的子串，這篇文章主要介紹了js中進行字符串替換的方法,需要的朋友可以參考下
2024-01-01
js實現本地圖片文件拖拽效果
這篇文章主要為大家詳細介紹了js實現本地圖片文件拖拽效果，拖拽文件到指定位置，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2017-07-07
Bootstrap每天必學之標簽與徽章
Bootstrap每天必學之標簽與徽章，對Bootstrap標簽與徽章小編也了解的很少，希望通過這篇文章和大家更多的去學習Bootstrap標簽與徽章，從中得到收獲。
2015-11-11
比較新舊兩個數組值得增加和刪除的JS代碼
這篇文章介紹了比較新舊兩個數組值得增加和刪除的JS代碼，有需要的朋友可以參考一下
2013-10-10
使用 UniApp 實現小程序的微信登錄功能
這篇文章主要介紹了使用 UniApp 實現小程序的微信登錄功能，本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下
2020-06-06
不用確認即可打印的javascript代碼
不用確認即可打印的javascript代碼...
2007-10-10