微信小程序选择图片控件


Posted in Javascript onJanuary 19, 2021

本文实例为大家分享了微信小程序选择图片控件的具体代码,供大家参考,具体内容如下

微信小程序选择图片控件

xml:

<loading hidden="{{loadingHidden}}">
 加载中...
</loading>
<view class="add_carimg">
 <block>
 <view class="load_iamge">
 <text class="load_head_text">上传施工车辆照片</text>
 <text class="load_foot_text">{{imgbox.length}}/2</text>
 </view>
 <view class='pages'>
 <view class="images_box">
 <block wx:key="imgbox" wx:for="{{imgbox}}">
  <view class='img-box'>
  <image class='img' src='{{item}}' data-message="{{item}}" bindtap="imgYu"></image>
  <view class='img-delect' data-deindex='{{index}}' bindtap='imgDelete1'>
  <image class='img' src='/pages/images/delete_btn.png'></image>
  </view>
  </view>
 </block>
 <view class='img-box' bindtap='addPic1' wx:if="{{imgbox.length<2}}">
  <image class='img' src='/pages/images/load_image.png'></image>
 </view>
 </view>
 </view>
 </block>
</view>
<view>
 <button class="work_btn" bindtap="shanggang">上岗</button>
</view>

css: 

.work_btn {
 width: 60%;
 height: 35px;
 line-height: 35px;
 margin-top: 15px;
 border-radius: 5px;
 font-size: 30rpx;
 color: white;
 background-color: rgb(2, 218, 247);
}
 
.work_btn:active {
 width: 60%;
 height: 35px;
 line-height: 35px;
 margin-top: 15px;
 border-radius: 5px;
 font-size: 30rpx;
 color: white;
 background-color: rgb(151, 222, 231);
}
 
/*********/
 
.load_iamge {
 width: 100%;
 height: 30px;
 margin-top: 10px;
 display: flex;
 flex-direction: row;
}
 
.load_head_text {
 width: 95%;
 height: 20px;
 margin-bottom: 5px;
 margin-top: 5px;
 
 
}
 
.load_foot_text {
 width: 5%;
 height: 20px;
 margin-right: 15px;
 margin-top: 5px;
 margin-bottom: 5px;
 float: right;
 
}
 
.pages {
 width: 98%;
 margin: auto;
 overflow: hidden;
}
 
/* 图片 */
.images_box {
 width: 100%;
 display: flex;
 flex-direction: row;
 flex-wrap: wrap;
 justify-content: flex-start;
 background-color: white;
}
 
.img-box {
 border: 2rpx;
 border-style: solid;
 border-color: rgba(170, 167, 167, 0.452);
 width: 200rpx;
 height: 200rpx;
 margin-left: 35rpx;
 margin-top: 20rpx;
 margin-bottom: 20rpx;
 position: relative;
}
 
/* 删除图片 */
.img-delect {
 width: 50rpx;
 height: 50rpx;
 border-radius: 50%;
 position: absolute;
 right: -20rpx;
 top: -20rpx;
}
 
.img {
 width: 100%;
 height: 100%;
}

js:

Page({
 
 /**
 * 页面的初始数据
 */
 data: {
 tempFilePaths: '',
 imgbox: [], //选择图片
 fileIDs: [], //上传云存储后的返回值
 src: 0,
 },
 
 onLoad: function (options) {
 
 
 },
 //图片点击事件
 imgYu: function (event) {
 var that = this;
 
 console.log(event.target.dataset.message + "这是啥");
 var src = event.target.dataset.message;
 //图片预览
 wx.previewImage({
 current: src, // 当前显示图片的http链接
 urls: [src] // 需要预览的图片http链接列表
 })
 }, // 删除照片 &&
 imgDelete1: function (e) {
 let that = this;
 let index = e.currentTarget.dataset.deindex;
 let imgbox = this.data.imgbox;
 imgbox.splice(index, 1)
 that.setData({
 imgbox: imgbox
 });
 },
 // 删除照片 &&
 imgDelete1: function (e) {
 let that = this;
 let index = e.currentTarget.dataset.deindex;
 let imgbox = this.data.imgbox;
 imgbox.splice(index, 1)
 that.setData({
 imgbox: imgbox
 });
 },
 // 选择图片 &&&
 addPic1: function (e) {
 var imgbox = this.data.imgbox;
 console.log(imgbox)
 var that = this;
 var n = 2;
 if (2 > imgbox.length > 0) {
 n = 2 - imgbox.length;
 } else if (imgbox.length == 2) {
 n = 1;
 }
 wx.chooseImage({
 count: n, // 默认9,设置图片张数
 sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图,默认二者都有
 sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机,默认二者都有
 success: function (res) {
  // console.log(res.tempFilePaths)
  // 返回选定照片的本地文件路径列表,tempFilePath可以作为img标签的src属性显示图片
  var tempFilePaths = res.tempFilePaths
  console.log('路径' + tempFilePaths);
  if (imgbox.length == 0) {
  imgbox = tempFilePaths
  } else if (2 > imgbox.length) {
  imgbox = imgbox.concat(tempFilePaths);
  }
  that.setData({
  imgbox: imgbox,
  imgnum: imgbox.length
  });
 }
 })
 },
 
 //图片
 imgbox: function (e) {
 this.setData({
 imgbox: e.detail.value
 })
 },
 
})

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Javascript开发包大全整理
Dec 22 Javascript
让JavaScript拥有类似Lambda表达式编程能力的方法
Sep 12 Javascript
jQuery的学习步骤
Feb 23 Javascript
js substr、substring和slice使用说明小记
Sep 15 Javascript
JS自调用匿名函数具体实现
Feb 11 Javascript
jQuery scrollFix滚动定位插件
Apr 01 Javascript
ES5 ES6中Array对象去除重复项的方法总结
Apr 27 Javascript
Vuejs监听vuex中值的变化的方法示例
Dec 02 Javascript
JS实现集合的交集、补集、差集、去重运算示例【ES5与ES6写法】
Feb 18 Javascript
基于vue实现滚动条滚动到指定位置对应位置数字进行tween特效
Apr 18 Javascript
jQuery模拟html下拉多选框的原生实现方法示例
May 30 jQuery
JS localStorage存储对象,sessionStorage存储数组对象操作示例
Feb 15 Javascript
jQuery冲突问题解决方法
Jan 19 #jQuery
js实现随机点名
Jan 19 #Javascript
js实现有趣的倒计时效果
Jan 19 #Javascript
微信小程序之高德地图多点路线规划过程示例详解
Jan 18 #Javascript
从源码角度来回答keep-alive组件的缓存原理
Jan 18 #Javascript
在JavaScript中查找字符串中最长单词的三种方法(推荐)
Jan 18 #Javascript
vue-resource 拦截器interceptors使用详解
Jan 18 #Vue.js
You might like
为什么那些咖啡爱好者大多看不上连锁咖啡店?
2021/03/06 咖啡文化
PHP4实际应用经验篇(2)
2006/10/09 PHP
PHP连接access数据库
2008/03/27 PHP
PHP基于DOMDocument解析和生成xml的方法分析
2017/07/17 PHP
查询绑定数据岛的表格中的文本并修改显示方式的js代码
2009/12/15 Javascript
用javascript为页面添加天气显示实现思路及代码
2013/12/02 Javascript
javascript中拼接HTML字符串的最快、最好的方法
2014/06/07 Javascript
node.js中的fs.lchmodSync方法使用说明
2014/12/16 Javascript
Js使用WScript.Shell对象执行.bat文件和cmd命令
2014/12/18 Javascript
JavaScript实现同一页面内两个表单互相传值的方法
2015/08/12 Javascript
JS实现table表格数据排序功能(可支持动态数据+分页效果)
2016/05/26 Javascript
JS for循环中i++ 和 ++i的区别介绍
2016/07/20 Javascript
Vue.js绑定HTML class数组语法错误的原因分析
2016/10/19 Javascript
正则 js分转元带千分符号详解
2017/03/08 Javascript
JavaScript 正则命名分组【推荐】
2018/06/07 Javascript
Vue resource三种请求格式和万能测试地址
2018/09/26 Javascript
深入浅出vue图片路径的实现
2019/09/04 Javascript
Vue.js中使用Vuex实现组件数据共享案例
2020/07/31 Javascript
nodejs+koa2 实现模仿springMVC框架
2020/10/21 NodeJs
Python命名空间详解
2014/08/18 Python
python人人网登录应用实例
2014/09/26 Python
python 返回列表中某个值的索引方法
2018/11/07 Python
使用TFRecord存取多个数据案例
2020/02/17 Python
了解一下python内建模块collections
2020/09/07 Python
ONLY德国官方在线商店:购买时尚女装
2017/09/21 全球购物
在c#中using和new这两个关键字有什么意义
2013/05/19 面试题
40岁生日感言
2014/02/15 职场文书
公司活动方案范文
2014/03/06 职场文书
妇女儿童发展规划实施方案
2014/03/16 职场文书
2014年银行工作总结范文
2014/11/12 职场文书
2019年描写人生经典诗句大全
2019/07/08 职场文书
预备党员入党思想汇报(范文)
2019/08/14 职场文书
两行代码解决Jupyter Notebook中文不能显示的问题
2021/04/24 Python
教你用Python爬取英雄联盟皮肤原画
2021/06/13 Python
MySQL选择合适的备份策略和备份工具
2022/06/01 MySQL
面试官问我Mysql的存储引擎了解多少
2022/08/05 MySQL