全网整合营销服务商

营销型网站+SEO优化+关键词快排=一站式服务

免费咨询热线:15959292472

[宁波的seo服务公司]微信小程序如何动态添加内容

  

 

  微信小程序动态添加内容的方法:首先添加一个for◆▪,循环view;然后input绑定一个输入事件,并且获取装input的view块的索引;最后通过索引值来修改数组中的值即可=★▲▼。广汉市小程序开发哪家好[宁波的seo服务公司]

  

 

  微信小程序动态添加内容的方法:

  1. wx:for 循环view,添加一个▼-▼•,wx:for的内容就增加1个○▷●-,那么循环的内容是用数字来循环还是数组呢?

  2▪-☆. input是循环出来的,所以不可能给不同的input绑定不同的 bindInput 事件,那么只有绑定一个输入事件▲△=○,而且所有的值必须是一个数组的话,就必须要获取到装input的view块的索引▷◁☆,然后通过索引值来修改数组中的值。。东莞市小程序开发哪家好

  3. 删除的话,如果循环的内容是数字,那么就只有数字减一,最终删除的只有最后一个。那么循环的内容就只能是数组了△△◁。只要获取到当前需要删除的索引值,然后删除循环内容对应的值就完成了★▼☆。

  

 

  相关学习推荐◇◇○•:微信小程序开发教程

  

 

  先来看看效果:

  wxml□●☆▪:

  

<view class='add' bindtap='■▼;addInput'>增加</view>
<view class='box' wx:for='{{array}}' wx:key=''>
 <view class='del' bindtap='delInput' data-idx='{{index}}'>★…☆;删除</view>
 <input type='text' class='■•◇☆;b-ipt' placeholder='△▲★☆;请输入' data-idx='{{index}}'◇★=•; value='…▽▪;{{inputVal[index]}}'▼=…▷; bindinput='getInputVal'/>◁○; 
<△▽◆;/view>

 

  (1) 循环的array是一个数组

  (2) 删除和input都加了data-idx属性是因为都需要用到当前索引值。海安市小程序开发哪家好

  wxss:

  

.add{
 display: inline-block;
 line-height▲▼☆: 30px;
 padding: 0 12px;
 background: skyblue=▼;
}
▲◁.box{
 margin-top…○☆: 10px▼○•;
 clear▼●☆□: both;
 overflow: hidden;
 padding: 0 15px;
}
-◆.b-ipt{
 overflow: hidden;
 border: 1px solid #ccc;
}
.del{
 width: 40px;
 float: right▪•;
 margin-left▪▪◇: 10px;
}

 

  js:

  

data: {
 array:[0]•=●,//默认显示一个
 inputVal:[]//所有input的内容
},
//获取input的值
getInputVal:function(e){
 var nowIdx=e■▽◇◆.currentTarget★▷▷▽.dataset.idx;//获取当前索引
 var val=e•▲■▲.detail=…☆.value;//获取输入的值
 var oldVal=this.data●▽….inputVal;
 oldVal[nowIdx]=val-△;//修改对应索引值的内容
 this.setData({
 inputVal☆☆:oldVal
 })
},
//添加input
addInput◇□:function(){
 var old=this▲▷.data.array◁◇=;
 old◁●■★.push(1)★●◆;//这里不管push什么,只要数组长度增加1就行
 this.setData({
 array: old
 })
},
//删除input
delInput:function(e){
 var nowidx=e.currentTarget.dataset.idx◆▽-;//当前索引
 var oldInputVal=this.data.inputVal;//所有的input值
 var oldarr=this…-=.data.array◁▽;//循环内容
 oldarr.splice(nowidx▪○△●,1); //删除当前索引的内容□■▪,这样就能删除view了
 oldInputVal.splice(nowidx,1);//view删除了对应的input值也要删掉
 if (oldarr.length < 1) {
 oldarr = [0] //如果循环内容长度为0即删完了,必须要留一个默认的。这里oldarr只要是数组并且长度为1,里面的值随便是什么
 }
 this.setData({
 array▲△☆□:oldarr●○★◇,
 inputVal: oldInputVal
 })
}

 

   (1) array[0]表示最初需要循环一次★▪○…,因为wx:for是根据数组长度来循环的△△▲。array里面的内容随便写◇○▼,只要保证长度为1就行

  (2) 如果你担心input输入的时候每次都要去取索引值影响性能▲■▷▼,我建议你可以把获取input值的事件由 bindinput 改成 bindblur 。这样也没问题。28 2020.10 [厦门seo公司联系久澳]小程序用canvas绘制海报的做法 2020年第一篇文章,年初忙着复习刷题一直没空去写东西,书看的越多感觉越技不如人▼,始终徘徊在小菜鸡的行列中□■,最近项目里正好有一个canvas的业务,突然又燃起了我一个UI前

  

 

  相关学习推荐:编程视频

  

 

  以上就是微信小程序如何动态添加内容的详细内容,更多请关注久澳传媒编程栏目其它相关文章!

[宁波的seo服务公司]微信小程序如何动态添加内容

您的项目需求

*请认真填写需求信息,我们会在24小时内与您取得联系。