最新消息:20210917 已从crifan.com换到crifan.org

【整理】微信小程序工具调试UI界面时的坑

微信 crifan 608浏览 0评论
折腾:
【记录】小程序实现绘本查询的详情页
等期间,遇到一些小程序工具调试UI时候的坑。
1.当前看到的css只是当前page的css,不是(Chrome中那种)全部叠加后的的css
比如想要模拟Chrome中的页面:
#book_detail {
1.  padding-top: 20px;
2.  padding-left: var(--page_padding);
3.  padding-right: var(--page_padding);
}
其中左右padding都是15px
且如果去掉,则页面左右都顶格了:
而类似的配置,去加到小程序工具中去,结果页面显示出来的就没有左边padding的效果:
然后调试了半天:
最终才发现:
去掉
* {
 margin:0
}
就可以看到左边有个边距了:
由此才发现:
原来是(不知道哪里的)css:
* {
  margin:0
}
导致了后续很多页面,包括当前页面,的margin都是0了
所以,此处想要实现当前页面左边边距,则应该把padding该为margin:
/* padding-left: 15px;
padding-right: 15px; */
margin-left: 15px;
margin-right: 15px;
效果:
至此,最后也才发现,之前如果是padding的话,其实显示的布局是对的,是元素内部的padding,而不是元素外部的margin:
只不过的确:在右边css中没有显示margin的left和right,导致无法看出问题所在:
所以还是那句话:
  • 小程序开发工具中显示的页面的css:
    • 只是当前页面的自己的
      • 不包括父级各个元素的css
        • -》从而导致很多继承了父元素,父页面的css配置看不到
          • 导致页面布局不对
          • 而单单看当前页面的css参数很难发现错在哪里。。。
所以应对办法:
之后在调试当前页面,看css的时候,记得:
优先看左边的布局效果,而时刻要想到:右边的css设置,只是当前页面的css,不是compute后的,合并后的真实的,全部的css。。。

转载请注明:在路上 » 【整理】微信小程序工具调试UI界面时的坑

发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
92 queries in 0.191 seconds, using 23.41MB memory