微信小程序中出现的一些问题

（一些题外话，这是我在掘金的第一篇文章，同时作为一名职场小新，所谓师父领进门，修行靠自己，内心还不够强大，希望走过的路过的，口下留情！！！）

今天微信小程序有出现一个列表下拉刷新列表数据不更新问题，师父说是布局问题，让我找出来并解决，起初我并没有考虑手机适配问题，直接高度写死（属实是考虑不周全），师父看了一下我的代码，就开始一起看是什么问题，结果发现是布局结构的问题，一直调试，最后修改了布局，这种样式修改也挺费时间的。样式修改的部分代码就不写了，其中师父还讲了一些我觉得收益的知识，想记录下来的同时也想让分享给你们

在微信小程序中如何在公共组件里用js来传不同页面样式的clas名

wxml

<view class="list-area {{listClass}}" wx:if="list">
        <selectable list="{{list}}" wx:if="{{list.length > 0}}"></selectable>
</view>

在相对应的js中 在properties中定义一下

Component({
  /**
   * 组件的属性列表
   */
  options: {
    pureDataPattern: /^_/,
    styleIsolation: 'apply-shared',
    multipleSlots: true // 在组件定义时的选项中启用多slot支持
  },
  properties: {
    listClass: String,
  },

再在要使用的wxml中去使用

 <view class="flex-grow" hidden="{{tab != 1}}">
    <scroll-list list-class="album-audio">
    </scroll-list>
  </view>

在要使用的页面的wxss中去写相关的css

.album-audio {
  margin-bottom: constant(safe-area-inset-bottom); /*兼容 IOS<11.2*/
  margin-bottom: env(safe-area-inset-bottom); /*兼容 IOS>11.2*/
  padding: 30rpx 12rpx 0;
}

其中， margin-bottom: constant(safe-area-inset-bottom); /兼容 IOS<11.2/ margin-bottom: env(safe-area-inset-bottom); /兼容 IOS>11.2/ 是解决iOS端底部留白问题