微信小程序自定义组件—

文章目录

一、预期功能
二、组件的设计方案
三、现在上代码（根据引用关系进行展示）
- 3.1 image-view组件
- 3.2 row-view组件
- 3.3 add-img组件

先上图

一、预期功能

实现图片的添加
实现图片的删除
实现图片的预览

二、组件的设计方案

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:{ // 图片urltype: String,value: ''},imageList:{ // 所有图片，方便预览type: Array,value: []},size:{ // 图片默认占屏幕宽度的比例，默认是屏幕的四分之一（除去padding的宽度1/4）type: Number,value: 4},add: { // 是否是添加type: Boolean,value: false},add_limit:{ // 上传图片上限，默认1type: 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>

看着代码感觉都比较清晰，有啥问题可以留言或者加我微信，或者进小程序交流群交流吧

最后奉上demo

微信小程序自定义组件——添加图片组件相关推荐

微信小程序自定义picker弹框组件
要有遥不可及的梦想,也要有脚踏实地的本事.----------- Grapefruit.Banuit Gang(香柚帮) 柚子写项目遇到了一个问题,就是微信小程序官方文档上面的弹框组件picker,它 ...
微信小程序自定义弹出框组件，模拟wx.showModal
微信小程序开发交流qq群 173683895 效果图: 代码 wxml <view wx:if='{{showModal}}'><view class='mask_layer' ...
微信小程序--地图上添加图片
如何在微信小程序地图添加上,添加图片? 在微信小程序中,地图的层级最高,所以我们没有办法,通过定位,在地图上添加图片等信息; 处理办法: 添加控件:controls; 其中有个属性position,进 ...
微信小程序开发初学：图片组件 - image
image组件用于在小程序中插入图片并对插入的图片进行简单修改.支持 JPG.PNG.SVG.WEBP.GIF 等格式. image具有的属性 src 类型:String 默认值:无图片的网络地址或 ...
微信小程序 - 自定义头部导航栏组件（详解） + iphoneX以上遮挡小黑条适配问题
1. 导航栏计算: 导航栏总高度=状态栏高度+胶囊高度+(胶囊距顶距离-胶囊高度)*2 navHeight = statusBarHeight + menuButtonObject.height + ...
微信小程序自定义状态栏navigationBar样式组件，适配所有机型
一.在app.json设置navigationStyle自定义 "window": {"navigationStyle": "custom" ...
微信小程序——＜image＞图片组件图片显示闪烁
解决方法: 1.设置height:auto 2.不加 mode="widthFix"
微信小程序--自定义组件（超详细从新建到使用）
微信小程序–自定义组件微信小程序官网介绍! 本文提供给急需使用自定义组件人群,以下是博主个人理解和案例!可以辅助官网来看介绍: 从小程序基础库版本 1.6.3 开始,小程序支持简洁的组件化编程.所 ...
微信小程序自定义标签组件component封装、组件生命周期，组件通信
微信小程序自定义标签组件component封装.组件生命周期,组件通信本文来说下小程序的自定义标签组件封装. 相比于vue,react的非路由组件,微信小程序的component组件要麻烦些,而且生 ...
微信小程序自定义组件，提示组件
微信小程序自定义组件,这里列举了一个常用的提示自定义组件,调用自定义组件中的方法和字段.仅供参考和学习. 编写组件: 在根目录下添加"components"目录,然后像添加Page ...

微信小程序自定义组件——添加图片组件

文章目录

一、预期功能

二、组件的设计方案

三、现在上代码（根据引用关系进行展示）

3.1 image-view组件

3.2 row-view组件

3.3 add-img组件

微信小程序自定义组件——添加图片组件相关推荐

最新文章

热门文章