小程序中尺寸的设置 rpx 的应用多于 px 的应用
因为小程序的应用是在不同机型的手机上进行的,所以这个时候就不能应用固定大下的 px 单位,而是要应用具备响应式的 rpx 单位了。
而 rpx 与 px 的大小换算就是个问题了,通常状况下,咱们是在 iPhone6 的机型下进行程序的编辑,规定屏幕宽度为 750px,譬如 iphone6,屏幕宽度为 375px,共有 750 个物理像素,则 1rpx = 0.5px。其余机型的尺寸也是如此进行的。
设施 rpx 换算 px:屏幕宽度 /750,px 换算成 rpx:750/ 屏幕宽度;
flex 弹性布局的应用
在小程序的编辑过程中,弹性布局是必不可少的,它能够解决不少问题。
在应用弹性布局之前,首先要指明是弹性布局:display:flex。
几个罕用的 css 弹性布局设置:
swiper 轮播图的高度异样问题
当我在应用小程序所进步的 swiper 组件时,发现 swiper 的高度与它当中的 image 的高度是不统一的,这就导致了一个不好的景象,那就是轮播图的进度圆点呈现在了轮播图的上面,大大的升高了应用好感。
对此也有着所对应的解决办法,咱们能够动静的设置轮播的高度,而不是让 image 天然的去将其撑开。
这个时候就须要利用到内联款式了,首先咱们能够先去获取轮播图当中图片的高度,咱们能够利用小程序当中给咱们提供的 api,wx.createSelectorQuery() 会返回了一个对象实例,更多内容能够去小程序的开发文档进行查问。
这个时候咱们就会获取到图片的高度,而后就须要给 swiper 轮播图进行设置高度了:
<swiper style="{{height: imageHeight+'px'}}">... </swiper>