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

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

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

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

完整代码:

 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>
            );
          })}

Logo

智屏生态联盟致力于大屏生态发展,利用大屏快应用技术降低开发者开发、发布大屏应用门槛

更多推荐