这次讲到是在scroll-view中的image,暂时不写scroll-view了,我自己也对它了解甚少,有其他博主肯定写得比我这个新手好。
这次出现在我写的pixiv的小程序(依旧附上github地址:github-pixiv)中的问题是,图片出现了滚动轴,而且横轴纵轴都有。如图:
和在《微信小程序 image组件的mode属性 以及 图片出现横向滚动轴》中图片出现滚动轴的原因一样,都是因为设置了固定的图片的大小,以至于图片真正的大小是这样的:
所以(自以为是的┑( ̄Д  ̄)┍)就去给图片设置了width:100%
发觉高度也不对,还存在着纵滚动轴,于是去设置height:100%
但是还是存在着纵向的滚动轴。这我就一脸懵逼了。。[黑人问号???]
尽管没能明白具体原因,但是被我(假的多年开发经验)一试 ,问题在image设置的display:inline-block; 被我改成display:block倒也起作用了。
(正好对比一下在前面提到的mode取值中mode=”aspectToFill”和mode=”aspectFill”的区别能在这里很好地体现出来图片的问题)
至于为什么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)