如何通过手势实现微信小程序放大缩小

编辑：小飞燕发布时间：2021-04-04 14:05:05

导语本文整理了全网深受用户关注的个如何通过手势实现微信小程序放大缩小经验知识，可以帮助您全面了解代理怎么做，小白也能成为高手，跟随小编一起来看一看吧！

使用小程序时，由于开发者的原因，有时小程序页面上的图片或字体太小，看不清楚，需要调整小程序页面上微信小程序的放大缩小。具体放大缩小怎么调整？，小编将解释如何通过手势放大和缩小微信小程序。

大家都很熟悉像两指放大app这样的手势，我们的目标就是在小程序中达到这种效果。仔细研究了微信小程序的所有小程序事件后，小编发现通过touchmove事件可以实现两指缩放。

这项技术的核心思想是根据两个手指相对距离的变化来放大或缩小画面。所以，只要能知道两个手指相对距离的变化，并对画面进行动态缩放，就能达到想要的功能。手指触摸屏幕并开始移动后，会在相应的小程序组件上以16ms左右的速度(屏幕渲染频率)触发touchmove事件，手指离开屏幕后触发touchend事件。包含在触摸移动事件中的事件对象具有触摸属性，该属性是当前停留在屏幕上的触摸点信息的数组。

小程序加载

触摸点信息包括标识符、页面/页面、客户端/客户端。clientx/clienty可以用来确定手指在屏幕上的位置。x move=e . touchs[1]。client x-e . touchs[0]。clientxymove=e.touches[1]。clienti-e . touchs[0]。客户关系；distance=math . sqrt(x move x move y move)；

距离是两个手指之间的距离。保存该距离，并在下次触发触摸移动时再次计算距离。距离差(新距离-旧距离)是两个触摸移动触发器之间两个手指之间相对距离的变化值。

当这个值为正时，表示两个手指之间的距离在增加，即需要放大画面，否则需要缩小画面。接下来，我们需要确定一个规则，将距离的变化值与图片放大或缩小的变化率相关联。我们将图片的正常大小设置为基准值，即基本宽度和基本高度。这幅画的放大倍数是按比例的。刻度的初始值和比较小值为1，比较大值可根据需要设定。经过多次实验，工程师艾凡儿确定了一个公式：new scale=oldscale 0.005 * distance diff

微信小程序商店源码

这个公式中的0.005是图片的比例尺。在实际测量中，使用0.005的值可以获得更好的缩放体验。通过以上步骤，在touchmove事件绑定到图片后，我们可以计算每次触发touchmove时新图片的放大比例。也就是说，每次触发touchmove，就可以得到一组放大的图片的高度和宽度值：scalewidth(scale basewidth)和scaleheight(scalebaseheight)。您可以通过以下方式动态更改图片的高度和宽度

图像缩放后，需要一个容器来存储图像，使用view组件来包裹图像，设置overflow:scroll，可以自由缩放和浏览图像。但是微信小程序中有一个更合适的组件：scroll-view，将scroll-x和scroll-y设置为true，放大后在图片间滑动时有更好的浏览体验。但是当前版本(0.10.102800)的滚动视图组件在渲染上还是有bug，偶尔会出现界面闪烁的情况。

然而，当用两个手指缩放滚动视图中存在的图片时，很容易触发此错误。暂时只能等微信来解决这个问题，或者放弃滚动查看，也就是放弃更好的滑动浏览效果，用applet view来排版组件。

小程序卡片制作