小程序使用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,
    });
  },


相关文章
|
8月前
|
存储 JavaScript
JS中从a页面跳转到b页面,自动执行一次点击事件
JS中从a页面跳转到b页面,自动执行一次点击事件
|
8月前
|
JavaScript
原生JS修改html内容不影响绑定的点击事件 请认准insertAdjacentHTML、insertAdjacentText方法
原生JS修改html内容不影响绑定的点击事件 请认准insertAdjacentHTML、insertAdjacentText方法
原生JS修改html内容不影响绑定的点击事件 请认准insertAdjacentHTML、insertAdjacentText方法
|
JavaScript
Vue路由 replace属性 控制浏览记录不能前进或后退
Vue路由 replace属性 控制浏览记录不能前进或后退
|
缓存
uniapp的mescroll-body组件与页面切换冲突.mescroll-body组件下拉异常,mescroll-body组件页面跳转回来后下滑屏幕直接触发了下拉刷新.
uniapp的mescroll-body组件与页面切换冲突.mescroll-body组件下拉异常,mescroll-body组件页面跳转回来后下滑屏幕直接触发了下拉刷新.
324 0
element ui 上传图片之后跳转、刷新、保存,预览和删除丢失问题
这问题困惑了我好久,在官方的element ui 的组件库中,直接拿来使用的话,只有当前显示效果,一旦刷新页面或者保存之后,就会丢失,预览和删除功能。当保存后,保存到后端接口,再次查看,图片是能渲染出来,但是由于保存页面刷新,随之整个上传过程失败,而查看所拿到的图片只是一张静态图片,要想再次预览和查看,需要重新选中上传
276 0
|
小程序
微信小程序setData赋值,数据未更新
微信小程序setData赋值,数据未更新
405 0
|
小程序
微信小程序setData如何动态修改数组?
微信小程序setData如何动态修改数组?
|
Web App开发 JavaScript 前端开发
Javascript判断页面刷新或关闭的方法(转)
onbeforeunload与onunload事件 Onunload,onbeforeunload都是在刷新或关闭时调用,可以在脚本中通过window.onunload来指定或者在里指定。区别在于onbeforeunload在onunload之前执行,它还可以阻止onunload的执行。
2019 0
|
小程序
【mpvue】微信小程序调用switchTab重定向到页面,不会自动刷新,调用page.onLoad()方法没有效果
1、小程序效果演示 (1)点击添加基金按钮,跳转到添加基金的页面,目前该页面(pages/index/main)有两个基金。
676 0
【mpvue】微信小程序调用switchTab重定向到页面,不会自动刷新,调用page.onLoad()方法没有效果
|
前端开发
前端工作总结249-uni-关闭onshow的加载方法uni.hideLoading
前端工作总结249-uni-关闭onshow的加载方法uni.hideLoading
179 0