Vant 移动端h5网页项目记录（van-tabs）（图片间隙）

Vant相关

vant-tabs

• sticky属性：将tab栏固定到顶部。

• swipeable属性：支持左右滑动切换标签页

• animated属性：开启tab切换动画

• lazy-rander="false"， 关闭延迟渲染（关闭：首次切换到标签时才触发内容渲染） 。 可以让其他tab页在页面加载时就渲染。

  tab页切换时滚动位置不重置的问题：@change事件

  <van-tabs @change="tabChanged">
    <van-tab v-for="(tabInfo, index) in tabList" :key="index" :title="tabInfo.title">
      <div :id="'tab-pan-'+ index">
        <!-- ...tab内容省略 -->
      </div>
    </van-tab>
  </van-tabs>
  
  // ------methods里------
  // tab切换时重置滚动条到顶部
      tabChanged() {
        this.$nextTick(() => {
          const tabPanel = document.getElementById("tab-pan-" + this.activeTab);
          tabPanel.scrollTo(0, 0);
        });
      },
  

• 自定义tab的活跃栏样式

  
  ::v-deep .van-tabs__line {
    top: 10px;
    height: 70px;
    width: 170px;
    background-color: transparent;
    background-image: url(../assets/icons/tab-active-bar.svg);
    background-position: center;
    background-size: 170px 70px;
  }
  

其他

解决长图分割导致的图片间隙

/*外层父级div*/
.detail {
  /* 解决图片上下间隙 */
  font-size: 0;
  line-height: 0;
  list-style: none;
}
.detail img{
  width: 100%;
  /* 解决图片上下间隙 */
  display: block;
  padding: 0;
  margin: 0;
  vertical-align: middle;
}