Shulou(Shulou.com)06/01 Report--

This article mainly introduces the relevant knowledge of "how to select a picture and enlarge and preview a picture in WeChat Mini Programs". The editor shows you the operation process through an actual case. The method of operation is simple and fast, and it is practical. I hope this article "how to select pictures and zoom in and preview pictures in WeChat Mini Programs" can help you solve the problem.

Wechat provides a systematic way to select pictures.

Wx.chooseImage ({})

This method is used to select pictures. The specific use is as follows:

Data: {avatarUrl:null}

First, define the variables that receive the data in the data, and then call the method to select the picture and display the picture.

BindViewTap:function () {var that = this Wx.chooseImage ({/ / sets the maximum number of pictures that can be selected. The default is 9. If we set multiple pictures, the receiving time / / is no longer a single variable. Count: 1, sizeType: ['original',' compressed'], / / original original image, compressed compressed image. By default, both have sourceType: ['album',' camera'], / / album selects pictures from the album, and camera uses a camera. By default, both have success: function (res) {/ / get successfully, and assign the obtained address to the temporary variable var tempFilePaths = res.tempFilePaths That.setData ({/ / assign temporary variables to variables already defined in data avatarUrl:tempFilePaths})}, fail: function (res) {/ / fail}, complete: function (res) {/ / complete}})}

At this point, the global variable we defined, that is, url in data, already has a value, and now we just need to display it on the page.

/ / Click this button to call the method of selecting an image. After success, the image is displayed on the image tag to bind the event.

If it is multiple selections, the data source should not be displayed directly when it is displayed, which will report an error, because the array is returned:

Picture Preview:

Let's talk about the picture preview:

First, define the data source in data:

Data: {avatarUrl:null, pictures: ['https://p0.meituan.net/movie/ea4ac75173a8273f3956e514a4c78018253143.jpeg',' https://p0.meituan.net/movie/5d4fa35c6d1215b5689257307c461dd2541448.jpeg', 'https://p0.meituan.net/movie/0c49f98a93881b65b58c349eed219dba290900.jpg',' https://p1.meituan.net/movie/45f98822bd15082ae3932b6108b17a01265779.jpg', 'https://p1.meituan.net/movie/722de9a7b0c1f9c262162d87eccaec7c451290.jpg',' https://p0.meituan.net/movie/cb9be5bbedb78ce2ef8e83c93f83caca474393.jpg', 'https://p1.meituan.net/movie/a852b992cdec15319c717ba9fa9b7a35406466.jpg',' https://p1.meituan.net/movie/dc1f94811793e9c653170cba7b05bf3e484939.jpg']}

Then create the method previewImage to realize the image preview:

PreviewImage: function (e) {var that = this, / / get the following table of the current picture index = e.currentTarget.dataset.index, / / data source pictures = this.data.pictures; wx.previewImage ({/ / the following table current: pictures [index], / / data source urls: pictures} is currently displayed)}

Then iterate through the data on the page, showing:

First list to show all the pictures, bind the preview method, click on the picture for left and right preview

Below, I would like to add to WeChat Mini Programs's image magnification and preview function. The details are as follows:

Requirements: when you click on the picture, the current picture enlarges the preview and can swipe left and right

Implementation: use WeChat Mini Programs picture preview interface

We can see that api requires two parameters, which are passed to js through the following data-list and data-src, respectively

Wxml Code:

Js Code:

/ / Picture Click event imgYu:function (event) {var src = event.currentTarget.dataset.src;// get data-src var imgList = event.currentTarget.dataset.list;// get data-list / / Picture Preview wx.previewImage ({current: src, / / http link of the currently displayed picture urls: imgList / / list of http links to be previewed})}

1. Add a click event (imgYu) to the picture

two。 Use event.currentTarget.dataset. Customize the property name to get the value of data-, such as event.currentTarget.dataset.src (get the value of data-src)

3. Then put the two acquired values into the wx.previewImage interface.

The effect picture is as follows: you can slide the previous one left and right and the next one.

This is the end of the content about "how to select pictures and enlarge and preview pictures in WeChat Mini Programs". Thank you for your reading. If you want to know more about the industry, you can follow the industry information channel. The editor will update different knowledge points for you every day.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.