
微信小程序布局
ES-Lad
有程序定制需求的伙伴请按照昵称搜索v联系。
展开
-
微信小程序中view容器用flex-wrap排列换行后产生固定高度的坑
今天开发小程序的时候用到了flex-wrap来让一行放两个容器,放满之后自动排列到下一行,但是换行之后发现上边距会有问题,如下图所示:margin-top设置的2%,但是只有最上面那行是真正的2%距离,下面的都是不对的距离,而且会随着本身的高度变化而变化,经过多方查找原因发现是换行之后有固定间距的原因,只要在父容器加上align-content: flex-start;就可以了:参考文章:display:flex; flex-wrap:wrap后,元素上下有边距...原创 2021-07-13 21:30:27 · 2346 阅读 · 1 评论 -
微信小程序中设置背景图片的小坑
微信小程序设置背景图片有好几种方法,可以在样式中用background-image设置,也可以直接在view容器中设置,今天我用了后面这种方法去设置背景图,然后发现了一些小坑,在这写出来提醒一下。遇到的问题主要是在前面设置背景图image的样式的时候没有定义它自己的类选择器,而是沿用了父容器的类选择器,导致后面页面内容里的图片不受其父容器控制,直接变成了跟背景图一样的样式,如下图:tbg.png是用到的页面的背景图,eg1.png是用到的页面内容里的图:把eg1的图放进去,本来是要出现在空白盒子处的原创 2021-07-13 21:12:29 · 1494 阅读 · 0 评论 -
微信小程序中<text>标签无法使用margin控制边距以及无法调整字体大小问题
最近开发微信小程序的时候发现里面的标签中的内容并不好控制包括边距以及大小问题。原创 2021-07-09 20:14:11 · 5086 阅读 · 1 评论 -
微信小程序开发遇到的问题之———模板相关:template中的样式设置
我们在进行微信小程序页面编写的时候,对于列表页这样需要重复使用某个结构的,一般会将其放入模板之中,有一定的方便之处。但是今天使用模板的过程中发现了点问题。首先,在模板中的text标签上面定义类名,然后在样式中去写它的样式毫无作用,并不会生效,如图:但是如果在text标签里面直接写样式就有效果,看得出字体变小了,并且颜色变浅:如果再将text标签改为view标签,这时候就跟平常一样的了,可以在wxss中定义相关的样式:今日遇到该问题,特在此写下,希望能提示下看到此文章的人,尽量不要踩坑。.原创 2021-03-24 22:21:43 · 905 阅读 · 0 评论 -
微信小程序开发遇到的小问题:swiper、swiper-item标签样式设置与text标签中长文本隐藏
今天又进行了微信小程序页面的编写,也就又遇到了一些新的小问题、小细节。1、首先,今天的页面涉及到了轮播图,其中发现的一个需要注意的细节是设置高度样式这些需要在swiper标签上设置,如果在swiper-item上面设置可能会不好使,因为通过微信文档的官方介绍知道它存放于swiper容器中,宽高自动100%,下面是我编程过程中的情况通过可视化工具可以知道设置了view容器和swiper-item均为680rpx,但是图片不能完全显示,下面将swiper-item换成swiper,就可以了,图片完全显原创 2021-03-23 17:53:50 · 1379 阅读 · 2 评论 -
微信小程序开发页面高度采用百分比自适应编程遇到的问题:page {height:100%}
在之前看到过一些文章写如何在微信页面开发中用百分比去实现自适应功能,于是在今天微信页面编写过程中采用了该方法,即使用 page {height:100%};但是遇到了一些问题:1、设置了高度为百分之百之后有部分内容被顶到顶部的导航栏里面去了,因此设置margin-top,把它移了下来,如图:2、但是接着写下去后,又有了新问题:...原创 2021-03-20 21:34:12 · 2097 阅读 · 0 评论