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文件

//獲取應(yīng)用實例 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' // 默認(rèn)值},success: function (res) {//將獲取到的json數(shù)據(jù)，存在名字叫zhihu的這個數(shù)組中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;}

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

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。