更新记录

v1.0.5（2020-07-21） 下载此版本

样式修改及示例

v1.0.4（2020-07-01） 下载此版本

解决锚点错位问题，以及增加默认高度可在源代码修改

v1.0.1（2020-06-19） 下载此版本

V2020.6.19 第一次发布

平台兼容性

anchorView--选项卡导航栏

简介

这是一款选项卡导航栏组件，最佳锚点<a href="#item1"></a>定位替代组件。

组件使用

在script中使用

import anchorView from '@/components/anchor-view/index.vue'

export default {
    components:{anchorView},
    data() {
        return {
              outermostView: '.contain-view',
              minScolltop: 100, // 当滚动多少时，出现
        };
    },
    onPageScroll(item) {
        this.scrollTop = item.scrollTop
    },

}

在template中使用

<anchor-view
      :scrollTop="scrollTop"
      :minScolltop="minScolltop"
      :outermostView="outermostView"
      :types="types"
></anchor-view>

props

tabList

演示示例

已上传使用示例，可下载示例项目。

<template>
  <view class="contain-view">
      <anchor-view
      :scrollTop="scrollTop"
      :minScolltop="minScolltop"
      :outermostView="outermostView"
      :types="types"
    ></anchor-view>
  </view>
</template>

<script>
import anchorView from '@/components/anchor-view/index.vue'
export default {
  components: {
    anchorView
  },
  data() {
    return {
      outermostView: '.contain-view',
      minScolltop: 100, // 当滚动多少时，出现
      types: [
        {
          title: '商品',
          anchor: '#product'
        },
        {
          title: '评论',
          anchor: '#comment'
        },
        {
          title: '详情',
          anchor: '#details'
        },
        {
          title: '参数',
          anchor: '#parameter'
        }
      ],
    }
  }，
  onPageScroll(item) {
    this.scrollTop = item.scrollTop
  }
}