更新日期：2018-11-5
微信bug： 在for循環中使用組件時，遮罩層成黑層.
更新時間 2018-9-30
2018-9-30 1.在電腦上調試input超出輸入框范圍會出現文字模糊以及位移現象（手機端不影響）
index.wxml
1 <view class="container">
2 <import src="/template/addtell.wxml" />
3 <template is="addtell" data="{{...addtell}}" />
4 <button bindtap="footAddtell">點擊輸入彈出內容</button>
5 </view>
導入模板和引入模板所在的數據
1 <import src="/template/addtell.wxml" />
2 <template is="addtell" data="{{...addtell}}" />
引入模板數據 ... rest參數
ES6引入了rest參數(形式為"...變量名")，用於獲取函數的多余參數
addtell.wxml
1 <template name="addtell">
2 <view>
3 <modal title="聯系方式" confirm-text="確認" cancel-text="取消" hidden="{{addtellHidden}}" bindconfirm="modalConfirm" bindcancel="modalCancel">
4 <label>
5 <view class="tellsection">
6 <input class="tellinput" bindinput="saveUsertell" placeholder="請輸入QQ" value="{{addtell.contract_info}}" />
7 <input class="tellinput" bindinput="saveUsertell" placeholder="請輸入微信號" value="{{addtell.contract_info}}" />
8 </view>
9 </label>
10 </modal>
11 </view>
12 </template>
index.css
1 .tellinput { 2 border: 1px solid #efeff4; 3 } 4
5 .tellsection input { 6 color: #000; 7 width: 100%; 8 }
index.js
1 Page({ 2 data: { 3 addtell: { 4 addtellHidden: true, //彈出框顯示/隱藏
5 }, 6 }, 7 footAddtell: function() { 8 //打開彈出框
9 this.setData({ 10 addtell: { 11 addtellHidden: false, 12 contract_info: ''
13 } 14 }) 15 }, 16 modalConfirm: function() { 17 //彈出框確認操作
18 this.setData({ 19 20 addtell: { 21 addtellHidden: true, 22 } 23 }) 24 }, 25 modalCancel: function() { 26 //彈出框取消操作
27 this.setData({ 28 addtell: { 29 addtellHidden: true, 30 } 31 }) 32 }, 33 saveUsertell: function(e) { 34 //保存input框的值
35 this.setData({ 36 contract_info: e.detail.value, 37 addtell: { 38 addtellHidden: false, 39 } 40 }) 41 } 42 })