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

This article mainly introduces the example analysis of movable-view mobile picture and double-finger zoom in WeChat Mini Programs. The article is very detailed and has certain reference value. Interested friends must finish reading it!

Movable-area is a new component of WeChat Mini Programs and can be used to move the view area movable-view. The direction of movement can be any, vertical or parallel. The movable area contains other components such as text, pictures, buttons, and so on. Movable areas can be bound to events such as touchend. The parameters of movable-view can adjust the animation effect.

Let's start with movable-view. Movable-view is a custom component of Mini Program. It is described as "a removable view container that can be dragged and slid in the page."

It is worth noting that there is a note in the document: "when movable-view is less than movable-area, the moving range of movable-view is within movable-area; when movable-view is greater than movable-area, the moving range of movable-view must include movable-area (the x-axis direction and y-axis direction are considered separately)." In other words, the parent container movable-area can be smaller than the child container movable-view, but the movement range of the child container must include the parent container.

First, take a look at the official example code:

Movable-view region is smaller than movable-area click me to move to (30px, 30px) movable-view region is larger than movable-area

There is a mistake, which should be a small mistake of the writer. The attribute direction of the second movable-area should be written on movable-view.

Take a look at the effect:

1) when the movable-view area is less than movable-area, the child container movable-view can only be moved within the parent container. The effect of the following figure is that the property out-of-bounds= "true" is set. Out-of-bounds can dye the child container to the boundary of the parent container with an animation that goes beyond the boundary and then bounces back. It does not really allow the child container to move outside the parent container.

2) when the movable-view area is larger than movable-area, the range of the child container movement must include the parent container.

In the second case, the parent container is regarded as the visual area of the phone screen, and the child container is regarded as the long picture and large picture to be viewed. You can drag to view the effect of the picture. If the picture is loaded dynamically and is not a fixed picture, it should be compatible with the possibility that the width and height of the picture is less than the visual width and height of the screen and the width and height of the picture is greater than the width and height of the visual screen, that is, the above two cases should be taken into account.

We need to set the width and height of the movable-view when the movable component loads, because the size of the movable-view will not change after the movable component is loaded successfully, and the movable area will not change. We can get the width and height of the image from the onload event of the image we want to view on the page (so far I only find that the bindload event can get the width and height of the image), and then store it in imgWidth and imgHeight. When the user clicks on the picture, the width and height of movable-view is set in the bindtap event, and the pop-up window wx;if of movable-area is set to true.

Because I want to view a list of pictures, I use an array to store the width and height of each picture, and then associate it through the picture id

/ * load image * / imageOnload:function (e) {var id = e.currentTarget.id this.data.imgIdList [id] = {width:e.detail.width, height:e.detail.height}}, cancel preview on template page / * Open pop-up window * / showResizeModal: function (e) {var src = e.currentTarget.dataset.src Var x = 0 var y = 0 try {var width = this.imgIdList [e.currentTarget.id] .width; / / Image original width var height = this.imgIdList [e.currentTarget.id] .height; / / Image original height / / Mini Program default fixed width 320px, get top and left values to center the picture with height = height * (320 / width); width = 320 X = (app.windowWidth-width) / 2 y = (app.windowHeight-height) / 2} catch (e) {} var img = {x: X, y: YisCheckDtl 26 currentSrc: src,}; this.setData ({img: img, isCheckDtl: true});}

Partial CSS code

.backdrop {background: rgba (0,0,0,1); width:100%; height: 100%; position: fixed; top:0; left:0;}

The above can basically complete a click to view the picture of the need.

However, if you support double-finger scaling, movable-view will not be able to achieve it. I haven't figured out how to achieve it yet. If anyone knows, I hope I can give you some advice. The main reason is that the same sentence I mentioned earlier: "if you change the size of the movable-view after the movable component is loaded successfully, the movable area will not change." The size of the picture will definitely change after zooming. It's okay to zoom out, but once you zoom in, the movable area remains the same. Imagine that if a picture of the visual width of the screen is just right, when enlarged, the picture can only move within the windowWidth of the visual width of the screen, and you can't see the left or the right.

So if you want to be both removable and scalable, you can't use the movable-view component, write it yourself. Originally, bindtouchmove would trigger the scroll bar of the page, but now Wechat seems to have fixed the BUG. I tested it on a real machine today without this problem.

Custom control resizePicModal.wxml:

Cancel Preview

JS: resizePicModal.js

/ * usage: * 1) the image to be scaled by WXHTML must input src and bind bindtap event. * e.g: * * 2) WXHTML needs to introduce Modal template (isCheckDtl no longer needs to be defined): * * 3) JS page needs to introduce JS file. Events covering the current page: * var resizePicModalService = require ('.. /.. / components/resizePicModal/resizePicModal.js') * var resizePicModal = {} * 4) in the onLoad event, instantiate ResizePicModal * resizePicModal = new resizePicModalService.ResizePicModal () * / var app = getApp () let modalEvent = {distanceList: [0,0], / / store the distance between two fingers when zooming. There are only two pieces of data. The first item is old distance. The last item is new distance disPoint: {x: 0, y: 0}, / / position on the picture imgIdList: {}, / * Open pop-up window * / showResizeModal: function (e) {var src = e.currentTarget.dataset.src; var x = 0 var y = 0 try {var width = this.imgIdList.currentTarget..width; / / original width of the picture var height = this.imgIdList [e.currentTarget.id] .height / / original height of picture / / fixed width of Mini Program 320px height = height * (320 / width); width = 320; x = (app.windowWidth-width) / 2 / / > 0? (app.windowWidth-width) / 2: 0; y = (app.windowHeight-height) / 2max / > 0? (app.windowHeight-height) / 2: 0;} catch (e) {} var img = {top: y, left: X, x: X, y: y, width: '100% src, baseScale: 1, currentSrc: src,}; this.setData ({img: img, isCheckDtl: true}) }, / * close the pop-up window * / closeResizeModal:function () {this.setData ({isCheckDtl: false})}, / * load pictures * / imageOnload:function (e) {var id = e.currentTarget.id this.imgIdList [id] = {width:e.detail.width, height:e.detail.height} / * bindtouchmove * / bindTouchMove: function (e) {if (e.touches.length = = 1) {/ / one finger moves the current picture this.data.img.left = e.touches [0] .clientX-this.disPoint.x this.data.img.top = e.touches [0] .clientY-this.disPoint.y this.setData ({img: this.data.img})} if (e.touches.length = = 2) {/ / two-finger zoom var XMove = e.touches [1] .clientX-e.touches [0] .clientX var yMove = e.touches [1] .clientY-e.touches [0] .clientY var distance = Math.sqrt (xMove * xMove + yMove * yMove) / / the root sign this.distanceList.shift () this.distanceList.push (distance) if (this.distanceList [0] = = 0) {return} var distanceDiff = this.distanceList [1]-this.distanceList [0] / / the change of distance between two touch. > 0, enlarge the picture. 0) {this.data.img.baseScale = baseScale var imgWidth = baseScale * parseInt (this.data.img.imgWidth) var imgHeight = baseScale * parseInt (this.data.img.imgHeight) this.setData ({img: this.data.img})} else {this.data.img.baseScale = 0 this.setData ({img: this.data.img})} / * bindtouchend * / bindTouchEnd: function (e) {if (e.touches.length = = 2) {/ / two-finger scaling this.setData ({isCheckDtl: true})}, / * bindtouchstart * / bindTouchStart: function (e) {this.distanceList = [0,0] / / restore the initial value this.disPoint = {x: 0 Y: 0} if (e.touches.length = = 1) {this.disPoint.x = e.touches [0] .clientX-this.data.img.left this.disPoint.y = e.touches [0] .clientY-this.data.img.top}} function ResizePicModal () {let pages = getCurrentPages () let curPage = pages [pages.length-1] Object.assign (curPage, modalEvent) / / overwrite native page event this.page = curPage curPage.resizePicModal = this return this} module.exports = {ResizePicModal}

Business page wxml: introducing custom control templates

Business page js, referencing js file, instantiating resizePicModal

Var that var resizePicModal = {} var app = getApp () var resizePicModalService = require ('.. /.. / components/resizePicModal/resizePicModal.js') / * Lifecycle function-listening page loading * / onLoad: function (options) {that = this 8 resizePicModal = new resizePicModalService.ResizePicModal ()} above is all the contents of the article "sample Analysis of movable-view Mobile Picture and double finger Zoom in WeChat Mini Programs". Thank you for reading! Hope to share the content to help you, more related knowledge, welcome to follow the industry information channel!

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.