小程序添加和删除新元素功能实例

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/hj960511/article/details/79864761

wxxml文件

<button type="primary" bindtap="addItemFn">添加</button>  
<button type="warn" bindtap="delItemFn" >删除</button>  
<scroll-view class="scroll">  
  <view class="classname"></view>  
  <block wx:for="{{lists}}" wx:key="*this">  
    <view class="item" data-index="{{index}}" >item {{index}}--{{item.text}}</view>  
  </block>  
</scroll-view>   

wxjs文件

//获取应用实例  
var app = getApp()
Page({
  data: {
    duration: 2000,
    indicatorDots: true,
    autoplay: true,
    interval: 3000,
    loading: false,
    plain: false
  },
  onLoad: function () {
    var that = this//不要漏了这句，很重要
    wx.request({
      url: '您的url地址',
      method: 'get',
      header: {
        'content-type': 'application/json' // 默认值
      },
      success: function (res) {
        //将获取到的json数据，存在名字叫zhihu的这个数组中
        that.setData({ lists: res.data })
      }
    })
  },
  //添加新元素 
  addItemFn: function () {
    var { lists } = this.data;
    var newData = { text: "新的元素" };
    lists.push(newData);
    this.setData({
      lists: lists
    })  
  }
  //删除新元素 
  delItemFn: function (e) {
    var { lists } = this.data;
    var num = e.currentTarget.dataset.index;//获取data-index
    lists.splice(num,1);
    this.setData({
      lists: lists
    })  
  }
})

wxcss文件

page{height: 100%;}  
.scroll{height:auto;}  
.item{ background: #ddd; margin: 10px 0; height: 40rpx;}  

注：微信小程序是通过数组来控制元素的新增和删除的。