WeChat applet selects the image control

WeChat applet selects the image control

This article example shares the specific code for selecting the image control in the WeChat applet for your reference. The specific content is as follows

xml:

<loading hidden="{{loadingHidden}}">
 loading...
</loading>
<view class="add_carimg">
 <block>
 <view class="load_iamge">
 <text class="load_head_text">Upload photos of construction vehicles</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">Go to work</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_image {
 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;
}
 
/* picture*/
.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;
}
 
/* Delete the image */
.img-select {
 width: 50rpx;
 height: 50rpx;
 border-radius: 50%;
 position: absolute;
 right: -20rpx;
 top: -20rpx;
}
 
.img {
 width: 100%;
 height: 100%;
}

js:

Page({
 
 /**
 * Initial data of the page */
 data: {
 tempFilePaths: '',
 imgbox: [], //Select the image fileIDs: [], //Return value after uploading to cloud storage src: 0,
 },
 
 onLoad: function (options) {
 
 
 },
 //Image click event imgYu: function (event) {
 var that = this;
 
 console.log(event.target.dataset.message + "what is this");
 var src = event.target.dataset.message;
 //Image preview wx.previewImage({
 current: src, // The http link of the currently displayed image urls: [src] // The list of http links of images that need to be previewed})
 }, // Delete photo&&
 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
 });
 },
 // Delete photo&&
 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
 });
 },
 //Select an image&&&
 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, // default is 9, set the number of images sizeType: ['original', 'compressed'], // you can specify whether it is the original image or the compressed image, both are available by default sourceType: ['album', 'camera'], // you can specify whether the source is the album or the camera, both are available by default success: function (res) {
  // console.log(res.tempFilePaths)
  // Returns a list of local file paths for the selected photos. tempFilePath can be used as the src attribute of the img tag to display the image var tempFilePaths = res.tempFilePaths
  console.log('path' + tempFilePaths);
  if (imgbox.length == 0) {
  imgbox = tempFilePaths
  } else if (2 > imgbox.length) {
  imgbox = imgbox.concat(tempFilePaths);
  }
  that.setData({
  imgbox: imgbox,
  imgnum: imgbox.length
  });
 }
 })
 },
 
 //Picture imgbox: function (e) {
 this.setData({
 imgbox: e.detail.value
 })
 },
 
})

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.

You may also be interested in:
  • WeChat applet implements image selection and preview function
  • How to use the WeChat applet chooseImage (select an image from the local album or take a photo using the camera)
  • WeChat applet picture selection area cropping implementation method
  • WeChat applet selects pictures and enlarges the preview picture function
  • WeChat applet image selection, upload to server, preview (PHP) implementation example
  • WeChat applet chooseImage selects an image or takes a photo
  • WeChat Mini Program - Take a photo or select an image and upload a file

<<:  How to redirect nginx directory path

>>:  MySQL 5.7.13 winx64 installation and configuration method graphic tutorial (win10)

Recommend

How to use Vue3 to achieve a magnifying glass effect example

Table of contents Preface 1. The significance of ...

Detailed process of installing logstash in Docker

Edit docker-compose.yml and add the following con...

Videojs+swiper realizes Taobao product details carousel

This article shares the specific code of videojs+...

Detailed steps to install Sogou input method on Ubuntu 20.04

1. Install Fcitx input framework Related dependen...

In-depth explanation of MySQL isolation level and locking mechanism

Table of contents Brief description: 1. Four char...

MySQL study notes on handling duplicate data

MySQL handles duplicate data Some MySQL tables ma...

Summary of several commonly used CentOS7 images based on Docker

Table of contents 1 Install Docker 2 Configuring ...

Circular progress bar implemented with CSS

Achieve results Implementation Code html <div ...

Simple steps to create a MySQL container with Docker

Preface We have already installed Docker and have...

Web Design Tutorial (5): Web Visual Design

<br />Previous article: Web Design Tutorial ...

Determine whether MySQL update will lock the table through examples

Two cases: 1. With index 2. Without index Prerequ...