效果如图:
封装组件代码:
anchor-view/index.vue
<template>
<view>
<view
:scrollTop="scrollTop"
:minScolltop="minScolltop"
:outermostView="outermostView"
:types="types"
class="anchor-view flex u-border-bottom"
>
<view
v-for="(item,i) in types"
class="flex-center wid-25 flex"
v-text="item.title"
:key="i"
:id="item.anchor"
:class="active === i? 'active':''"
@click="changeActive(i)"
></view>
</view>
</view>
</template>
<script>
/**
* @property {Number} minScolltop 你需要在滚动到多少时显示这个界面
* @property {Number} scrollTop 当前页面的滚动距离
* @property {String} outermostView 当前界面最外层的节点
* @property {Array} types 你的锚点数组
*/
export default {
props: {
minScolltop: {
type: Number,
default: 0
},
scrollTop: {
type: Number,
default: 0
},
outermostView: {
type: String,