微信小程序使用input

柔光的暖阳◎ 2022-11-05 08:48 239阅读 0赞

html部分

<view class="item" wx:for="{ {setList}}" wx:key="index">
     <text class="label">{
       {item.label}}</text>
     <input data-label="{ {item.label}}" type="text" placeholder="{ {item.placeholder}}" placeholder-class="placeholder" value="{ {item.value}}" bindinput="inputchange" ></input>
    </view>

js部分

Page({ 
    	data: { 
    		setList: [
    			{ 
    				label: '支付宝账户',
    				value: '',
    				placeholder: '请填写支付宝账户/手机号'
    			},
    			{ 
    				label: '收款人姓名',
    				value: '',
    				placeholder: '请填写收款人姓名'
    			}
    		]
    	},
    	/** * 输入框改变 */
    	inputchange(e) { 
    		let label = e.target.dataset.label;
    		let value = e.detail.value;
    		switch (label) { 
    			case '支付宝账户':
    				this.setData({ 
    					['setList[0].value']: value
    				})
    				break;
    			case '收款人姓名':
    				this.setData({ 
    					['setList[1].value']: value
    				})
    				break;
    		}
    	}
    })

微信小程序中没有双向绑定这个概念，基础库从2.9.3开始支持简易的双向绑定，但还需要做兼容，我嫌麻烦就直接写原生了，不用官方给的双向绑定，有兴趣的可以自己去看：[简易双向绑定][Link 1]。

<table> 
 <thead> 
  <tr> 
   <th>属性</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>data-label</td> 
   <td>自定义属性</td> 
  </tr> 
  <tr> 
   <td>placeholder-class</td> 
   <td>指定 placeholder 的样式类</td> 
  </tr> 
  <tr> 
   <td>bindinput</td> 
   <td>键盘输入时触发，event.detail = {value, cursor, keyCode}，keyCode 为键值，2.1.0 起支持，处理函数可以直接 return 一个字符串，将替换输入框的内容。</td> 
  </tr> 
 </tbody> 
</table>

若是需要获取data的值

this.data.setList

> 参考文档：  
> [input | 微信开放文档][input _]

[Link 1]: https://developers.weixin.qq.com/miniprogram/dev/framework/view/two-way-bindings.html
[input _]: https://developers.weixin.qq.com/miniprogram/dev/component/input.html