Effect:

Ps: Text blur and displacement will occur when the input is beyond the range of the input box when debugging on the computer (not affected on mobile phones)

index.wxml

<view class="container"> <import src="/template/addtell.wxml" /> <template is="addtell" data="{{... <button bindtap="footAddtell"> </button> </view>Copy the code

Import a template and the data where the template resides

<import src="/template/addtell.wxml" /> <template is="addtell" data="{{... addtell}}" />Copy the code

Importing template data… Rest parameters

ES6 introduces the REST parameter (of the form “… Variable name “), used to get extra arguments to the function

Refer to the applets official API



addtell.wxml

< Template name="addtell"> <view> <modal title=" Contact information "confirm-text=" confirm" cancel-text=" cancel "hidden="{{addtellHidden}}" bindconfirm="modalConfirm" bindcancel="modalCancel"> <label> <view class="tellsection"> <input class="tellinput" Bindinput ="saveUsertell" placeholder=" value="{{addtell.contract_info}}" /> <input class=" tellInput" Bindinput ="saveUsertell" placeholder=" Please input "value="{{addtell.contract_info}}" /> </view> </label> </modal> </view> </template>Copy the code

index.css

.tellinput {
  border: 1px solid #efeff4;
}

.tellsection input {
  color: #000;
  width: 100%;
}
Copy the code

index.js

Page({data: {addtell: {addtellHidden: true, // popup show/hide},}, footAddtell: Function () {this.setData({addtell: {addtellHidden: false, contract_info: ''}})}, modalConfirm: Function () {this.setData({20 addtell: {addtellHidden: true,}})}, modalCancel: Function () {this.setData({addtell: {addtellHidden: true,}})}, saveUsertell: Function (e) {this.setData({contract_info: e.daily. value, addtell: {addtellHidden: false,}})}})Copy the code