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:
|
<<: How to redirect nginx directory path
>>: MySQL 5.7.13 winx64 installation and configuration method graphic tutorial (win10)
The installation tutorial of mysql 8.0.11 winx64 ...
mysql 5.7.21 winx64 installation and configuratio...
Table of contents 1. mixin.scss 2. Single file us...
Table of contents describe accomplish The project...
Part.0 Background The company's intranet serv...
Table of contents Import on demand: Global Import...
Detailed example of getting the maximum value of ...
Table of contents Overview From Binary Tree to B+...
Table of contents Experimental environment Instal...
SQL is the main trunk. Why do I understand it thi...
1. Download MySQL Community Server 5.6.35 Downloa...
1. First go to the official website https://www.p...
This article shares the specific code of js to re...
Code <div class="test"> <div&g...
Table of contents 1. Install Docker 2. Install so...