小程序使用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,
    });
  },
相关文章
|
JavaScript
Vue路由 replace属性 控制浏览记录不能前进或后退
Vue路由 replace属性 控制浏览记录不能前进或后退
|
前端开发
如何对ajax请求的后台数据添加到swiper轮播图并展示到页面
如何对ajax请求的后台数据添加到swiper轮播图并展示到页面
160 0
|
缓存
uniapp的mescroll-body组件与页面切换冲突.mescroll-body组件下拉异常,mescroll-body组件页面跳转回来后下滑屏幕直接触发了下拉刷新.
uniapp的mescroll-body组件与页面切换冲突.mescroll-body组件下拉异常,mescroll-body组件页面跳转回来后下滑屏幕直接触发了下拉刷新.
345 0
element ui 上传图片之后跳转、刷新、保存,预览和删除丢失问题
这问题困惑了我好久,在官方的element ui 的组件库中,直接拿来使用的话,只有当前显示效果,一旦刷新页面或者保存之后,就会丢失,预览和删除功能。当保存后,保存到后端接口,再次查看,图片是能渲染出来,但是由于保存页面刷新,随之整个上传过程失败,而查看所拿到的图片只是一张静态图片,要想再次预览和查看,需要重新选中上传
289 0
|
小程序
微信小程序setData赋值,数据未更新
微信小程序setData赋值,数据未更新
426 0
|
小程序
微信小程序setData如何动态修改数组?
微信小程序setData如何动态修改数组?
|
前端开发
使用SpringMvc跨服务器上传图片,Ajax异步刷新图片框显示图片功能请求不到后台,onChange事件没有激活的源码?
使用SpringMvc跨服务器上传图片,Ajax异步刷新图片框显示图片功能请求不到后台,onChange事件没有激活的源码?
111 0
使用SpringMvc跨服务器上传图片,Ajax异步刷新图片框显示图片功能请求不到后台,onChange事件没有激活的源码?
|
小程序
【mpvue】微信小程序调用switchTab重定向到页面,不会自动刷新,调用page.onLoad()方法没有效果
1、小程序效果演示 (1)点击添加基金按钮,跳转到添加基金的页面,目前该页面(pages/index/main)有两个基金。
678 0
【mpvue】微信小程序调用switchTab重定向到页面,不会自动刷新,调用page.onLoad()方法没有效果
|
前端开发
前端工作总结249-uni-关闭onshow的加载方法uni.hideLoading
前端工作总结249-uni-关闭onshow的加载方法uni.hideLoading
179 0
|
前端开发
前端工作总结257-uni-初始获取数据onload
前端工作总结257-uni-初始获取数据onload
90 0