Taro3.0.18 Scrollview的scrollIntoView设置无效

[darkfiredarkhalo]

相关平台

微信小程序

小程序基础库: 2.14.1
使用框架: React

复现步骤

见以下demo:

• index.tsx

import React, { useState, useEffect } from 'react';
import { View, Text, ScrollView } from '@tarojs/components';
import Taro, { useRouter, useReady } from '@tarojs/taro';

import './index.scss';

// 城市列表
const cityList = (): any[] => {
  let capitals: string[] = [];
  for (let i = 65; i < 91; i++) {
    capitals.push(String.fromCharCode(i))
  }
  let result: any[] = [];
  for (let i = 0; i < 200; i++) {
    result.push({
      cityName: `城市${i}`,
      cityCode: `code00${i}`,
      firstLetter: capitals[i%26]
    });
  }
  return result;
};
const queryCityList = (params: any): any => {
  console.log('请求params>>>', params);
  return new Promise((resolve) => {
    resolve({cityList: cityList()})
  });
};
export default () => {

  const router = useRouter();
  const params: any = router.params;
  const { lat=39.909, lon=116.397 } = params;
  console.log('接收的params>>>', params);

  const initCity: {letter: string, cities: {cityCode: string, cityName: string}[]} = {letter: '#', cities: [{cityCode: '', cityName: '不限'}]};
  const [cityList, setCityList] = useState([initCity]);
  const [intoView, setIntoView] = useState('');



  useReady(()=>{
    Taro.hideShareMenu();
  });
  useEffect(()=>{
    getCityList();
  }, []);

  // 获取城市列表
  const getCityList = async() => {
    try{
      const res: {cityList:[]} = await queryCityList({lat, lon});
      console.log('获取城市列表结果>>>', res);
      setCityList(encodeCityData(res.cityList))
    }catch (e) {
      console.error('获取城市列表失败>>>', e);
    }
  };
  const encodeCityData = (cityList:[]) => {
    let result: any[] = [];
    let capitals: string[] = [];
    for (let i = 65; i < 91; i++) {
      capitals.push(String.fromCharCode(i))
    }
    capitals.forEach((item: string)=>{
      const cities = cityList.filter((it: any) => {
        return it.firstLetter === item;
      });
      (!!cities && cities.length>0) && result.push({
        letter: item,
        cities
      })
    });
    console.log('格式化后的城市>>', result);
    result.unshift(initCity);
    return result;
  };
  const renderHeader = () => {
    const latestCityItem = cityList[0];
    const latestCity = latestCityItem.cities[0];
    const cityName = latestCity.cityName;
    return(
      <View className={'header'}>
        <Text className={'label'}>最近城市</Text>
        <View className={'latestCityBox'} onClick={()=>onCityClick(latestCity)}>
          <Text>{cityName}</Text>
        </View>
      </View>
    )
  };
  const onCityClick = (item: any) => {
    console.log('点击的城市>>', item);
  };
  const renderCity = () => {
    return cityList.map((item: any, index: number) => {
          const {
            letter,
            cities
          } = item;
          return(
            <View className={'cityContent'} key={index} id={letter}>
              <View className={'letterBox'}>
                <Text>{letter}</Text>
              </View>
              <View className={'cityBox'}>
                {cities.map((city: any, cityIndex: number) => {
                  return(
                    <View key={`${index}_${cityIndex}`} className={'textItem'} style={{borderBottomColor: cityIndex===cities.length-1 ? 'transparent' : '#EBEBEB'}} onClick={()=>onCityClick(city)}>
                      <Text>{city.cityName || '--'}</Text>
                    </View>
                  )
                })}
              </View>
            </View>
          )
        })
  };
  const renderDefault = () => {
    return(
      <View className={'default'}>
        <Text>暂无城市</Text>
      </View>
    )
  };
  const onIndexClick = (e: any, letter: string) => {
    e.stopPropagation();
    console.log('onIndexClick>>>', letter);
    setIntoView(letter)
  };
  const renderIndex = () => {
    let capitals: string[] = [];
    for (let i = 65; i < 91; i++) {
      capitals.push(String.fromCharCode(i))
    }
    return(
      <View className={'indexView'}>
        {capitals.map((item: string, index: number) => {
          return(
            <View className={'indexItem'} key={index} onClick={(e)=>onIndexClick(e, item)}>
              <Text>{item}</Text>
            </View>
          )
        })}
      </View>
    )
  };
  console.log('scrollIntoView>>>', intoView);
  return (
    <ScrollView scrollY={true} scrollIntoView={intoView} className={'cityContainer'}>
      {renderHeader()}
      {cityList.length>0 ? renderCity() : renderDefault()}
      {renderIndex()}
    </ScrollView>
  );
};

• index.scss

.cityContainer {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  min-height: 100%;
  height: auto;
  .header {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    width: 100%;
    height: 212px;
    background: #F7F7F7;
    .label {
      font-size: 28px;
      font-weight: 400;
      color: #7A7A7A;
      line-height: 40px;
      margin:  0 0 24px 34px;
    }
    .latestCityBox {
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: center;
      margin-left: 34px;
      background: #FFFFFF;
      border-radius: 6px;
      border: 1px solid #E1E1E1;
      height: 80px;
      padding: 0 56px;
      image {
        margin-right: 10px;
        width: 24px;
        height: 30px;
      }
      text {
        font-size: 28px;
        font-weight: 400;
        color: #1A1A1A;
      }
    }
  }
  .cityContent {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    width: 100%;
    background: #fff;
    height: auto;
    .letterBox {
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: flex-start;
      width: 100%;
      height: 52px;
      background: #EBEBEB;
      text {
        font-size: 28px;
        font-weight: 400;
        color: #7A7A7A;
        margin-left: 34px;
      }
    }
    .cityBox {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      justify-content: flex-start;
      padding: 0 56px 0 34px;
      width: calc(100% - 90px);
      .textItem {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        width: 100%;
        height: 88px;
        border-bottom: 2px solid #EBEBEB;
        text {
          font-size: 30px;
          font-weight: 400;
          color: #1A1A1A;
          line-height: 42px;
        }
      }
    }
  }
  .default {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: calc(100% - 114px);
    image {
      width: 400px;
      height: 252px;
      margin-bottom: 52px;
    }
    text {
      font-size: 30px;
      font-weight: 400;
      color: #7A7A7A;
      line-height: 42px;
    }
  }
  .indexView {
    position: fixed;
    top: 200px;
    right: 0;
    width: 44px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    .indexItem {
      width: 44px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      text {
        font-size: 22px;
        color: #1A1A1A;
      }
    }
  }
}

期望结果

scrollIntoView正常使用

实际结果

设置了也无效

环境信息

Taro CLI 3.0.3 environment info:
System:
      OS: macOS 10.15.7
      Shell: 3.2.57 - /bin/bash
    Binaries:
      Node: 12.16.3 - /usr/local/bin/node
      Yarn: 1.22.4 - /usr/local/bin/yarn
      npm: 6.14.8 - /usr/local/bin/npm
    npmPackages:
      @tarojs/cli: 3.0.18 => 3.0.18 
      @tarojs/components: 3.0.18 => 3.0.18 
      @tarojs/mini-runner: 3.0.18 => 3.0.18 
      @tarojs/react: 3.0.18 => 3.0.18 
      @tarojs/runtime: 3.0.18 => 3.0.18 
      @tarojs/taro: 3.0.18 => 3.0.18 
      @tarojs/webpack-runner: 3.0.18 => 3.0.18 
      babel-preset-taro: 3.0.18 => 3.0.18 
      eslint-config-taro: 3.0.18 => 3.0.18 
      react: ^16.10.0 => 16.14.0 

[darkfiredarkhalo]

加上固定高度可以了