欢迎来到258分享网,纯净的网络源码分享基地!

258资源分享网

全部作品
全部作品
网站源码
微信源码
素材特效
源码插件
视频教程
建站学院
热门搜索: 织梦  农业种植  农业  安全设置  官方
258资源分享 > 建站学院 > 微信开发 > 小程序scroll-view中,image组件出现滚轴

推荐下载

HTML5响应式自适应网咯设计

2020-05-12   浏览:733

高端HTML5响应式企业通用网

2020-05-06   浏览:513

html5响应式外贸网站英文版

2020-05-08   浏览:503

HTML5自适应律师工作室类网

2020-04-04   浏览:494

HTML5影视传媒文化公司类网

2020-05-12   浏览:489

小程序scroll-view中,image组件出现滚轴

发布时间:2020-11-26  

这次讲到是在scroll-view中的image,暂时不写scroll-view了,我自己也对它了解甚少,有其他博主肯定写得比我这个新手好。 
这次出现在我写的pixiv的小程序(依旧附上github地址:github-pixiv)中的问题是,图片出现了滚动轴,而且横轴纵轴都有。如图:

小程序scroll-view中,image组件出现滚轴

和在《微信小程序 image组件的mode属性 以及 图片出现横向滚动轴》中图片出现滚动轴的原因一样,都是因为设置了固定的图片的大小,以至于图片真正的大小是这样的:

小程序scroll-view中,image组件出现滚轴

所以(自以为是的┑( ̄Д  ̄)┍)就去给图片设置了width:100%

小程序scroll-view中,image组件出现滚轴

发觉高度也不对,还存在着纵滚动轴,于是去设置height:100%

小程序scroll-view中,image组件出现滚轴

但是还是存在着纵向的滚动轴。这我就一脸懵逼了。。[黑人问号???]

尽管没能明白具体原因,但是被我(假的多年开发经验)一试 ,问题在image设置的display:inline-block; 被我改成display:block倒也起作用了。 
(正好对比一下在前面提到的mode取值中mode=”aspectToFill”和mode=”aspectFill”的区别能在这里很好地体现出来图片的问题)

mode取值 图片
mode=”aspectToFill”(就是图片被压缩得挺难看的)  

小程序scroll-view中,image组件出现滚轴

 
mode=”aspectFill”(这个的图片就好看很多)  

小程序scroll-view中,image组件出现滚轴

 

至于为什么image的display属性是一开始就被为inline-block呢,找到inline-block的解释是(链接:block,inline和inline-block概念和区别)

display:inline-block 
简单来说就是将对象呈现为inline对象,但是对象的内容作为block对象呈现。之后的内联对象会被排列在同一行内。比如我们可以给一个link(a元素)inline-block属性值,使其既具有block的宽度高度特性又具有inline的同行特性。

也就是说,inline-block只是为了让image拥有block的宽高,又能和inline一样并排同行。img标签在css中的设定是block元素,image组件在微信小程序的设定是inline-block元素。 
至于为什么image被我改成了display为block之后还是能并排呢?是因为包裹着这个image组件的父组件view的class就设定了这个父组件是display:inline-block,所以还能一排展现。(如图,父元素是display:inline-block) 

小程序scroll-view中,image组件出现滚轴

然后问题来啦!! 然后又是试试试
1、如果设置image的display为inline会怎样?(仍然保留width:100%和height:100%)   1、对于设置image的display为inline(仍然保留width:100%和height:100%),不会怎么样,和设置display为block(仍然保留width:100%和height:100%)表现一样。
inline对宽度的定义是,其宽度随元素的内容而变化。
 
2、设置image的display为block,去掉width:100%和height:100%会怎样   2、设置为block的image,没有了width:100%和height:100%,而是用320和240,就会出现滚轴(而且无论是横轴还是纵轴都出现!!搞事情太激动!!)  
3、设置image的display为inline,去掉width:100%和height:100%会怎样   3、不会怎么样,因为本身image的宽高就是320和240