taro（小程序一样） ScrollView 滚动到底部或者顶部再次设置scrollIntoView 无效-Toy模板网

这篇具有很好参考价值的文章主要介绍了taro（小程序一样） ScrollView 滚动到底部或者顶部再次设置scrollIntoView 无效。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

产生这个bug的原因：当我们第一次滑倒底部点击A回到顶部成功，再次滑倒底部，再次点击A无法回到顶部，因为此时的scrollIntoView 对应的值还是A，需要将scrollIntoView对应的值清空，然后重新赋值A，即可解决

解决办法：滑动到顶部或者底部时，清空之前设置的scrollIntoId即可

onScrollToUpper={() => this.cleanScrollIntoId()}
onScrollToLower={() => this.cleanScrollIntoId()}

// 清除scrollIntoId
  cleanScrollIntoId() {
    this.setState({
      scrollIntoId: ""
    });
  }

完整代码：文章来源地址https://www.toymoban.com/news/detail-507364.html

 const citys = [
        {
          name: "A",
          list: [
            {
              cityCode: "320001",
              cityName: "阿坝"
            },
            {
              cityCode: "320002",
              cityName: "阿拉善"
            },
            {
              cityCode: "320003",
              cityName: "阿里"
            },
            {
              cityCode: "320004",
              cityName: "安康"
            }
          ]
        },

        {
          name: "B",
          list: [
            {
              cityCode: "130600",
              cityName: "保定市"
            }
          ]
        },
        {
          name: "C",
          list: [
            {
              cityCode: "130800",
              cityName: "承德市"
            }
          ]
        },
        {
          name: "H",
          list: [
            {
              cityCode: "131100",
              cityName: "衡水市"
            },
            {
              cityCode: "320800",
              cityName: "淮安市"
            }
          ]
        },
        {
          name: "M",
          list: [
            {
              cityCode: "231000",
              cityName: "牡丹江市"
            }
          ]
        },
        {
          name: "N",
          list: [
            {
              cityCode: "320100",
              cityName: "南京市"
            }
          ]
        },
        {
          name: "Q",
          list: [
            {
              cityCode: "130300",
              cityName: "秦皇岛市"
            }
          ]
        }, {
          name: "S",
          list: [
            {
              cityCode: "310000",
              cityName: "上海市"
            },
            {
              cityCode: "130100",
              cityName: "石家庄市"
            },
            {
              cityCode: "320500",
              cityName: "苏州市"
            }
          ]
        },
        {
          name: "T",
          list: [
            {
              cityCode: "140100",
              cityName: "太原市"
            },
            {
              cityCode: "130200",
              cityName: "唐山市"
            }
          ]
        },
        {
          name: "W",
          list: [
            {
              cityCode: "150300",
              cityName: "乌海市"
            }
          ]
        },
        {
          name: "X",
          list: [
            {
              cityCode: "320300",
              cityName: "徐州市"
            }
          ]
        },
        {
          name: "Y",
          list: [
            {
              cityCode: "320900",
              cityName: "盐城市"
            },
            {
              cityCode: "321000",
              cityName: "扬州市"
            },
            {
              cityCode: "140300",
              cityName: "阳泉市"
            }
          ]
        },
        {
          name: "Z",
          list: [
            {
              cityCode: "140400",
              cityName: "长治市"
            },
            {
              cityCode: "321100",
              cityName: "镇江市"
            }
          ]
        }
      ]


 /**
   * 右侧字母索引的触发
   */
  touchstartfn(e) {
    var index = e.target.dataset.bigindex;
    var letter = this.state.citys[index].name;
    this.setState({
      scrollIntoId: letter
    });

    Taro.showToast({
      icon: "none",
      title: letter
    });
  }


// 清除scrollIntoId
  cleanScrollIntoId() {
    this.setState({
      scrollIntoId: ""
    });
  }



// 示例
<ScrollView
          class="flex-left"
          scrollY="true"
          scrollIntoView={scrollIntoId}
          scrollWithAnimation
          onScrollToUpper={() => this.cleanScrollIntoId()}
          onScrollToLower={() => this.cleanScrollIntoId()}
        >
          {citys.map((i, index) => {  
            return (
              <View
                key={index}
                class="city-list"
                onClick={e => this.selectCity(e)}  // 这个不重要可以不管
              >
                <View
                  class="item-title item-a"
                  id={i.name}
                  data-bigindex={index}
                >
                  {i.name} // 这里显示的城市name 如 A
                </View>

                {i.list.map((j, o) => { // 这里显示的城名字 如：北京
                  return (
                    <View class="item" data-bigindex={index}>
                      {j.cityName}
                    </View>
                  );
                })}
              </View>
            );
          })}

// 这里是右侧字母
 {citys.map((item, idx) => {
            return (
              <View onClick={e => this.touchstartfn(e)}>
                <View
                  class="scroll_list_chi"
                  data-id={item.name}
                  data-index={idx}
                  data-bigindex={idx}
                >
                  {item.name}
                </View>
              </View>
            );
          })}

到了这里，关于taro（小程序一样） ScrollView 滚动到底部或者顶部再次设置scrollIntoView 无效的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！