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

476 阅读2分钟

“我正在参加「掘金·启航计划」”

需求

image.png

image.png

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

思路

思路一:单独设置padding

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

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

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

image.png

思路三:使用视口单位vw

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

实现

思路二实现:

  • app.js
    • 设置全局数据globalData
    • 利用wx.getSystemInfoSync()获取设备信息,并给globalData中的数据赋值screenWidthscreenHeight
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的大小,

image.png

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

image.png

.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;"去掉即可