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

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;}

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

小程序添加和删除新元素功能实例相关推荐

php 微信创建客服,小程序添加在线客服功能
小程序添加客服功能 (学习视频分享:编程视频) 一.需要在小程序中加入一个客服消息按钮小程序接入微信「客服消息」功能模块,开发者只需要调用按钮,触发微信的客服消息功能即可,不需要自行在小程序中实现. ...
小程序客服功能php后端文档,小程序添加在线客服功能
小程序添加客服功能 (学习视频分享:编程视频) 一.需要在小程序中加入一个客服消息按钮小程序接入微信「客服消息」功能模块,开发者只需要调用按钮,触发微信的客服消息功能即可,不需要自行在小程序中实现. ...
uni-app 小程序添加联系客服功能
小程序添加联系客服 0. 写在前面: 1. 开通小6客服 2. 添加客服入口 3. 避免入坑 4. 联系客服如下很多小程序,为了更好的服务用户.收到反馈之类的,一般都有联系客服的功能.那么,该如何实 ...
微信小程序添加、删除class’
终于等到公司开发小程序了,学习的时候不觉得有什么,实际开发就会出现各种问题. 今天第一天开发就遇到问题了. 项目需求,要一个平时的nav导航栏,这玩意用jQuery两行代码解决了,可是小程序不允许操作 ...
使用php自动将文章标题或内容进行分词，添加和删除标签功能实例！
功能:做文章的自动分词添加标签功能插件:PHPAnalysis分词插件点击下载兼容:thinkphp laravel yii 原生及常用框架下面讲述一下开发流程: 步骤1:下载文件后将插件文件 ...
添加图标_图标变化、小程序添加到桌面...微信电脑版这些功能更新！
乐清资讯全掌握! 打开"看乐清"微信公众号,点击右上角"-", 设为星标即可~ 全文字数:444 阅读时间:约2分钟微信PC版更新啦!新版本有很多变化可以在通 ...
微信小程序添加全景实例
微信小程序添加全景实例你好! 也许这是你第一次想在小程序添加全景,也有可能不是第一次.但是本Girl 添加全景有着很深的印象,特意用文章记录下来,方便自己记住,下面就来了解本Girl添加全景的惨痛经 ...
微信小程序实现即时通信聊天功能的实例代码
项目背景:小程序中实现实时聊天功能一.服务器域名配置配置流程配置参考URL:https://developers.weixin.qq.com/miniprogram/dev/api/api-ne ...
微信小程序添加搜索功能
小程序添加搜索功能

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

小程序添加和删除新元素功能实例相关推荐

最新文章

热门文章