官方例子Indexes 索引选择器示例代码不够完整

[AFatMan]

描述:
官方例子Indexes 索引选择器使用了react做示例,
链接

微信小程序中:
控制台报找不到高度错误,且onClick以及onScrollIntoView事件不生效

报错截图:

示例代码:

<template>
  <view style='height:100vh'>
        <AtIndexes
          :list="list"
          :onClick="onClick"
          :onScrollIntoView="handleScroll"
        >
        </AtIndexes>
      </view>
</template>
<script>
import { AtIndexes } from "taro-ui-vue";
export default {
  components: { AtIndexes },
  data() {
    return {
      list: [
        {
          title: "A",
          key: "A",
          items: [
            {
              name: "阿坝",
              // 此处可加其他业务字段
            },
            {
              name: "阿坝2",
              // 此处可加其他业务字段
            },
            {
              name: "阿坝3",
              // 此处可加其他业务字段
            },
            {
              name: "阿拉善",
            },
          ],
        },
        {
          title: "B",
          key: "B",
          items: [
            {
              name: "北京",
            },
            {
              name: "保定",
            },
          ],
        },
        {
          title: "C",
          key: "C",
          items: [
            {
              name: "成都",
            },
            {
              name: "长春",
            },
          ],
        },
        {
          title: "D",
          key: "D",
          items: [
            {
              name: "帝都",
            },
            {
              name: "定海神针",
            },
          ],
        },
        {
          title: "E",
          key: "E",
          items: [
            {
              name: "易大师",
            },
            {
              name: "E语言",
            },
          ],
        },
      ],
    };
  },
  methods: {
    onClick: function (e) {
      console.log("点击事件");
    },
    handleScroll:function(fn){
      console.log("点击索引");
    }
  },
};
</script>

[AFatMan]

更新到最新依赖后,onClick,onScrollIntoView事件仍未生效

[psaren]

文档更新了
报错解决了
但在 weapp 还是无法正常滚动到点击的位置

[b2nil]

@psaren @AFatMan
这个 Issue 可以重新打开吗？

weapp 绑定 onScrollIntoView 后，不能跳转到目标区域，是因为 ScrollView 绑定的 scrollTop 属性有问题，以及 scrollTop 没有更新，始终都是 0。

所以即使目标区域的 id 更新成功了， 由于 scrollTop 的位置是 0， 就始终不会动， 或者即使跳转了也会回滚到 0 的位置。

这一点跟微信小程序官方「scroll-view 中的 scrollIntoView 属性优先于 scrollTop 属性」的说法有矛盾。

我参考了 这篇文章 的思路, 在 taro-ui-vue3 中解决了这个问题，可以提一个 PR， 作为临时解决方案，后面有更好的思路，再重写。

[psaren]

welcome PR

[psaren]

This issue should be fix in 1.0.0-alpha.9