微信小程序,组件增加删除 - 新闻资讯 - 云南小程序开发|云南软件开发|云南网站建设-昆明葵宇信息科技有限公司

159-8711-8523

云南网建设/小程序开发/软件开发

知识

不管是网站,软件还是小程序,都要直接或间接能为您产生价值,我们在追求其视觉表现的同时,更侧重于功能的便捷,营销的便利,运营的高效,让网站成为营销工具,让软件能切实提升企业内部管理水平和效率。优秀的程序为后期升级提供便捷的支持!

您当前位置>首页 » 新闻资讯 » 小程序相关 >

微信小程序,组件增加删除

发表时间:2020-9-24

发布人:葵宇科技

浏览次数:63

微信小程序,组件增加删除

使用this.data.obj.splice(x,1);时,虽然数组的值去掉了,但是页面是不会生效的,必须使用this.setData()来使页面刷新。

下面给出两种做法:
1、temp来搭桥,并重新赋值,使页面生效
2、直接设置

js

Page({
  data: {
    obj:[],
    obj1:['1111111','222222','333333']
},
/***增加组件 */
onTapAdd:function(e){
  var temp=this.data.obj;
  var temp1=this.data.obj1;
  temp.push(temp1[temp.length]);
  this.setData({
    obj:temp
  })
},
/***** 可以修改删除指定组件*/
onTapDel:function(e){

 //重点在这,必须搭桥,要定义一个新变量temp
  var temp = this.data.obj;
  //this.data.obj.splice(x,1);该做法虽然数组去掉了,但是页面是不会生效的
  temp.splice(temp.length,1);
  //重设即可生效
  this.setData({
    obj: temp
  })
  /**
  或者直接setData
  this.setData({
    obj: this.data.obj.splice(this.data.obj.length,1)
  })
  */
},
})

wxml

<!--example/deleteComponent/deleteComponent.wxml-->
<view>
   <button bindtap='onTapAdd'>添加input组件</button>
   <button bindtap='onTapDel'>删除Input组件</button>
   <view>
      <block wx:for="{{obj}}" wx:key="*this" >
          <text>{{item}}</text>
      </block>
    </view>
</view>

相关案例查看更多