正文

微信小程序文本編輯器

發(fā)布時(shí)間：2023-05-27 11:29:39 稿源：創(chuàng)意嶺閱讀： 126

大家好！今天讓創(chuàng)意嶺的小編來(lái)大家介紹下關(guān)于微信小程序文本編輯器的問(wèn)題，以下是小編對(duì)此問(wèn)題的歸納整理，讓我們一起來(lái)看看吧。

開(kāi)始之前先推薦一個(gè)非常厲害的Ai人工智能工具，一鍵生成原創(chuàng)文章、方案、文案、工作計(jì)劃、工作報(bào)告、論文、代碼、作文、做題和對(duì)話(huà)答疑等等

只需要輸入關(guān)鍵詞，就能返回你想要的內(nèi)容，有小程序、在線(xiàn)網(wǎng)頁(yè)版、PC客戶(hù)端和批量生成器

問(wèn)友Ai官網(wǎng)：https://ai.de1919.com。

本文目錄:

微信小程序顯示打字的叫什么

微信小程序文本編輯器

微信小程序顯示打字的叫什么

微信小程序自帶的API中的頁(yè)面交互功能，雖然提示功能非常全面，但是所有的交互API中是沒(méi)有可以自己在提示框中輸入文本的功能，那么現(xiàn)在我們來(lái)自己做這樣的一個(gè)提示框（可以帶有輸入功能），在提示框輸入完內(nèi)容之后，點(diǎn)擊確定，可以將文本內(nèi)容返回，點(diǎn)擊取消則可以回到之前的狀態(tài)。
（在這里，主頁(yè)面的布局可以根據(jù)每個(gè)人的想法來(lái)布局，這里展示的css之后展示提示框部分的）
1、首先打開(kāi)微信開(kāi)發(fā)者工具，建立一個(gè)代碼模板，那么我們這個(gè)提示框就是寫(xiě)在這個(gè)頁(yè)面上。
這里我們主頁(yè)面叫做index
2、在基本頁(yè)面中寫(xiě)上一個(gè)姓名的文本，當(dāng)前姓名用<text>{{stuName}}</text>表示，然后為一個(gè)button按鈕，再在js文件中，建立相應(yīng)的點(diǎn)擊事件以及stuName的信息。這樣，一個(gè)原始頁(yè)面就寫(xiě)好了。
下面我們開(kāi)始彈出框頁(yè)面的制作
<view class='toast-box' hidden='{{!ifName}}'>
<view class='toastbg'></view>
<view class='showToast'>
<view class='toast-title'>
<text>修改姓名</text>
</view>
<view class='toast-main'>
<view class='toast-input'>
<input placeholder='請(qǐng)輸入姓名' bindinput='setValue' data-name='stuEidtName'></input>
</view>
</view>
<view class='toast-button'>
<view class='button1'>
<button catchtap='cancel'>取消</button>
</view>
<view class='button2'>
<button catchtap='confirm'>確定</button>
</view>
</view>
</view>
</view>
3、我們可以發(fā)現(xiàn)，點(diǎn)擊按鈕后彈出輸入框，如果點(diǎn)擊除取消和確定之外的地方，是不會(huì)有反應(yīng)的。為了做到這個(gè)功能，我們用一個(gè)絕對(duì)位置的渲染層（toastbg），覆蓋住整個(gè)頁(yè)面，并且如果你的頁(yè)面長(zhǎng)度沒(méi)有滾動(dòng)的話(huà)，請(qǐng)輸入min—height：100vh，如果頁(yè)面發(fā)生滾動(dòng)，請(qǐng)把長(zhǎng)度控制在height：100%即可看到整個(gè)頁(yè)面都被覆蓋。并且這個(gè)覆蓋的頁(yè)面要表現(xiàn)為透明，opacity：0.2，即可
4、bindinput為寫(xiě)文本時(shí)所觸發(fā)的事件，data-name為文本數(shù)據(jù)所保存的地方，在js中我們可以把這個(gè)數(shù)據(jù)打印出來(lái)，會(huì)發(fā)現(xiàn)我們所輸入的文本信息。
以下為css的代碼
.toast-box {
width: 100%;
height: 100%;
opacity: 1;
position: fixed;
top: 0px;
left: 0px;
}

.toastbg {
opacity: 0.2;
background-color: black;
position: absolute;
width: 100%;
min-height: 100vh;
}

.showToast {
position: absolute;
opacity: 1;
width: 70%;
margin-left: 15%;
margin-top: 40%;
}

.toast-title {
padding-left: 5%;
background-color: #2196f3;
color: white;
padding-top: 2vh;
padding-bottom: 2vh;
border-top-right-radius: 16rpx;
border-top-left-radius: 16rpx;
}

.toast-main {
padding-top: 2vh;
padding-bottom: 2vh;
background-color: white;
text-align: center;
}

.toast-input {
margin-left: 5%;
margin-right: 5%;
border: 1px solid #ddd;
padding-left: 2vh;
padding-right: 2vh;
padding-top: 1vh;
padding-bottom: 1vh;
}

.toast-button {
display: flex;
}

.button1 {
width: 50%;
}

.button2 {
width: 50%;
}

.button1 button {
width: 100%;
background-color: white;
color: red;
border-radius: 0px;
border-bottom-left-radius: 16rpx;
}

.button2 button{
width: 100%;
background-color: white;
color: black;
border-radius: 0px;
border-bottom-right-radius: 16rpx;
}

.picker {
padding-top: 1vh;
padding-bottom: 1vh;
}
我們可以根據(jù)自己的喜歡，對(duì)提示框的樣式進(jìn)行改變
5、編寫(xiě)js代碼，我們需要實(shí)現(xiàn)以下一些基本功能（點(diǎn)擊出現(xiàn)彈窗，取消不改變數(shù)據(jù)值，確定進(jìn)行判斷數(shù)據(jù)值，若為空則不能改變，否則可以改變，并且主頁(yè)面上的內(nèi)容要變?yōu)橄鄳?yīng)改變后的內(nèi)容）
6、給最外層的彈窗附上hidden（如圖所示），為這個(gè)值初始為false，點(diǎn)擊按鈕后觸發(fā)事件，改false為true，這樣即可點(diǎn)擊出現(xiàn)彈窗。
7、為取消按鈕附上點(diǎn)擊事件，與hidden的部分剛好相反即可。
8、為書(shū)寫(xiě)文本綁定事件，上述代碼中命名為setValue，這個(gè)函數(shù)我們傳入一個(gè)event進(jìn)去，將其打印，我們可以發(fā)現(xiàn)在其的detail中有我們剛剛所書(shū)寫(xiě)的內(nèi)容，我們將這個(gè)值，傳給js中data一個(gè)屬性，這里我們命名為edit。
9、為確定綁定事件，用this.data.edit將這個(gè)值進(jìn)行判斷，若為空，我們用wx.showToast提示用戶(hù)信息沒(méi)有填寫(xiě)完整，并且頁(yè)面不會(huì)改變。若不為空，則我們setData一下我們的stuName為這個(gè)edit的值，并且重新把hidden的屬性值改為false。
10、返回到初始頁(yè)面我們就可以看到我們自己做得一個(gè)提示框，并且具有修改值的功能

微信小程序文本編輯器