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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/539830.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

学徒学计算机,那个有能力的高人愿意收我做学徒啊,我是学计算机的

类似问题答案我学的是计算机专业,南京有那些学校招这个专业啊?跟随 已跟随 取消 确定 你是说去学习还是去工作? 如果工作,现在很多对学位有一定要求,一般都要本科以上; 如果是学习,那也得看你自…

Linux磁盘分区及要求

一、分区 1、磁盘分区有主分区,扩展分区和逻辑分区之分。一块磁盘最多有4个主分区,其中一个主分区的位置可以用一个扩展分区替换,在这个扩展分区内可以划分多个逻辑分区。 2、一块磁盘最多只能有一个扩展分区,扩展分区不能直接使…

二分查找和二叉查找树

2019独角兽企业重金招聘Python工程师标准>>> 1 二分查找 算法思想: 二分查找要求元素排列有序。首先,假设表中元素是按升序排列,将数组中间位置的元素与查找关键字比较,如果两者相等,则查找成功&#xff1…

springboot判断有没有库_Springboot 使用JPA @Query 注解 查询语句条件 有可能为空,Oracle数据库...

网上查了很多资料都是下面的方法,但是不适用于OracleQuery(value "select * from xxx where if(?1 !,x1?1,11) and if(?2 !,x2?2,11)" "and if(?3 !,x3?3,11) ",nativeQuery true)List find(String X1,String X2,String X3);——————————…

台式计算机技术方案,2017年4月自考02316计算机应用技术真题及答案

本文提供的是2017年4月自考02316计算机应用技术真题及答案,真题不仅能帮助考生复习巩固学到的知识,还能让考生了解以往考试难易程度,真正掌握一套真题那么考试也不用担心了。要考试的你一定要多多练习啊。2017 年 4 月高等教育自学考试全国统…

Linux磁盘编号

一、IDE接口磁盘 Linux的编码规则是 /dev/hd* -------------------------------hda 第一块盘 -------------------------------------------hda1 第一分区,hda2 第二分区,hda3 第三分区..... -------------------------------hdb 第二块盘 …

Linux挂载点和文件系统类型介绍

一、挂载点 Mount Point 这是Linux下访问磁盘分区的入口,即如果要往分区里写入数据,就必须通过/boot入口来写入,这一点和windows是不同的,因为在安装Linux时,Mount Point项填写 /boot二、文件系统类型 1、ext2/3/4&…

pythonint函数的参数_向嵌入的Python函数传递两个参数(int和array)

我需要从我的模块中调用Python函数并为其设置两个参数:int和array。在现在我在调用这个函数的时候遇到了segfault,我不知道我做错了什么。有人能指出我的错误在哪里吗?在函数在我的Python模块中应用程序副本. 如果我从Python代码调用它&#…

理解lua中 . : self

文章目录[点击展开](?)[] 前言点号定义和调用冒号定义和冒号调用运行结果相互调用相互调用运行结果总结前言 在LUA中,经常可以看到:. self,今天在CSDN上看到一篇博客写的很清楚,转载过来 原文出处:http://blog.csdn.n…

适合初中文凭学的计算机技术,初中毕业学啥技术好 最吃香的手艺

很多初中毕业的初中生因为成绩不是很理想,不能上一所理想的高中,所以选择学一门技术,那么初中毕业学啥技术好呢,哪些手艺未来比较吃香呢,下面小编为大家分析一下初中毕业应该学什么手艺。初中毕业学哪些技术发展好汽修…

SecureCRT配置

一、下载 路径:http://www.pc6.com/softview/softview_24396.html 里面有破解教程 二、配置 1、选择仿真环境养眼的绿色字体黑色背景配置,选择 traditional option->Global options –>default session -> edit default settings -> 修改…

左室短轴切面_一文读懂心脏超声基本切面

一. 本文出现的英文简称二.超声心动图基本切面采用与心脏相互垂直的三个基本平面,主要观测心脏各房室腔内径、容积和室壁厚度及其相关解剖结构运动状态、功能等。检查中探头最常放置的位置包括心底部、心尖部、剑突下,锁骨/胸骨上窝等。心脏超声检查中探…

怎么用计算机弹c哩c哩,计算器音乐c哩c哩乐谱 | 手游网游页游攻略大全

发布时间:2016-06-29铲子骑士乐谱有什么用 铲子骑士乐谱卖不了怎么办.不少铲子骑士玩家收集了一些乐谱,那么这些乐谱功能是什么呢?下面99单机网小编给大家介绍铲子骑士乐谱有什么用 铲子骑士乐谱卖不了怎么办. 乐谱可以卖钱,还可以更换游戏中的音乐 ...标签&#x…

Windows 7 资源管理器搜索Channel 9 视频

在Windows 7 中Federated Search 可以通过OpenSearch 协议访问到远程数据资源,也就意味着用户可以使用资源管理器(Windows Explorer)搜索并浏览远程数据。本篇我们将制作一个搜索连接器(Search Connector)查找Channel …

python django flask介绍_django和flask哪个值得研究学习

对于初学者来说,找到一个好的框架来学习或者项目开发都是非常有必要的,而当你有一定开发经验后,你应该选择适合当前业务需要的框架。我这里并不想探讨哪个框架好哪个不好,这个永恒的话题就跟探讨“世界上哪种编程语言最屌”是一样…

sts html视图编辑器,免费的HTML可视化编辑器HBuilder前端开发编辑器 | 老疯子

互联网上几款比较热门的编辑器Dreamweaver、Notepad、Sublime Text、Vim、Emacs等,这些或许你用过其中之一或许听说过它们。这些都是国外人员开发的有些甚至被公认为是最受专业程序员喜爱的代码编辑器(Vim和Emacs)。都是国外的,那国内的呢?当…

css层叠样式初学

一、css简介 1、层叠样式表:叠加效果,不同css对同一html修饰,冲突部分,优先级高作用,不冲突部分,共同作用 2、css作用 (1)修饰html     (2)替代了标签自身的颜色,字号等属性,提高…

sum(x) over( partition by y ORDER BY z ) 分析

参考的博文出处:http://www.cnblogs.com/luhe/p/4155612.html,对博文进行了修改新增,修改了错误的地方 之前用过row_number(),rank()等排序与over( partition by ... ORDER BY ...),这两个比较好理解: 先分组&#xff…

sqlserver 日期与字符串之间的转换

字符转换为日期时,Style的使用 --1. Style101时,表示日期字符串为:mm/dd/yyyy格式SELECT CONVERT(datetime,11/1/2003,101)--结果:2003-11-01 00:00:00.000 --2. Style101时,表示日期字符串为:dd/mm/yyyy格式SELECT CONVERT(datetime,11/1/2003,103)--结果:2003-01-11 00:00:00…

idea数据库反向生成实体类_IntelliJ IDEA 的数据库管理工具实在太方便了

1. 前言对于一个有软件洁癖的人,能用现有的软件解决问题的绝不安装新的软件。Java后端开发主要跟数据库打交道,所以数据库图形化界面(GUI)是少不了的。通常图形化操作关系型数据库(RMDBS)大多数人会选择Nav…