小程序双指缩放问题记录

Vgplay
1,695 阅读4分钟

需求

开发使用的是uni-app去开发的小程序，然后使用了u-view2这个框架，接受一个富文本，富文本里面主要是表格，数据比较多，然后用户希望，表格完整显示，再支持用户双指缩放+放大了去移动

碰到问题

碰到这个问题，一开始想法是监听用户的手指移动事件就可以了，因为有@touchstart 和 @touchmove事件，然后手写出来，发现效果并不好，卡顿，应该是我写的问题。

查看文档发现了movable-area, movable-view 这两个，于是开始我的爬坑之旅

官方文档

1：movable-view缩放不是用户的手指中心
2：我配置了的movable-view的direction= 'all' 无法竖向滚动，好像只有放大了可以拖到

查看了微信社区，得到的答案就是还没有解决

image.png

最新的关于这个组件的这个问题，也是没有回复和解决办法。

解决方法

配合scroll-view来实现。

但其实我尝试了很多其他办法，其实还有一种办法是图片来实现，但用户需要改变数据，存储的又是富文本的表格数据，我去处理这个，相当于给我找事做，所以我只能继续优化。

一开始我的代码配置是（我的富文本内容很多大概是100kb~5mb的 都有不同数据，所以这个表格很长）

<movable-area :scale-area="true" class="area">
	<movable-view class="area-view" :scale="true" direction="horizontal" :scale-min="0.5" :scale-max="5"  @scale="scaleMove" :scale-value="scaleFactor" @click="dblclick">
	<scroll-view :scroll-y="true" style="height: 100vh;">
		<view class="child">
			<u-parse :content="content"></u-parse>
		</view>
			</scroll-view>
		</movable-view>
   </movable-area>

【area和view都是需要给宽高的被人默认是10，文档有说】

其实不添加scroll-view 就使用movable-area+ movable-view 已经可以让我这个富文本表格可以缩放和滚动，需要把movable-view的direction="horizontal" 这样。 但碰到问题是ios也就是苹果用户，出现了个无法拉到底部的问题，也就是放大后顶部明明还有数据但是无法啦下去的问题！然后缩放中心不是用户手指

但是添加了scroll-view 同时我去配置了child的css代码

.child {
    width: 200%;
    height: 100%;
    transform: scale(0.5);
    transform-origin: left top;
}

这样我发现中心是手指的中心了，但我碰到了问题，就是这个双指缩放，不是每一次都生效，后面感觉是scroll-view和movable-view冲突了把！应该。

再优化！

<scroll-view scroll-y :style="{'width': width, 'height': '100vh'}" >
            <movable-area :style="{'width': width, 'height': '100vh'}">
                    <movable-view :style="{'width': width, 'height': '100vh'}" :animation="false" @scale="scaleMove" 
                            direction="horizontal" :scale="true" :scale-min="1" :scale-max="5">
                            <view class="block" v-show="showBlock"></view>
                            <view class="child">
                                    <u-parse :content="content"></u-parse>
                            </view>
                    </movable-view>
            </movable-area>
    </scroll-view>

这就是我目前的办法！

我把scroll-view配置到了最外面，然后让宽为屏幕的宽度，使用 uni.getSystemInfoSync().windowWidth; 获取，然后高度100%，然后我发现效果都非常不错！解决了缩放中心是手指的，然后也可以去放大移动！不卡顿，

但是！！！！！

又发现，放大后无法滚动到顶部！！，顶部还有内容，但无法再滑上去了，我打印了 @scale="scaleMove" 里面获取的x 值发现， x已经为0了 所以无法拖动 为了解决这个问题

我在child 上再写一个block 块 给个固定高度，在用户缩放的时候显示， 然后这个时候，就不存在无法滚动到顶部了，内容都可以完整呈现出来

scaleMove(event) {
    let val = event.detail.scale
    this.showBlock = Math.round(val) !== 1;
}

但其实并不完美，因为添加了这个元素，缩放的中心在变化！莫名其妙 ~ ~ ，还有就是顶部有一个空白区域，希望有更好的解决办法 ~ ~

总结

先mark一下把，后面有更好的办法了，回来优化！

2025-12 更新解决办法

还是从图片入手，后台存储的数据富文本的使用htmlcanvas去分图上传，然后存储cdn图片url，然后在详情去批量渲染图片，因为图片不存在放大双指的问题

  <movable-area class="movable-area">
        <movable-view
            direction="all"
            :scale="true"
            :scale-min="1"
            :scale-max="5"
            :scale-value="1"
            class="movable-view"
        >
            <scroll-view 就可以完成效果了！非常舒服 scroll-y style="height: 100vh; width: 100vw">
                <image
                    :src="CONSTANTS.BASE_IMAGE_URL + value"
                    style="width: 100%; height: 100%; display: block"
                    v-for="value in source"
                    mode="widthFix"
                />

                <view v-if="source.length === 0" class="empty-container">
                    <wd-status-tip :image="emptyImage" tip="还未更新详情报价" />
                </view>
            </scroll-view>
        </movable-view>
    </movable-area>

.movable-area {
    width: 100vw;
    height: 100vh;
    .movable-view {
        width: 100vw;
        height: 100vh;
    }

    .empty-container {
        margin-top: 300rpx;
    }
}

在ios端，这样图片方法可能还会导致底部的一些内容被遮挡，可以放一个占位元素在最底部，这样就可以保证，内容图片都可以清晰处理。关于图片，建议保持一个尺寸去截，控制在500kb只有清晰度和效果是不错的，然后挂CDN速度也不会太慢。然后使用movable-view + scroll-view 就可以完成效果了！非常舒服

avatar
文章
阅读
粉丝