WeChat applet movable view mobile image and dual-finger scaling instance code,

The code of the app movable view's mobile image and dual-finger scaling instance,

Movable-area is a new component of the applet. It can be used to move the view area movable-view. You can select any vertical or horizontal direction. The removable area contains other text, images, buttons, and other components. You can bind events such as touchend to a movable area. The movable-view parameter can be used to adjust the animation effect.

Let's start with movable-view. movable-view is a small program-defined component. the description is as follows: "A removable view container can be dragged and slide on the page ". official Document address:

Https://mp.weixin.qq.com/debug/wxadoc/dev/component/movable-view.html.

Note: "When movable-view is smaller than movable-area, the moving range of movable-view is within movable-area; when the value of movable-view is greater than that of movable-area, the moving range of the movable-view must include movable-area (the X axis direction and the Y axis direction are considered separately )". that is to say, the parent container movable-area can be smaller than the sub-container movable-view, but the moving range of the sub-container must include the parent container.

First look at the official instance code:

<View class = "section"> <view class = "section _ title"> the movable-view area is smaller than movable-area </view> <movable-area style = "height: 200px; width: 200px; background: red; "> <movable-view style =" height: 50px; width: 50px; background: blue; "x =" {x} "y =" {y} "ction =" all "> </movable-view> </movable-area> <view class = "btn-area"> <button size = "mini" bindtap = "tap"> click me to move to (30px, 30px) </button> </view> <view class = "section _ title"> the movable-view area is greater than movable-area </view> <movable-area style = "height: 100px; width: 100px; background: red; "direction =" all "> <movable-view style =" height: 200px; width: 200px; background: blue; "> </movable-view> </movable-area> </view>

There is an error here. It should be a small mistake of the author. The second property of movable-area, direction, should be written on movable-view.

 <movable-area style="height: 100px;width: 100px;background: red;" >  <movable-view style="height: 200px; width: 200px; background: blue;" direction="all">  </movable-view> </movable-area>

See the following results:

1) when the movable-view area is smaller than the movable-area, the sub-container movable-view can only be moved within the parent container. the result is that the out-of-bounds = "true" attribute is set. out-of-bounds can dye an animation when the sub-container reaches the parent container boundary that exceeds the boundary and then recovers. the sub-container cannot be moved beyond the parent container.

2) When the movable-view area is greater than the movable-area, the range of sub-container movement must include the parent container.

In the second case, the parent container is regarded as the visible area of the mobile phone screen, and the sub-container is regarded as the long graph to be viewed. you can drag to view the effect of the image. if the image is dynamically loaded when it is not a fixed image, it must be compatible with the possibility that the image width and height are smaller than the screen visible width and the image width is higher than the visual screen width, that is, we need to consider the above two situations.

We need to set the movable-view width and height while loading the movable component. Because the movable component is loaded successfully and then changes the size of the movable-view, the movable area will not change. we can get the image width and height through the onload event of the image to be viewed on the page (currently I only find that the bindload event can get the image width and height), and then store the imgWidth and imgHeight. when you click an image, set the movable-view width and height in the bindtap event, and set the pop-up window wx of movable-area; if to true.

<! -- List of images to be viewed --> <view class = "flex-wrap flex-pic"> <view class = "picList"> <image wx: for = "{item. imglist }}" wx: for-item = "itemImg" wx: key = "* this" id = "{'rfnd _ '+ index}" bindload = "imageOnload" src = "{itemImg}" bindtap = "showResizeModal" data -src = "{itemImg }}"> </image> </view>

Because you want to view an image list, I use an array to store the width and height of each image, and then associate it with the image id.

/*** Load image */imageOnload: function (e) {var id = e. currentTarget. id this. data. imgIdList [id] = {width: e. detail. width, height: e. detail. height }}, template page <! -- Components/resizePicModal. wxml --> <template name = "resizePic"> <scroll-view class = "backdrop"> <view class = "close-icon" bindtap = "closeResizeModal"> cancel preview </ view> <movable-area style = "width: 100%; height: 100%; "> <movable-view direction =" all "out-of-bounds =" true "x =" {img. x }}" y = "{img. y }}"> <image mode = "widthFix" class = "dtl-img" src = "{img. currentSrc }}"> </image> </movable-view> </movable-area> </scroll-view> </template>/*** open a 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; // var height = this. imgIdList [e. currentTarget. id]. height; // The original height of the image // the applet defaults to fixed width 320px, and obtains the top and left values so that the image is centered and displayed with height = height * (320/width); width = 320; x = (app. required wwidth-width)/2 y = (app. required wheight-height)/2} catch (e) {} var img = {x: x, y: y, 26 currentSrc: src,}; this. setData ({img: img, isCheckDtl: true });},

Part of CSS code

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

The preceding steps basically allow you to click to view images.

However, if double-finger scaling is supported, movable-view cannot be implemented. I haven't figured out how to implement it for the moment. If someone knows it, I hope I can give some advice. the main reason is that, as mentioned above, "after the movable component is loaded successfully, the size of the movable-view will be changed. The movable area will not change ". after scaling, the image size will change. it's okay to zoom in. Once zoomed in, the movable area remains unchanged. imagine that if an image of the visible width of the screen is scaled up, the image can only be moved in the range of the visible width of the screen (wxwwidth.

Therefore, if you want to move an image and resize it, you cannot use the movable-view component. Write it yourself. the original bindtouchmove will trigger the page's scroll bar, but now it seems that this BUG has been fixed. I did not test it on a real machine today.

Custom Control resizePicModal. wxml:

<! -- Zoom --> <template name = "resizePic"> <scroll-view class = "backdrop" catchtouchmove = "bindTouchMove" catchtouchend = "bindTouchEnd" bindtouchstart = "bindTouchStart"> <view class = "close-icon" bindtap = "preview"> cancel preview </view> <image catchtouchmove = "bindTouchMove" bindtouchend = "bindTouchEnd" bindtouchstart = "bindTouchStart" style = "transform: scale ({img. baseScale}); position: absolute; top: {img. top} px; left: {img. left} px; "mode =" widthFix "class =" dtl-img "src =" {img. currentSrc }}"> </image> </scroll-view> </template>

JS: resizePicModal. js

/*** Usage: * 1) the image to be scaled by WXHTML must be input to src and bindtap events. * e. g: * <image bindtap = "toggleDtl" data-src = "{item}" wx: for = "{productCard. arrImg }}" wx: key = "* this" src = "{item}" style = "width: 100% "mode =" widthFix "> </image> * 2) WXHTML introduces the Modal template (no need to define isCheckDtl): * <view wx: if = "{isCheckDtl }}"> * <import src ="/components/resizePicModal. wxml "/> * <template is =" resizePic "data =" {img} "> </t Emplate> * </view> * 3) JS pages should be introduced to overwrite the current page event: * var resizePicModalService = require ('.. /.. /components/resizePicModal. js ') * var resizePicModal ={} * 4) in the onLoad event, instantiate ResizePicModal * resizePicModal = new resizePicModalService. resizePicModal () */var app = getApp () let modalEvent = {distanceList: [0, 0], // distance between two fingers during storage scaling. only two data entries exist. the first item is old distance. the last item is new distance disPoint: {x: 0, y: 0}, // Specifies the position of imgIdList :{} on the image when you touch your finger./*** open the 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; // var height = this. imgIdList [e. currentTarget. id]. height; // The original height of the image // the applet fixed the width of 320px height = height * (320/width); width = 320; x = (app. required wwidth-width)/2 //> 0? (App. Required wwidth-width)/2: 0; y = (app. Required wheight-height)/2 //> 0? (App. optional wheight-height)/2: 0;} catch (e) {} var img = {top: y, left: x, x: x, y: y, width: '200', baseScale: 1, currentSrc: src,}; this. setData ({img: img, isCheckDtl: true}) ;},/*** close the pop-up window */closeResizeModal: function () {this. setData ({isCheckDtl: false})},/*** load image */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) {// rotate to move the current image 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) {// 2 refers to zooming 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); // this. distanceList. shift () this. distanceList. push (distance) if (this. distanceList [0] = 0) {return} var distanceDiff = this. distanceList [1]-this. distanceList [0] // distance changes between two touch.> 0. Enlarge the image. <0 zoom out image // assume that the scaled scale base is 1: newScale = oldScale + 0.005 * distanceDiff var baseScale = this. data. img. baseScale + 0.005 * distanceDiff if (baseScale> 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) {// 2 refers to scaling this. setData ({isCheckDtl: true}) }},/*** bindtouchstart */bindTouchStart: function (e) {this. distanceList = [0, 0] // returns 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 the native PAGE event this. page = curPage. resizePicModal = this return this} module. exports = {ResizePicModal}

Business page wxml: Introduce custom control templates

<View class = "flex-wrap flex-pic"> <view class = "picList"> <image wx: for = "{item. imglist }}" wx: for-item = "itemImg" wx: key = "* this" id = "{'rfnd _ '+ index}" bindload = "imageOnload" src = "{itemImg}" bindtap = "showResizeModal" data -src = "{itemImg }}"> </image> </view> <! -- Zoom --> <view wx: if = "{isCheckDtl}"> <import src = "/components/resizePicModal. wxml "/> <template is =" resizePic "data =" {img} "> </template> </view>

Business page js, reference js file, instantiate resizePicModal

Var that var resizePicModal ={} var app = getApp () var resizePicModalService = require ('.. /.. /components/resizePicModal. js')/*** Life Cycle function -- listens to page loading */onLoad: function (options) {that = this 8 resizePicModal = new resizePicModalService. resizePicModal ()}

Summary

The above is the mini-app movable view mobile image and dual-finger scaling instance Code introduced to you. I hope it will help you. If you have any questions, please leave a message for me, the editor will reply to you in a timely manner. Thank you very much for your support for the help House website!