小程序 - 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/

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏令仔很忙

table合并单元格colspan和rowspan

最近要实现一个成绩分析的功能,最终是要呈现到Word中的,一开始想到的使用报表显示,但是得有单独的数据库表来存储这些数据,如果说项目是刚开始做的话,倒也好说,...

60010
来自专栏腾讯社交用户体验设计

玩转HTML5移动页面(动效篇)- 腾讯ISUX

55930
来自专栏琯琯博客

awesome-css-cn命名习惯和方式参考其他资源原文链接

CSS 资源列表,内容包括:CSS预处理器、框架、CSS结构、代码风格指南、命名习惯、播客、演讲视频、大网站的 CSS 开发经验等等。 预处理器 更快地编译 C...

48980
来自专栏Android机动车

Material Design 在 Android 中的应用

我刚来这个公司的时候,每个周三都会有分享会,主题自定,分享对象尽量是面向大众,一开始觉得不错,但是到后面发现分享的内容不是那么有营养,而且积极性不是很高,都是当...

11820
来自专栏大数据钻研

漫谈前端之路

前言 前端之路何其漫漫~ 说明:本篇文章原是写给学弟学妹的,但想来花的功夫确实不少,就把此篇文章当做自己的一个阶段性总结文章了,会保持长期更新。 HTM...

46980
来自专栏IT大咖说

移动端复杂运营页解决方案的探索和实践

摘要 如何成为一名优秀的切图工程师?百度资深研发工程师潘征与大家分享自己的工作心得。 ? ROLE移动端酷炫运营页 2014年开始,我在我们部门负责移动端酷炫运...

35470
来自专栏前端架构与工程

《微信小程序七日谈》- 第二天:你可能要抛弃原来的响应式开发思维

《微信小程序七日谈》系列文章: 本系列的文章并非初学教程,而是笔者在具体开发过程中遇到的问题以及部分解决方案。 上篇文章第一天:人生若只如初见简单记录了笔者初...

25580
来自专栏知晓程序

不用锤子手机也能 Big Bang!识字、分词,就用这款小程序

前不久,我在《懒得打字?这两款文字识别小程序,解放你的双手》一文中,推荐了两款「智能识别图文」小程序。

27410
来自专栏QQ会员技术团队的专栏

深刻理解 React (一) :JSX 和虚拟DOM

首先,我们来看看 React 在世界范围的热度趋势,下图是关键词“房价”和 “React” 在 Google Trends 上的搜索量对比,蓝色的是 React...

3.1K00
来自专栏腾讯社交用户体验设计

[ISUX转译]iOS 9人机界面指南(一)下篇:UI设计基础 - 腾讯ISUX

12320

扫码关注云+社区

领取腾讯云代金券