先上图
一、预期功能
- 实现图片的添加
- 实现图片的删除
- 实现图片的预览
二、组件的设计方案
2.1 添加图片方案有几种添加方式
- 添加的同时上传,这样最后提交表单的时候便捷,但是会浪费一些多余的流量和服务器资源
- 添加只保存本地url,最后提交表单的时候上传,这样最后提交的时候,会有用户的等待时间
- 本组件采用的第二种方式
- 第一种,以后再兼容,大家根据自己的需要,可以在我的基础上稍微修改即可
2.2 组件的设计方案
1.add-image 组件 (这个最终我们需要使用的组件)
2.row-view 行容器(这个是便于以后开发,自己封装的行布局的组件,
现在比较简单,等同于行布局的view,用来呈放上图的多个图片布局)
3.image-view(这个是重点组件,基本这个组件的核心就在这里,下面也会重点进行说明)
三、现在上代码(根据引用关系进行展示)
3.1 image-view组件
先看代码布局
<view class='content' style='width:{{750/size}}rpx;height:{{750/size}}rpx;'>
<view class='img-view' wx:if="{{!add}}">
<image src='{{src}}' bindtap='showImg' style='width:{{750/size-16}}rpx;height:{{750/size-16}}rpx;' mode='aspectFill'></image>
<icon bindtap='deleteImg' class='close' color='red' type='clear' size='18'></icon>
</view>
<view bindtap='addImg' wx:if="{{add}}" class='add-img'>
<view class='line1'></view>
<view class='line2'></view>
</view>
</view>
整体的代码逻辑不复杂,它需要根据配置来决定自己是显示图片,还是添加图片的按钮,其中图片的大小尺寸和图片的上传数量都进行了限制
// components/aydk_image_view/aydk_image_view.js
Component({
/**
* 组件的属性列表
*/
properties: {
src:{ // 图片url
type: String,
value: ''
},
imageList:{ // 所有图片,方便预览
type: Array,
value: []
},
size:{ // 图片默认占屏幕宽度的比例,默认是屏幕的四分之一(除去padding的宽度1/4)
type: Number,
value: 4
},
add: { // 是否是添加
type: Boolean,
value: false
},
add_limit:{ // 上传图片上限,默认1
type: Number,
value: 1
}
},
/**
* 组件的初始数据
*/
data: {
},
/**
* 组件的方法列表
*/
methods: {
addImg() {
let that = this;
wx.chooseImage({
count: that.data.add_limit,
success: function(res) {
that.triggerEvent('addImg', res.tempFilePaths);//
},
})
},
deleteImg(){
let that = this;
that.triggerEvent('deleteImg', that.data.src);
},
// 图片预览
showImg(){
let that =this;
wx.previewImage({
urls: that.data.imageList.length > 0 ? that.data.imageList : [that.data.src],
current: that.data.src
})
}
}
})
3.2 row-view组件
<view class='content' style='background-color:{{bg}};'>
<slot></slot>
</view>
基本等同于一个行布局的view,之后可以根据自己的需要,来扩展不同的布局方式
3.3 add-img组件
<row-view>
<block wx:for="{{imageList}}" wx:key="{{index}}">
<img-view
src="{{item}}"
imageList="{{imageList}}"
bind:deleteImg="deleteImg"
size='{{num}}'>
</img-view>
</block>
<img-view
wx:if="{{imageList.length<num}}"
add="true"
add_limit="{{num-imageList.length}}"
bind:addImg="addImg"
size='{{num}}'>
</img-view>
</row-view>
看着代码感觉都比较清晰,有啥问题可以留言或者加我微信,或者进小程序交流群交流吧