微信小程序实现下拉刷新清空input输入内容
2017-08-07 17:33
627 查看
今天自己公司的小程序需要用到这个功能,然后就上网查了一下,结果真心不如人意,找的全是什么from表单的reset方法,但是这个方法我的理解是需要用一个按钮之类的去触发,所以不是我想要的。还有一种就是给input的value一个值然后刷新的时候setData,但是我的input全是一个for循环下来的,所以当时觉得别人的这个方法也还是不对。
不过,我仔细想了一下,还是采用了第二种方法,我们可以为每一个for里的input利用for循环的index编个号,这样就可以一一对应了,直接看代码:
<view class="dyj_price_show">
<text class="dyj_price_text">打印价格:</text>
<input class="dyj_price_input" id="{{item.configID}}_print" placeholder="{{item.dyPrice}}" type="digit" confirm-type="done" bindinput="changePrice" value="{{print[index]}}" />
<text class="dyj_price_text">元</text>
</view>
为每个for循环体力的input的value依据循环次数index设置一个Page中的data,即代码中的
this.setData({
copy: null,
print: null
})
input的bindinput代码:
changePrice: function (e) {
var meg = e.currentTarget.id;
if (meg == 'print') {
for (var i = 0; i < item.length; i++) {
var print = 'print['+i+']';
this.setData({
[print]: e.detail.value
});
break;
}
}
} else if (meg == 'copy') {
for (var i = 0; i < item.length; i++) {
if (item[i].configID == configID) {
var copy = 'copy['+i+']';
this.setData({
[copy]: e.detail.value
});
break;
}
}
}
全部都是部分代码
不过,我仔细想了一下,还是采用了第二种方法,我们可以为每一个for里的input利用for循环的index编个号,这样就可以一一对应了,直接看代码:
<view class="dyj_price_show">
<text class="dyj_price_text">打印价格:</text>
<input class="dyj_price_input" id="{{item.configID}}_print" placeholder="{{item.dyPrice}}" type="digit" confirm-type="done" bindinput="changePrice" value="{{print[index]}}" />
<text class="dyj_price_text">元</text>
</view>
为每个for循环体力的input的value依据循环次数index设置一个Page中的data,即代码中的
value="{{print[index]}}"然后在js文件中,下拉刷新代码中setData设置它们为空即可
this.setData({
copy: null,
print: null
})
input的bindinput代码:
changePrice: function (e) {
var meg = e.currentTarget.id;
if (meg == 'print') {
for (var i = 0; i < item.length; i++) {
var print = 'print['+i+']';
this.setData({
[print]: e.detail.value
});
break;
}
}
} else if (meg == 'copy') {
for (var i = 0; i < item.length; i++) {
if (item[i].configID == configID) {
var copy = 'copy['+i+']';
this.setData({
[copy]: e.detail.value
});
break;
}
}
}
全部都是部分代码
相关文章推荐
- 微信小程序 input输入及动态设置按钮的实现
- 1, 编写程序,当用户在文本框中输入内容之后,单机不同的按钮,能够把文半框中的内容粘贴到文本区中。“重置”按钮实现将文本框和文本区中的内容清空。界面上的文本区只能显示内容,不能让用户输入文本。运行结果
- 微信小程序 清空input内容
- 微信小程序中 input空间输入文字如何清空
- 微信小程序极简入门(三)--豆瓣电影小程序实现页首splash和内容横向滑动
- 微信小程序input框中加入小图标的实现方法
- 微信小程序新手教程之怎么实现下拉刷新
- 微信小程序基础之input输入框控件
- map循环中点击按钮实现清空Input输入框内容
- Input文本框随着输入内容多少自动延伸的实现
- js实现在编辑框input下根据输入内容显示匹配内容的下拉列表(一)
- 微信小程序 获得用户输入内容
- 微信小程序初体验-列表的上拉加载和下拉刷新的实现
- 微信小程序开发(十四)scroll-view实现下拉刷新上拉加载更多
- 微信小程序实现页面下拉刷新和上拉加载
- iOS开发进阶 - 实现类似微信和支付宝的密码输入框(UIKeyInput协议)
- 微信小程序下拉刷新和上拉加载的实现
- 微信小程序列表的上拉加载和下拉刷新的实现
- iOS开发进阶 - 实现类似微信和支付宝的密码输入框(UIKeyInput协议)
- 微信小程序input框内容被发出后清空