微信小程序之图片处理(居中、铺满屏幕)附源程序
图片显示是小程序设计必须要经过的步骤,本人看到网上教学有限,现整理出自己设计过程中出现的问题,应该可以解决你遇到的问题。 用最后给的完整代码,按照我的步骤一定能调试出来,不行再。 先给用到的代码以及效果图: 先给home.wxml程序: <pre class="has">
<pre class="has"> <p style="text-indent:50px;"> <img alt="" class="has" height="504" src="https://www.52php.cn/res/2019/01-02/09/89362b2d086815f5f828330dfb63d8d1.jpg" width="707"> <p style="text-indent:50px;">上面设置的图片尺寸,仅仅是为了方便看到实际的效果。
<pre class="has"> } <p style="text-indent:50px;"><img alt="" class="has" height="341" src="https://www.52php.cn/res/2019/01-02/09/7b8bd91e38421b390a6b1e3f9d4ef44a.jpg" width="192"><img alt="" class="has" height="334" src="https://www.52php.cn/res/2019/01-02/09/b713a0a4e47b080063b424b356f15a28.jpg" width="187"><img alt="" class="has" height="335" src="https://www.52php.cn/res/2019/01-02/09/794247881f39e7154dd1961cca514041.jpg" width="190"> <p style="text-indent:50px;">? 上图的height值分别为:?200px ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?400px ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?600px 前两种都不适用全部型号手机,因为手机屏幕尺寸不固定。 但是,对于设计图片位置很有帮助。
代码: <pre class="has"> } 看效果:
home.wxml <pre class="has"> home.wxss <pre class="has"> }
单独讲铺满屏幕,主要用到mode='widthFix' 具体加在的程序段是.wxml: <pre class="has"> 以及.wxss的改变: <pre class="has"> 换了一张图做演示: 看看不加widthFix的效果图: 所以还是很有用的。 这里由于是底部tab窗口,所以没有显示完整屏幕覆盖的图。 可以设计启动画面,当然截取合适比例的图会影响实际显示效果,还有就是背景颜色与图片颜色的不同需要你调试时候注意一下。 转载请联系: (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |