uni-app 微信小程序-放大缩小效果以及抖动解决办法

最新推荐文章于 2025-08-01 16:55:51 发布
最新推荐文章于 2025-08-01 16:55:51 发布
阅读量5k 收藏 1
点赞数
CC 4.0 BY-SA版权
分类专栏： uni-app 小程序
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_44943268/article/details/90371006
博客讲述了尝试通过改变元素宽高实现放大缩小，却出现抖动问题，后改用transform:scale(1)，将倍数设为1.1倍，完美解决了该问题，体现了不同缩放方法的效果差异。

之前想着改变元素的宽高，来实现放大缩小，结果会出现一个抖动。后来换成transform:scale(1),  原始倍数，放大1.1倍，完美结局问题。

uni-app - 实现用户点击图像放大预览功能 / 支持左右滑动与手指手势放大缩小图片（支持单图与多图、实现手机查看大图全屏预览功能），类似微信查看图片的效果，支持 App、H5、小程序等全端兼容！
🏆 前端领域优质创作者
10-13 9541
uniapp中app安卓苹果端、小程序端、H5端页面中有多个图片需要预览,且需要左右滑动，uni-app实现滑动查看大图功能，图片放大缩小预览,并支持图片拖动附效果图，点击预览图片(包括多张左右滑动查看)，uni.previewImage官方文档，uni-app微信小程序图片放大预览带有图片描述，在UNI-APP中怎么实现点击图片后放大预览？uni-appH5怎么点击图片后像微信一样放大图片，还能双指缩放并保存图片，点击图片放大预览，多图放大预览htmljs，uniapp中使用scroll-view实
uniapp实现自定义图片预览手势缩放滑动下一页等(精简版,原生微信小程序同理)
qq_41956361的博客
05-06 1134
uniapp实现自定义图片预览手势缩放滑动下一页等(精简版,原生微信小程序同理)
基于uni-app小程序轮播图中间变大切换手机震动效果
酸狗的博客
12-13 4554
酸狗先带你看下效果图： 直接看代码： WXML： <template> <view> <view class=""> <!-- 背景附加高斯模糊 --> <image :src="gbImage" mode="widthFix" class="GaussianBlur"></image> </view> <!-- swiper轮播图 --> <swiper class="s
uni-app 转微信小程序 · 避坑与实战全记录
最新发布
2501_92872533的博客
08-01 1264
独立分包”就像独立 App，启动快但自给自足；普通分包像插件，启动慢但可共享主包代码。
uniapp网页缩放，适配手机和PC
qq_43024468的博客
03-20 1752
【代码】uniapp网页缩放，适配手机和PC。
uniapp开发app移动端显示html内容可放大缩小
qq_34434962的博客
04-30 670
【代码】uniapp开发app移动端显示html内容可放大缩小。
Uni-app 小程序 App 的广告变现之路：Banner 信息流广告
热门推荐
07-24 2万+
上一篇（）为各位实用uni-app的开发者介绍了官方推出的uni-ads的广告插件，但是只简单介绍了uni-ads中的广告类型，之后的系列就为大家介绍不同的应用广告类型，和插件代码。Banner或信息流广告展现场景非常灵活，常见的展现场景为文章顶部，详情页面顶部，第一屏中部等。建议信息流广告不要放置在底部信息流广告（或者Banner）算是App和小程序中最常见的广告。一般出现在文章的顶部或者底部，详情页面的顶部、还有信息流第一屏的中部等。不过从广告效果来说，底部的信息流广告效果比较差。...
uni-app 开发
hujian66的博客
04-06 344
uni-app 开发/学习 笔记
【uniapp】微信小程序使用定时器实现一个简单的防抖节流
ONLYSRY的博客
07-22 1007
微信小程序获取input框以及一个简单的防抖节流
uni-app+uview自定义导航栏，页面切换时会出现底部导航栏抖动问题。
weixin_45655275的博客
05-31 5346
uni-app+uview自定义导航栏，页面切换时会出现底部导航栏抖动问题。 提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档 文章目录前言一、怎么自定义导航栏二、怎么解决自定义导航栏抖动问题。总结 前言 提示：这里可以添加本文要记录的大概内容：我们在使用uni-app的开发移动端或者小程序时，有时候会通过权限去控制底部导航栏，这就需要我们去自定义导航栏，动态赋值。原生的好像不支持，使用uview或者其他框架进行自定义就会出现切换界面导航栏抖动问题。 例如：随着人工智能的不断发展，机器
uniapp 使用webview对vue的page进行缩小放大功能实现(完整版)
a1231233434453的博客
11-14 3526
uniapp 使用webview对vue的page进行缩小放大功能实现(完整版)
uni-app 利用canvas进行画框，移动框，放大缩小并删除，目前支持小程序,h5，其他没测试过
06-01
uni-app 利用canvas进行画框，移动框，放大缩小并删除，目前支持小程序,h5，其他没测试过
uni-app图片 设置浏览功能 实现双指放大缩小 拖动移动
qq_42822054的博客
03-02 5391
首先，点击触发图片浏览界面 在浏览界面去实现图片移动和放缩 图片设置双指放大缩小这个功能相对来说比较简单的，是用于官方文档的路径(组件->视图容器->movable-area)，movable-area可以做双指放大缩小，并且放大的同时可以左右移动图片(页面)，至于怎么做呢？ 用HBuilder X编辑器创建个uni-app项目 html代码 <template> <view> <view class="uni-paddin.
Uniapp 视图容器 随机拖拽滑动 放大缩小 movable-view movable-area
特创数字
09-11 840
可移动的视图容器，在页面中可以拖拽滑动或双指缩放。 movable-view必须在movable-area组件中，并且必须是直接子节点，否则不能移动。
uniapp笔记——App端web-view内嵌网页可以缩放
weixin_44792197的博客
04-28 4179
每个vue页面，其实都是一个webview，而vue页面里的web-view组件，其实是webview里的一个子webview。这个子webview被append到父webview上。我是利用窗口样式属性scalable为true重新设这个web-view组件的样式，来实现嵌入网页可以缩放。App端的webview是非常强大的，可以更灵活的控制和拥有更丰富的API。scalable: (Boolean 类型 )窗口是否可缩放。: 设置Webview窗口的样式。) 必选 要设置的窗口样式。
微信小程序图片抖动
Bright2017的博客
03-29 868
<view class='game_point_me {{isDoudong?"doudong":""}}' bindtap='pointMe'></view> @keyframes seconddiv{ 0% {transform: scale(1.4,1.4);} 10% {transform: scale(1,1);} 25% {transform: scale(1.2,1.2);} 50% {transform: scale(1,1);} 70% {transform:.
关于使用uniapp在小程序中预览pdf文件可手势缩放的至简方案
VastWu的博客
07-29 3094
写这篇文章记录一下开发过程中遇到的一个pdf的预览问题。坑况是这样的，刚开始的需求是，要在线预览后台传过来的pdf格式流文件。于是上网上找了许多种方案，其中包括pdfobject、pdfjs、vue-pdf，最终采取了pdf.js的形式达到了预期效果。但是后面又加了需求，需要能够分享以及手指缩放当前pdf。前者在小程序特别好实现，后者着实让我头疼。怎么个头疼法，一起来看看
uniapp使用movable-view滑动视图容器出现抖动回弹问题
LSFonline111的博客
01-25 1380
/ this.list[0].value = e.detail.y //不直接赋值给y轴,.出现抖动和回弹是因为一有滑动就对x或y进行实时赋值所导致的，不赋值也是可以滑动的，所有可以多写一个不和x或y直接联系的值。myval: 0,//需要显示的值。value: 120,//y轴的值。//获取e的值，处理成需要显示的值。
用uniapp写的H5网页中svg的缩放和拖动
qq_69692573的博客
03-30 1029
先给svg加一个id=“svg” 加两个事件@touchmove="move" @touchend="end"然后获取两个触点的坐标，并计算出两个坐标x，y的差值，最后利用差值求出手指滑动的长度scale。这里this.width和this.height就是svg的宽度和高度，直接修改就能缩放。这时将第一次的scale和第二次的进行对比，如果第一次的比第二次的长 那就是缩小。这里使用的到的原理就是通过两个手指张开或缩小的距离等比缩放svg的宽高。width和height的初始值 通过onLoad获取。
uni-app——uniapp 中使用swiper轮播以及解决自动，手动切换页面抖动问题
06-12
- 微信小程序需开启 `enhanced` 属性强化性能： ```html <swiper enhanced>... ``` - 升级框架至最新版（HBuilderX ≥ 3.4.18）修复已知问题。 > **验证效果**：在真机调试中测试快速切换，观察抖动是否消失...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值