小程序使用this.setData()来做删除无刷新

简介: 小程序使用this.setData()来做删除无刷新

我们在pc端做污无刷新可以使用ajax来做,但是小程序没有这个功能。那么下来介绍另一种方法


首先在data里边声明一个photos_url


在获取数据的时候,将数据直接保存在photos_url这个里边


在点击删除数据的时候,将数据的索引值传到js


循环判断,将点击得到的索引值跟全部数据的索引进行判断,不相等的全部存放到一个新的数组


最后重新赋值给photos_url即可


<view wx:for="{{photos_url}}" wx:for-index="index" class="mitem">
        <image class="img"  bindtap="delele" data-index="{{index}}" src="{{item}}"></image>
      </view>
delele: function (e) {
    console.log(e)
    var that = this;
    var index = e.target.dataset.index;
    var photos = that.data.photos;
    var photos_url = that.data.photos_url;
    var newphotos_url = [];
    for (var a in photos_url) {
      if (a != index) {
        newphotos_url.push(photos_url[a]);
      }
    }
    that.setData({
      photos_url: newphotos_url,
    });
  },


相关文章
|
前端开发 CDN
Nuxt.js 分页获取数据(及更新子组件数据、不刷新页面,异步请求追加数据)
Nuxt.js 分页获取数据(及更新子组件数据、不刷新页面,异步请求追加数据)
463 0
|
3月前
|
小程序 JavaScript 索引
|
存储 JavaScript
vue本地存储、获取自定义data-id、获取链接url参数、页面跳转返回、修改页面title
vue本地存储、获取自定义data-id、获取链接url参数、页面跳转返回、修改页面title
|
前端开发 Java
前端——HTML或者JSP页面--执行完某事件后刷新页面,重置表单,清空数据
前端——HTML或者JSP页面--执行完某事件后刷新页面,重置表单,清空数据
element ui 上传图片之后跳转、刷新、保存,预览和删除丢失问题
这问题困惑了我好久,在官方的element ui 的组件库中,直接拿来使用的话,只有当前显示效果,一旦刷新页面或者保存之后,就会丢失,预览和删除功能。当保存后,保存到后端接口,再次查看,图片是能渲染出来,但是由于保存页面刷新,随之整个上传过程失败,而查看所拿到的图片只是一张静态图片,要想再次预览和查看,需要重新选中上传
234 0
|
小程序
微信小程序setData赋值,数据未更新
微信小程序setData赋值,数据未更新
355 0
|
前端开发
前端alert之后,点击确定,进行页面刷新
前端alert之后,点击确定,进行页面刷新
265 0
|
前端开发
【前端异常】html页面中的button按钮会自动提交form表单的问题以及解决方案
有时候我们可能需要在表单中放置多个按钮,比如表单页面常见的按钮有创建和取消。点击创建按钮会触发单击响应事件,在单击响应事件中进行提交表单,这没有任何问题。点击取消按钮的时候,触发对应的单击响应事件,这个单击响应事件中主要处理关闭表单页面逻辑,所以会关闭页面,这也正常。但是!打开控制台监听请求会发现,它也会提交表单。
643 0
【前端异常】html页面中的button按钮会自动提交form表单的问题以及解决方案
|
前端开发 数据库
Select下拉框使用ajax异步绑定数据
Select下拉框使用ajax异步绑定数据
170 0
Select下拉框使用ajax异步绑定数据
|
小程序
【mpvue】微信小程序调用switchTab重定向到页面,不会自动刷新,调用page.onLoad()方法没有效果
1、小程序效果演示 (1)点击添加基金按钮,跳转到添加基金的页面,目前该页面(pages/index/main)有两个基金。
662 0
【mpvue】微信小程序调用switchTab重定向到页面,不会自动刷新,调用page.onLoad()方法没有效果