小程序全局设有padding的情况下如何令scroll-view占据整个屏幕宽度

需求

• 如图，在小程序全局设置固定padding的情况下，需要令scroll-view（粉色背景块）占据整个屏幕宽度。

思路

思路一：单独设置padding

• 取消全局设置的padding，每个模块自己单独设置padding，这种方法很简单，但每个模块都要单独设置，就有点繁琐，并不推荐。

思路二：获取屏幕宽度，并将获取到的宽度给scroll-view设置

• 因为这个屏幕宽度在同一个设备不会改变，所以可以在全局app.js用wx.getSystemInfoSync()获取设备信息，这个信息中具有屏幕宽度、高度等信息，将宽度动态设置给组件，如下图是iPhone XR的设备信息：

思路三：使用视口单位vw

• 视口代表当前可见的计算机图形区域。在 Web 浏览器术语中，通常与浏览器窗口相同。
• 视口的大小取决于屏幕的大小，而1视口宽度（1vw）等于视口宽度的1%，它不同于百分比的地方是，它的宽度是依赖于视口的宽度的，而百分比是元素的祖先元素来决定的。
• 其他的视口单位还有：vh、vmin、vmax
  • vh：视口高度的1/100
  • vmin：视区宽度或高度较小值的1/100
  • vmax：视区宽度或高度较大值的1/100

实现

思路二实现：

• 在app.js中
  • 设置全局数据globalData
  • 利用wx.getSystemInfoSync()获取设备信息，并给globalData中的数据赋值screenWidth、screenHeight

App({
  // 应用程序启动时
  onLaunch() {
    // 获取设备信息
    const info = wx.getSystemInfoSync();
    // info中有screenWidth
    this.globalData.screenWidth = info.screenWidth;
    this.globalData.screenHeight = info.screenHeight;
  },
  globalData: {
    screenWidth: 0,
    screenHeight: 0,
  },
});

• 在组件中
  • 可以根据getApp()来获取全局的数据，const app = getApp()
  • 再给data中的数据进行赋值

// 获取app.js中的数据
const app = getApp();
Component({
  data: {
    screenWidth: app.globalData.screenWidth,
  },
});

<scroll-view scroll-x class="menu-list" style="width: {{screenWidth}}px;">
  <block wx:for="{{6}}" wx:key="*this">
    <view class="menu-item"></view>
  </block>
</scroll-view>

• 因为在.menu-item中每个都设置了margin-left: 20rpx，所以，需要使用相对定位向左偏移20rpx，不然最左边的一开始便会和左边相差20rpx，这个20rpx是全局设置的padding的大小，

• 由于下图，还需要拿到最后一个元素给它设置margin-right: 20rpx;

.menu-list {
  white-space: nowrap;
  position: relative;
  left: -20rpx;
}
.menu-item {
  display: inline-block;
  // 根据顶部对齐
  vertical-align: top;
  width: 220rpx;
  height: 220rpx;
  background-color: pink;
  margin-left: 20rpx;
}
.menu-item:last-of-type {
  margin-right: 20rpx;
}

思路三实现：

• 在思路二实现的css的.menu-list中加上width: 100vw;，这样，宽度就是屏幕宽度
• 再将wxml中的style="width: {{screenWidth}}px;"去掉即可