- 重要 | iPad 端小程序布局适配问题
目前项目中都是以 rpx 作为字体大小单位来的,然后这样在 iPad 上展示字就很大。 不止字体,很多东西在大屏上的布局都会变化,我认为微信在还未让开发者适配 iPad 端之前就开放使用是影响用户体验的。希望官方能够支持让开发者上传手机版小程序和 iPad 版小程序,就像 APP Store 一样
2018-08-17 - iPad胶囊、分辨率兼容问题?
[图片] 请看上图 图1:腾讯文档 图2:小程序demo 想请问一下,为什么腾讯文档或者金山文档的小程序可以适配ipad分辨率,像胶囊、菜单栏,就可以正常的显示正常大小,而自己开发的不行,请问是不是哪里需要设置参数?
2023-08-04 - 小程序如何同时适配手机端和iPad端?
在开发中接到需求:让小程序同时适配手机端和iPad端,百度了好久都找不解决办法,望大神指点!
2020-10-12 - iPad版本的微信小程序缩水
昨天用iPad打开微信小程序时小程序还是全屏显示,但刚刚使用iPad小程序时突然发现它打开后的模式和手机版的大小一样[图片]
2020-08-19 - 请问小程序上全部使用rpx在ipad等大屏上过大怎么解决?
在小程序里全部使用官方推荐的rpx,在手机上效果不错,但是在ipad等大屏幕上,文字和边距等都变的异常的大,请问在ipad上面有什么最佳的适配方案么?
2021-10-28 - rpx在手机与iPad的适配问题?
微信小程序字体设置rpx,在手机上是可以的但是在iPad上就过大,设置成px两者上还都说的过去,不知大神有没有更好的解决办法
2020-01-17 - 大图预览下添加图片描述,到底该怎么办呢?
前言 产品说什么也要在大图预览下加图片描述,我说微信小程序不支持,wx.previewImage和wx.previewMedia都是我们自己改不了的。但是无奈非得要,那我说:加可以,但是做不到像wx.preview那样完美,右上角会有胶囊按钮,其它体验也会也些差距。为了加这个图片描述,我是抽业余时间搞了好多天才搞出来,真是。。。 示例动图 [图片] 实现思路和方案: 将navigationBar隐藏掉,然后黑色背景一搞,左右切换使用swiper。因为考虑到swiper加载item太多会有渲染问题,我们在这里使用之前写的库swiper-limited-load。图片使用movable-view来实现双指缩放和移动功能,此外图片还应该有双击缩放,单击退出等功能视频使用video组件,要考虑到只有滑动到当前item,才去渲染当前item的video组件,要不然出现左右两个video也跟着一起播放的情况就尴尬了。视频要实现宽度铺满,按宽高比例显示,需要知道视频的宽高比,这里可以用wx.getImageInfo来获取视频封面图片的信息(网络图片需要配置download域名),或者如果你们的接口会返回视频的宽高信息,根据屏幕宽度,直接设置高度也行。总结 微信自带的wx.previewImage和wx.previewVideo其实已经挺好用了。就为了一个图片描述,我们自己造这么个轮子,得好几天时间,而且这个轮子还不如原来的好用。面对这种情况,这就看是要如何取舍了,是要开发效率,还是要用户体验。既然产品需要,那就硬刚吧。。。 项目地址:https://github.com/pengboboer/preview-media-desc 如果错误,欢迎指出。 如有新的需求也可以提出来,如果有时间的话,我会帮你们完善。 如果能帮到你们,记得给一个star,谢谢。
2020-09-24 - swiper可以判断划动方向吗?
swiper能不能加上,判断划动方向的功能
2018-09-12 - 请问怎么动态的来动态阻止swiper滑动?
页面里面有管理按钮,在管理状态下swiper不能左右滑动,取消管理状态后swiper恢复滑动(swiper里面有可以滚动的scroll-view标签以及可以点击的checkbox,在管理状态下都是可以触发滚动和点击的),请问应该怎么能够动态的控制swiper的滑动状态呢?
2020-06-30 - swiper 和 movable-view一起使用,缩放拖动图片,冲突,怎么解决?
双指缩放放大图片之后,拖动图片,swiper也生效,变成上一页下一页了 <swiper class="swiper" skip-hidden-item-layout current="{{current}}"> <block wx:for="{{groupList}}" wx:key="{{item.id}}"> <swiper-item> <movable-area class="swiper" scale-area> <movable-view class="swiper" direction="all" out-of-bounds scale scale-min="1" scale-max="4" scale-value="1" > <image lazy-load src="{{item.url}}" mode="aspectFit"></image> </movable-view> </movable-area> </swiper-item> </block> </swiper>
2019-10-10 - 微信小程序swiper放大缩小功能?
之前要用小程序实现一个页面的切换 并且页面可以放大缩小 我使用的swiper 最后使用movable-view勉强实现了放大缩小 希望小程序尽快完善微信小程序swiper的功能 像是swiper.js 4.0以上的版本那样 出一个 zoom 属性 可以放大和缩小 swiper-item
2019-09-16 - swiper里使用movable,缩放/拖动/切换图片
社区里有很多类似的场景:previewImage需要自定义,实现一个类似系统相册的功能。 需要左右滑动切换,所以用swiper;需要缩放,所以用movable;但是事件冲突,特别是当其他需求变得负责是,社区里其他方法似乎不太好用。 解决方案是: <swiper-item catchtouchmove="{{canSwiper?null:'stopTouchMove'}}" /> stopTouchMove是空函数,亲测有效。
2020-07-21 - 微信小程序答题页——swiper渲染优化及swiper分页实现
前言 swiper的加载太多问题,网上资料好像没有一个特别明确的,就拿这个答题页,来讲讲我的解决方案 这里实现了如下功能和细节: 保证swiper-item的数量固定,加载大量数据时,大大优化渲染效率记录上次的位置,页面初次加载不一定非得是第一页,可以是任何页答题卡选择某一index回来以后的数据替换,并去掉swiper切换动画,提升交互体验示例动图 [图片] 截图 [图片] [图片] 问题原因 当swiper-item数量很多的时候,会出现性能问题 我实现了一个答题小程序,在一次性加载100个swipe-item的时候,低端手机页面渲染时间达到了2000多ms 也就是说在进入答题页的时候,会卡顿2秒多去加载这100个swiper-item 思考问题 那我们能不能让他先加载一部分,然后滑动以后再去改变item的数据,让swiper一直保持一定量的swiper-item? 注意到官方文档有这么两个属性可以利用,我们可以开启衔接滑动,然后再bindchange方法中去修改data [图片] 1、保证swiper-item的数量固定,加载大量数据时,优化渲染效率 假设我们请求到的数据的为list,实际渲染的数据为swiperList 我们现在给他就固定3个swiper-item,前后滑动的时候去替换数据 正向滑动的时候去替换滑动后的下一页数据,反向滑动的时候去替换滑动后的上一页数据 当我们知道了要替换的条件,我们便可以去替换数据了 但是我们应该考虑到临界值的问题,如果当前页是list第一项和最后一项该怎么办,向左向右滑是不是得禁止啊 这边是判断没数据会让它再弹回去 2、记录上次的位置,页面初次加载不一定非得是第一页,可以是任何页 有很多时候,我们是从某一项直接进来的,比如说上次答题答到了第五题,我这次进来要直接做第六题 那么我们需要去初始化这个swiperList,让它当前页、上一页、下一页都有数据 3、答题卡选择某一index回来以后的数据替换,并去掉swiper切换动画,提升交互体验 从答题卡选择index,那就不仅仅是滑动上下页了,它可以跳转到任何页,所以也采用类似初始化swiperList的方法 swiper切换动画我这边是默认250ms,但是发现有时候从答题卡点击回来,你在答题卡点击的下一项不知道会从左还是从右滑过来 体验真的很差,一开始不知道怎么禁掉动画,其实在跳转到答题卡页的时候把duration设为0就可以了 然后在答题卡页的unload方法中恢复 关键点: 在固定3个swiper-item的同时,要保证我们可以有办法来替代微信自带swiper的current属性和change方法 swiper-limited-load使用方法及说明: 将components中的swiper-limited-load复制到您的项目中在需要的页面引用此组件,并且创建自己的自定义组件item-view在初始化数据时,为你的list的每一项指定index属性具体可以参照项目目录start-swiper-limited-load中的用法说明:其它属性和swiper无异,你们可以自己单独添加你们需要的属性总结 一开始很头疼,为什么微信小程序提供的这个swiper,没去考虑这方面 然后在网上和社区找也没有一个特别好的解决方案。 后来想想,遇到需求就静下来解决吧。 项目地址:https://github.com/pengboboer/swiper-limited-load 如果错误,欢迎指出。 如有新的需求也可以提出来,如果有时间的话,我会帮你们完善。 如果能帮到你们,记得给一个star,谢谢。 ---补充 有很多朋友在评论区提到了分页的需求,抽时间写了一个分页的Demo和大家分享一下。 还是以答题为例,比如我们一共有500条数据,一页20条,可能需要如下功能,乍一看不就加了个分页,挺简单的,其实实现起来挺麻烦的,下面说一下思路和一些需要特别注意的点: 1、从其他页面跳转到答题页时,不光只能默认在第一题,可以是任意一题,比如第80题。 跳转到任意一题,那么需要我们根据index算出该数据在第几页,然后需要请求该页数据,最后显示对应的index。我的思路更注重用户体验,不可能是上滑或者下滑才开始去请求数据,一定是要用户滑动前提前请求好数据。所以起码要保证左右两侧在初始化那一刻都有数据。如果此题和它的上一题下一题都在同一页,那么我们只需要请求一页数据(第15题,那么只需请求第1页数据)。如果此题和它的上一题或者下一题不在同一页,那么我们可能需要请求两页数据。(第20题,那么需要请求第1页和第2页数据) 2、左滑、右滑没数据时,都可以加载新数据。直到滑到第一题或者最后一题。 如果我们初始化时是第24题,那么我们左滑到第21题时,就应该去请求第一页的数据。那么用户在看完21题时,再滑到20题,可能就根本不会感知到通过网络请求了数据。但是如果用户此刻滑动特别快:滑到21题时请求了网络,请求还没成功,就又向左滑了。那么我们需要限制用户的滑动,给用户一个提示:数据正在加载中。 3、从答题卡点击任意一题可以跳转到相应的题目,并且左右滑动显示正常数据 比如我们初始化是跳转到了第80题,不一会点击答题卡又要跳转到200题,一会又跳转到150题。各种无序操作,你也不知道用户要往哪里点。 一开始是想着维护一个主list,点到哪道题往list中添加这道题所在的当页的数据,但是还得判断这一页或者左滑右滑请求新一页的数据得往list的哪个位置添加。这来回来去乱七八糟的判断就很麻烦了,很容易出bug。而且list长度太长了以后insert的性能也不好。 后来就去想,要不答题卡点击任意一题都清空旧的list,然后请求新的数据,左右滑动没数据了再请求新的数据呗。但是这样很浪费资源,并且用户体验也不好,用户已经从第1题答到第200题了,这时用户从答题卡选择了一个25题,还得重新请求网络。而且200道题的数据都没了,那再选个26题,再重新请求网络?网络有延时不说,还浪费资源。 最后转念一想,这时候就需要弄一个缓存了。所以最终的解决方法就出来了:我们维护一个map,在网络请求成功后,在map中保存对应页的数据,同时我们维护一个主list来显示对应的题目。当我们在答题卡选择某一题目,就清空list,然后判断map中有没有该页的数据,如果有就直接拿来,没有就再去网络请求。这个处理方式,写法相对来说简单,不需要乱七八糟的判断,也不浪费资源,用户体验也很不错。 总结 以上就是一些思路和要注意的地方。这个Demo断断续续花了好几天时间写出来的。可能我说的比较啰嗦比较细,只是想让需要用到这个分页Demo的同学能理解我是如何实现的。 如果觉得能帮到你,记得给一个star,谢谢。同时如果这个demo有bug或者你们有新想法,欢迎提出来。
2021-01-07 - 怎么实现轮播图可以双指放大和缩放?
要实现轮播图的双指放大和缩放功能,你可以按照以下步骤进行操作: 1.使用适当的轮播图组件:首先,选择一个支持手势交互的轮播图组件。在微信小程序中,可以使用一些开源的轮播图组件,如swiper组件。 2.开启双指手势事件监听:在页面的js文件中,为轮播图容器添加bindtouchstart、bindtouchmove和bindtouchend等手势事件监听函数。 3.监听手势事件:在对应的事件监听函数中,使用event.touches获取触摸点的信息,判断触摸点数量和手势动作。 4.实现缩放功能:当检测到两个触摸点时(可以通过event.touches.length判断),计算两个触摸点之间的距离变化,并根据变化的距离调整轮播图的尺寸。你可以通过设置scale CSS属性或者使用第三方库来实现缩放效果。 5.注意边界处理:在实现缩放功能时,需考虑边界情况,例如最小缩放比例和最大缩放比例的限制,以避免过度缩放或出现无法恢复的问题。 需要注意的是,具体实现方法可能因所选的轮播图组件和相关库而有所不同。你需要根据使用的组件和库的文档,结合具体的需求和逻辑,进行相应的实现和调整。 另外,为了提供更好的用户体验和性能,建议在实现缩放功能时对图片进行优化,如懒加载、图片压缩等,以减少资源消耗和页面加载时间。
2023-07-20 - 怎么实现轮播图可以双指放大和缩放?
类似微信朋友圈相册轮播和放大的功能怎么实现?目前是swiper+movable-area嵌套movable-view实现,但是一直有问题,movable-area在移动的时间就触发了swiper的滑动,请教大佬!
2023-07-19