capsuleBar要skyLine模式下位置错误

[KING754]

新手，在使用capsuleBar组件时。代码如下：

<!--index.wxml-->

<l-capsuleBar home-page="pages/index/index" title="SHOPPIN FAN" bg-color="red" has-padding="true">

</l-capsuleBar>

<view class="container">
<view class="main">
  <view>
    <text>栏目1</text>
  </view>

  <view class="indexItems">
    <view class="leftItem">
      <image src="img.png" class="itemShowImg" mode="heightFix"></image>
    </view>
    <view class="rightItem">
      <image src="img.png" class="itemShowImg" mode="heightFix"></image>
    </view>
  </view>
  <view class="imgFlag">

  </view>
</view>
</view>

index.json:

{
  "usingComponents": {
    "l-capsuleBar":"/miniprogram_npm/lin-ui/capsule-bar/index"
  },
  "navigationStyle": "custom"
}

不知道是我写法有问题，还是其它地方出问题了。
在skyline模式下：

在webview模式下：