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-indexlists.splice(num,1);this.setData({lists: lists}) } })

wxcss文件

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

注：微信小程序是通過數組來控制元素的新增和刪除的。

總結

以上是生活随笔為你收集整理的小程序添加和删除新元素功能实例的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。