likes
comments
collection
share

小程序完成后的自我总结(一)

作者站长头像
站长
· 阅读数 28

小程序中尺寸的设置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>