微信小程序简单封装图片上传组件
希望自己 “day day up” -----小陶
我从哪里来
在写小程序的时候需要上传图片，个人觉得官方提供的 Uploader 组件不是太好用，于是乎，看了官方文档，自己封装一个组件。
我是谁
直接上主题
在根目录下创建components文件夹
在components下开始创建自己的组件
效果图如下：
由于我使用的是flex布局，所以
我从哪里来
# wxml
<view>
<view>
<text>上传图片：</text>
<text>{{addedCount}}/{{count}}</text>
</view>
<view>
<block wx:for="{{images}}" wx:key="index">
<image mode="aspectFill" src="http://www.likecs.com/{{item}}" bindtap="previewImage" data-index="{{index}}" bindlongpress="deleteImage"></image>
</block>
<view wx:if="{{addedCount<3}}" hover-class="addImageIconHover" hover-stay-time="200" bindtap="chooseImage">
<mp-icon type="field" icon="add" color="gray" size="{{40}}"></mp-icon>
</view>
</view>
</view>
# js
Component({
// 组件对外属性
properties: {
// 图片总数量
count: {
type: Number,
value: 3,
observers: function (newVal, oldVal) {}
},
// 图片临时访问路径集合
images: {
type: Array,
value: []
},
// 已经添加的图片数量
addedCount: {
type: Number,
value: 0,
observers: function (newVal, oldVal) {
console.log('--new--'.newVal, '--old--', oldVal)
}
},
// 当前图片的位置下标
currentIndex: {
type: Number,
value: 0,
}
},
// 组件内部属性
data: {
},
// 方法
methods: {
// 选择图片
chooseImage() {
this.triggerEvent('chooseImage')
},
// 预览图片
previewImage(e) {
wx.previewImage({
urls: this.data.images,
current: this.data.images[e.currentTarget.dataset.index]
})
},
// 删除图片
deleteImage(e){
this.triggerEvent('deleteImage',e.currentTarget.dataset.index)
}
}
})
# wxss
.images-box {
border-radius: 10rpx;
width: 100%;
}
.imageCount {
height: 80rpx;
line-height: 80rpx;
}
.images {
height: 240rpx;
display: flex;
align-items: center;
justify-content: space-between;
}
.addImageIcon{
text-align: center;
line-height: 200rpx;
background-color: #f7f7f7;
}
.addImageIconHover{
background-color: #C0C4CC;
}
.image {
width: 30%;
border-radius: 10rpx;
height: 200rpx;
}
# json
{
"component": true,
"usingComponents":{
"mp-icon": "/miniprogram_npm/weui-miniprogram/icon/icon"
}
}
我要到哪里去
此代码只是一个很小的功能，代码这东西千变万化，在不同的人手中就会绽放不同程度的光彩，我希望，有一天，我的光彩会越来越亮。
