微信小程式自定義欄位實現選項的動態新增和刪除
阿新 • • 發佈：2018-11-11
問題描述：
在自定義選項中，點選新增選項按鈕，會出現一個選項的輸入框，輸入的選項可以通過點選左側的減號刪除
效果如圖：
解決過程：
1.首先寫出大體的框架。在pages下，建立了一個selfdefine的資料夾，在wxml中寫出靜態結構
selfdefine.wxml
說明：
optionsList是一個數組，陣列是由物件組成的，物件包含一個msg的屬性，用來繫結使用者輸入的選項的資訊，類似：
selfdefine.js
點選新增選項之後，會觸發addOption函式，這時候獲取到data中的optionsList，給它增加一個物件，設定msg為空字串
生成選項的框出現後，在輸入選項的框中輸入文字之後，通過bindinput繫結的option_con函式將填寫的內容繫結到對應的msg中
e.currentTarget.dataset.id是獲取填寫的選項對應的optionsList的下標
e.detail.value是獲取到的填寫的選項的內容
當我們增加了若干個選項之後，若想刪除其中某一個選項，在刪除的時候需要知道刪除的是哪一個，因為bindtap繫結函式時不能傳入引數，因此可以給刪除圖片繫結一個id，這個id是optionsList迴圈時的下標，即wxml中的data-id="{{index}}"，點選時觸發deleteOption函式
