基本实例

<template>
  <view style="padding: 40rpx;">
    <ex-anchor
      ref="anchorRef"
      :list="list"
      @anchorChange="anchorChange"
      scrollViewHeight="80vh"
    >
      <template v-slot:default="{ item, index }">
        <view> {{ item.label }} -----当前索引 {{ index }} </view>
        <view>
          <view class="btn-group">
            <view
              v-for="(o, i) in item.list"
              :key="index + '-' + i"
              class="btn"
            >
              <text>{{ o.label }}</text>
            </view>
          </view>
        </view>
      </template>
    </ex-anchor>
    <view style="height: 60rpx;color:red"
      >当前锚点:{{ currentAnchor.label }}</view
    >
    <button class="btn" @click="setAnchor">点击滚动道指定锚点P</button>
  </view>
</template>

<script>
const list = [
  {
    id: 0,
    label: "A",
    list: [
      {
        label: "阿坝",
        value: "00",
      },
      {
        label: "阿克苏",
        value: "01",
      },
      {
        label: "阿拉善盟",
        value: "02",
      },
      {
        label: "阿勒泰",
        value: "03",
      },
      {
        label: "阿里",
        value: "04",
      },
    ],
  },
  {
    id: 1,
    label: "B",
    list: [
      {
        label: "北京",
        value: "10",
      },
      {
        label: "白城",
        value: "11",
      },
      {
        label: "百色",
        value: "12",
      },
      {
        label: "白山",
        value: "13",
      },
      {
        label: "白银",
        value: "14",
      },
      {
        label: "蚌埠",
        value: "15",
      },
      {
        label: "保定",
        value: "16",
      },
      {
        label: "宝鸡",
        value: "17",
      },
      {
        label: "保山",
        value: "18",
      },
      {
        label: "包头",
        value: "19",
      },
      {
        label: "巴彦淖尔",
        value: "110",
      },
    ],
  },
  {
    id: 2,
    label: "C",
    list: [
      {
        label: "重庆",
        value: "20",
      },
      {
        label: "长春",
        value: "21",
      },
      {
        label: "长沙",
        value: "22",
      },
      {
        label: "常州",
        value: "23",
      },
      {
        label: "成都",
        value: "24",
      },
      {
        label: "沧州",
        value: "25",
      },
      {
        label: "常德",
        value: "26",
      },
      {
        label: "昌都",
        value: "27",
      },
      {
        label: "昌吉",
        value: "28",
      },
    ],
  },
];
export default {
  components: {},
  data() {
    return {
      list,
      currentAnchor: {},
      value: "04", // 多选时候为数组
    };
  },
  methods: {
    // 设置锚点
    setAnchor() {
      this.$refs.anchorRef.setAnchor(16);
    },
    // 锚点更新
    anchorChange(item) {
      console.log(item, "item------------");
      this.currentAnchor = item;
    },
    // 按钮点击事件
    itemClick(item) {
      console.log(item);
    },
  },
  created() {
    this.list = anchorList;
    this.currentAnchor = this.list[0];
  },
};
</script>

<style lang="scss" scoped>
.btn {
  flex: 1;
  height: 70rpx;
  border-radius: 10rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24rpx;
  background: #80808050;
  color: #4d4d4d;
}

.btn-group {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
</style>

属性

属性名	类型	默认值	可选值	说明
list	Array			数组
scrollViewHeight	String	80vh		区域高度
showIndex	Boolean	true		是否显示侧边索引
indexStyle	Object	{top: '60px',right: '12px'}		右侧索引栏相对定位位置
indexItemActiveStyle	Object	{'background-color': '#409eff','color':'#fff','border-radius':'100px' }		索引项每一项选中样式
indexItemUnActiveStyle	Object	{}		索引项每一项未选中样式
props	Object	{indexKey:'label', // 索引项对应的 key}		配置项

事件

事件名	说明
anchorChange	当前锚点更新事件