关于小程序吞噬margin-rightBug

关于小程序吞噬margin-right的Bug

今天在写小程序的时候发现我在flex布局的时候我的margin-right不生效 经过测试只能使用display:inline-block; 配合 white-space: nowrap;来实现flex布局同时也解决了不显示右边距的问题

复盘:在小程序中有一个横向滚动的 需求 滚动的屏幕的边缘以后在不显示图片

实现的思路:让该横向滚动的列表宽度为屏幕的实际宽度由于我设置了所有的内容都有一个左右边距为30rpx所以在设置完宽度为屏幕实际宽的时候还是有边距 所以需要来个反向输出 我设置的是所有内容为padding 左右30rpx 内容如果想占到边距就需要来个margin-left：-30rpx 有了边距以后 在给每个item来个30rpx就有边距了

第一步获取屏幕的实际宽度 使用wx.getsysyteminfo方法来获取

第二步改变横向滚动的宽度为屏幕实际宽度 直接从data中拿到我们获取的宽度就行

第三步给给滚动的列表的父元素来个margin-left：-30rpx让他实际沾满屏幕宽度

第四步 给每个滚动的元素来个左右边距30rpx这样就是元素占据的边距所以滚动是可以覆盖的

第五步改变思维 由于我们是flex布局右边距微信不给我生效所以改变方案使用display:inline-block; 配合 white-space: nowrap;来实现flex布局

注意事项: white-space: nowrap;会继承到文字上所以我们需要给文字来个 white-space: nomal; 结束