微信小程序使用vantweapp的search搜索组件时
bind:change获取输入的值
然后用bind:search搜索,
但是获取的值有时与搜索框中的值不一致(通过打印日志的方式得出的结论)
于是想到了是不是异步传值导致获取的值不一致,因为是绑定的两个事件,所有采用延时执行(一种解决办法)取值,可以避坑
解决办法:
wxml代码:
<van-search
value="{{ search }}"
placeholder="请输入搜索条形码或关键词"
use-action-slot
bind:change="onChange"
bind:search="onSearch"
></van-search>
JavaScript代码:
Page({
data: {
search:"",//搜索值
},
/*监听搜索输入框的值*/
onChange(event){
console.log(event.detail)
this.setData({
search:event.detail
})
},
/*输入框搜索商品*/
onSearch(){
var that = this;
//延时执行,防止获取输入框值不对应
setTimeout(function(){
/*振动提示*/
wx.vibrateShort();
console.log(that.data.search)
},1000)
},
})
app.json代码:
"usingComponents": {
"van-search": "@vant/weapp/search/index"
}