【微信小程序】JS文件内数组循环(批量)更新方法 图片批量增删

这篇具有很好参考价值的文章主要介绍了【微信小程序】JS文件内数组循环(批量)更新方法 图片批量增删。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

学习微信小程序开发时遇到图片的批量增删问题,在分析了一些大佬的代码之后总结如下:

先定义一个临时数组承接已有的数组,进入循环用push来增加内容,或者用splice来删除内容,然后循环结束后,用setData把临时数组更新到原数组名下。

示例代码:


data: {
        imageList: [],
    },

    wx.chooseImage({
        sizeType: ['compressed'],
        sourceType: ['album', 'camera'],
        success: res => {
            // 获取上传图片的临时路径
            var tempFilePaths = res.tempFilePaths;
            // 定义一个承接已有数组内容的临时数组,此时是空
            var imageList = this.data.imageList;
            // 通过循环增加添加图片的临时路径
            for (var i = 0; i < tempFilePaths.length; i++) {
                imageList.push(tempFilePaths[i]);
            }
        }
        // 把临时数组更新到data中的imageList
        this.setData({
            imageList: imageList,
        })

        // 也可以删除临时数组中的内容
        imageList.splice(2, 1) // array.splice(index,howmany,item1,.....,itemX) index是处理的位置,howmany是删除的元素量,后面是要添加的新元素
        this.setData({
            imageList: imageList,
        })
    })

日拱一卒 功不唐捐~文章来源地址https://www.toymoban.com/news/detail-529211.html

到了这里,关于【微信小程序】JS文件内数组循环(批量)更新方法 图片批量增删的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 【微信小程序】在WXML文件中显示JS文件中全局变量

    我们知道在wxml中可以通过数据绑定的方法来获取到js文件中data里面的数据,并且显示到wxml界面,那么我们该如何在wxml中显示js文件里面的全局变量呢? 在wxml种我们可以显示js代码中data代码段中的变量。 具体的操作是: 1.在js中添加data字段以及相应的格式,并在data字段中创

    2024年02月04日
    浏览(63)
  • 【微信小程序】wxml、wxss、js、json文件介绍

    😉博主:初映CY的前说(前端领域) ,📒本文核心:微信小程序的入门介绍 【前言】书接上回,我们知道了一个小程序的构成结构,接下来我们来进一步学习小程序的目录结构中的.wxml、.wxss、.js、.json。 用于页面的布局结构,相当于网页中 .html 文件 换做网页来说就是我们的

    2024年02月09日
    浏览(64)
  • 利用PDF.js在微信小程序里预览PDF文件

    在微信小程序可以通过wx.downloadFile 和 wx.openDocument 两个api下载并打开pdf文件。这种方式主要有不少的缺点: 1、需要下载才可以查看,且每次打开都需要下载生成一个临时文件,如果PDF文件比较多的话,临时文件会越来越多,且如果PDF文件比较大的话,打开会比较慢。 2、在导

    2024年02月03日
    浏览(73)
  • 持续不断更新中... 自己整理的一些前端知识点以及前端面试题,包括vue2,vue3,js,ts,css,微信小程序等

    答: 在普通的前端项目工程中,在script标签中增加setup即可使用api 使用setup()钩子函数 答: 不要在计算属性中进行异步请求或者更改DOM 不要直接修改computed的值 区别: 计算属性值基于其响应式依赖被缓存,意思就是只要他之前的依赖不发生变化,那么调用他只会返回之前缓

    2024年02月11日
    浏览(58)
  • uniapp 微信小程序 纯js文件中引入自定义modal组件(无需所有页面手动引入组件)

    工具:uniapp 开发端:微信小程序 其他:uview 2.0 场景:接口请求统一封装中需要对接口返回token失效的情况做modal显示,引导用户退出小程序,我的想法是将modal的默认confirm按钮替换成小程序自带的退出方法: 这样用户点击确认按钮就能退出小程序,因此uni.showModel不满足需求

    2024年02月09日
    浏览(67)
  • 微信小程序animation动画,微信小程序animation动画无限循环播放

    需求是酱紫的: 页面顶部的喇叭通知,内容不固定,宽度不固定,就是做走马灯(轮播)效果,从左到右的走马灯(轮播),每播放一遍暂停 1500ms ~ 2000ms 刚开始想的是 css 的 position: relative + animation,如果宽度固定还好说,宽度不固定,用百分比的话,想象很美好,现实很

    2024年02月13日
    浏览(58)
  • 微信小程序-for循环

    通过wx:for可以根据指定的数组,循环渲染重复的组件结构,语法示例如下: 默认情况下,当前的循环项的索引用index表示(内置的),当前的循环项用item表示。

    2024年02月15日
    浏览(77)
  • 微信小程序——文字水平循环滚动

    前言:有时候页面上需要放一个通告或者通知,成一行文字的形式,从右到左滑动直至全部消失之后,继而从最右侧出现,以此循环往复,接着小河码就带领大家在微信开发者工具中实现该特效,如果有幸被观众老爷们看到,希望能够点个赞哦。 1、在该页面的.wxml中按照如下

    2024年02月07日
    浏览(44)
  • 微信小程序——for循环遍历

    以components中创建的ForComp 和pages中的features为例 features.json  features.wxml ForComp.js ForComp.wxml 注意绿色框出的ws:key=“”,可以参考  列表渲染 | 微信开放文档 (qq.com)  简单来说就是,当需要遍历的列表是由单个字符串、布尔值等构成时候,使用*this即可。但是当列表是由数组组

    2024年02月08日
    浏览(38)
  • 微信小程序for循环嵌套

    wx:for-item=“pro” pro 自定义循环体参数

    2024年04月26日
    浏览(35)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包