setData后image组件页面渲染缓慢
发布于 6 年前 作者 fang61 18254 次浏览 来自 问答

1.wxml 主要代码

<view class=“gallery”>

<view class=“item” wx:for="{{images}}" wx:key="">

<image style=“width:160rpx; height:160rpx” src=" {{item}}" bindtap=“previewImage” mode=“aspectFill” />

<!-- 删除按钮 -->

<view class=“delete” bindtap=“delete” data-index="{{index}}">

<image style=“left: 20rpx;” src="/imges/mine/icon_delete.png" />

</view>

</view>

<view class=“item”>

<image src="/imges/mine/icon_add.png" class=“button-upload” bindtap=“chooseImage” /> </view>

</view>

2.js主要代码

chooseImage: function () {

var that = this;

wx.chooseImage({

sizeType: [‘compressed’],

sourceType: [‘album’, ‘camera’],

// 可以指定来源是相册还是相机,默认二者都有

success: function (res) {

// 返回选定照片的本地文件路径列表,tempFilePath可以作为img标签的src属性显示图片

var tempFilePaths = res.tempFilePaths;

//console.log(tempFilePaths);

that.setData({

images: that.data.images.concat(tempFilePaths)

});

}

})

},

previewImage: function (e) {

var that = this;

var current = e.target.dataset.src;

// 预览图集

wx.previewImage({

current: current, // 当前显示图片的http链接  

urls: that.data.images

});

},

delete: function (e) {

var that = this;

var index = e.currentTarget.dataset.index;

var images = that.data.images;

images.splice(index, 1);

console.log(images);

that.setData({

images: images

});

},

问题描述:上传、删除图片后页面渲染缓慢,上传删除次数越多越缓慢。本代码单独做个小程序速度挺快,但是放在项目主程序中就是慢的不行,求指点迷津。

回到顶部