小程序 - swiper除了左右切换还有上下滚动超出屏幕的内容

本来呢，我是有专门整理小程序恶心bug的文章的，每次只要添加汇总就好，

但是呢，鉴于这个问题的恶心程度，所以我把他单独拿出来说了。

——————————————--------------------------------------------------产品经理都说恶心的需求--------------------------------------------------————————————————————————

要知道，在小程序里边是有一个封装好的swiper组件，专门用于轮播图的切换，

正好最近遇到一个项目，模仿朋友圈图片九宫格，要点击小图弹窗跳出预览大图，需要大图左右切换，介于小程序的文档，我使用的是swiper组件轻松完美的实现了它。

但是，好景又不长，测试阶段上线倒数第二天，提出了个bug，有的用户会传超出屏幕长度的图片，需求是不影响正常左右切换的情况下，要让图片能够上下滑动显示完整。

我的天。。。

要知道，小程序里的swiper会在行间自动添加样式，swiper及他的御用子元素swiper-item都会被自动加上width和height的100%；所以我们在css中根本控制不了他的高度，更别提让他overflow-y:hidden；了。

刚好bug还是快下班提的，我就加班解决，受尽折磨。最后放弃了。对，我知道我再转身的时候，bug就会被解决了。所以我回家睡觉了。

虽然人走了，但是心还在公司啊！回家继续寻找解决办法。各种交流群里提问，找大神。最后都回一句这个需求是不是变态。。。

然后就自己想各种方案。。。

swiper和swiper-item会被默认加上100%的高度，所以想要实现overflow-y：scroll是不可能的额，

想想小程序的纵向滚动就只有scroll-view可以实现，我把scroll-view包住swiper不行，

毕竟每一个swiper-item都是独立的，有的长有的短，包一个是达不到要求的，就算能滚动，

但是别忘了前边说的：swiper和swiper-item会被默认加上100%的高度，所以还是不能滚的。

然后的然后，就是睡一觉吃一顿，bug迎刃而解了！

今天早上来了突然开窍了，把每一个swiper-item里边包一个scroll-view，再加上feed流中实现短图片垂直居中，长图片从上向下滚动的样式，最后效果就出来了：

后记：

项目上线的前几个小时，我们突然发现小程序是有类似朋友圈九宫格的图片API的，哈哈，又好笑又生气~

声明：

　　请尊重博客园原创精神，转载或使用图片请注明：

　　博主：xing.org1^

　　出处：http://www.cnblogs.com/padding1015/

转载于:https://www.cnblogs.com/padding1015/p/8044324.html

小程序 - swiper除了左右切换还有上下滚动超出屏幕的内容相关推荐

微信小程序 swiper 点击切换，左右滑动，自动滑动，源码下载
已解决不同页面不同高度已解决卡死问题 .wxml <view class="swiper-tab"> <view class="swiper-ta ...
绑定bindchange事件的微信小程序swiper闪烁，抖动问题解决，（将微信小程序切换到后台一段时间，再打开微信小程序，会出现疯狂循环轮播，造成抖动现象）
绑定bindchange事件的微信小程序swiper闪烁,抖动问题解决,(将微信小程序切换到后台一段时间,再打开微信小程序,会出现疯狂循环轮播,造成抖动现象) 参考文章: (1)绑定bindchang ...
小程序swiper切换闪屏问题
小程序swiper滑动闪屏问题在小程序开发过程中使用swiper做轮播图,发现当用户切换图片过快时会出现异常的闪屏现象,官方文档中描述了这个Bug & Tip: 在电脑上测试的时候没有问题 ...
关于微信小程序swiper的问题
关于小程序swiper的问题代码在官方示例上给swiper添加了current``bindchange``circular 添加了一个button``bindtap用于切换下一张 index.wx ...
小程序滑动点击切换中间大图两边小图
小程序滑动点击切换中间大图两边小图代码太老了已不建议阅读, 简单看下思路即可整体思路, 使用小程序API的animation动画和组件的canvas中的bindtouchstart.bind ...
微信小程序swiper高度自适应方法
小程序swiper高度自适应 data: {//图片hdimg: [],//是否采用衔接滑动circular: true,//是否显示画板指示点indicatorDots: false,//选中点的颜 ...
微信小程序-tab左右滑动切换
微信小程序-tab左右滑动切换一.简介 1.核心思想二.实现 1.wxml实现 2.js实现 3.wxss实现三.参考和总结四.优化 0.效果图 1.每个tab长度自适应 2.先前隔tab点击 ...
微信小程序实现抖音切换视频效果
微信小程序实现抖音切换视频效果思路: 使用微信小程序的swiper组件,使其竖向滑动分页加载,每次加载3个视频,当滑动到只剩1个视频时加载下一页问题: 加载多个视频时,多个视频会同时播放效果图 ...
微信小程序中标签页切换效果是怎么做出来的
于传统网页开发中的标签页切换效果不同的是,小程序的标签页切换更接近原生APP的交互体验!也就是可以通过左右滑动页面进行切换,类似于网页开发中的焦点图切换的效果. --这当然是通过微信小程序强大的组件和 ...

小程序 - swiper除了左右切换还有上下滚动超出屏幕的内容

小程序 - swiper除了左右切换还有上下滚动超出屏幕的内容相关推荐

最新文章

热门文章