小程序之页面布局

这一生的挚爱 提交于 2020-02-24 04:24:31

新人小白通过几天的视频学习,上手操作了一下小程序内的页面布局
成果如图:
在这里插入(片描述

在这里插入图片描述(图片来源于bilibili网页,权侵删)
主要用到的标签有:page,view,text,swiper,image,swiper-item,navigationBarTitleText等

文字前的空格代码如下:
在这里插入图片描述
轮播图代码:
在这里插入图片描述
注:autoplay indicator-dots circular等属性在设置“true”的时候直接写属性名称也可以

图片上设置文字样式的代码:
在这里插入图片描述
其他就是简单的排版布局和样式设置,具体在wxss里设置,注意留白和水平位置和对齐方式
在这里插入图片描述
上图两张图片的位置效果,需要相对位置和绝对位置共同作用;在设置其他需要注意图片位置的样式时,absolute和relative也都会一起用到。
如果想要设置字体需要去查阅在wxss中正确的表示想要字体的代码表示。
另外,图片的设置如果height无法改变图片高度,可以加mode属性搭配height去调整到自己满意的效果。
其他标签的基本属性可以查阅微信小程序开放文档。
如有错误请予以指正。

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!