taro-scrollView 标签位置与默认显示问题

taro标签页，点击之后跳转页面，但是最后几个字段并没有展示全，类似于这种的

img


后边还有标签。

点击每个标签会发生页面跳转，页面跳转之后，scrollView的位置发生改变，点击最后一个，最后一个会改变样式（选中状态），但是滚动条默认显示位置在滚动条开始位置（scrollView），

目前我尝试着使用scrollView的 onScroll 属性，绑定方法，通过Taro.setStorageSync方法将e.detail.scrollLeft存到了本地存储空间中，然后在刷新后的页面中拿到该值，并在srollView中的scrollLeft属性绑定， 但是

img

最后的【生活服务】字段只能展示出来生活 两个字。

#在onscroll方法中，输出了一下 left 的值，但是到了 生活两个字 这里，好像就是最大值了，再往右边滑动 就没有输出了。

是否可以换swiper 来实现

使用了一个变量$scrollWidth来记录scrollView的宽度，然后根据当前点击的标签的位置和宽度，计算出需要滚动的距离$scrollLeft，然后在scrollView中的scrollLeft属性绑定，试下

使用Taro的setGlobalState方法来设置和获取滚动条的位置信息。

基于new bing部分指引作答：
这个问题可能是由于你的标签宽度超过了滚动视图的宽度，导致后面的标签无法完整显示。解决这个问题的一种方法是动态计算标签的宽度，并设置滚动视图的宽度与标签宽度之和保持一致。

你可以尝试以下步骤来解决这个问题：

在标签页的渲染逻辑中，为每个标签添加一个 ref 属性，以便后续获取标签的宽度。例如：

<View ref={ref => this.tabRef = ref} className="tab">标签内容</View>

使用 this.tabRef 获取每个标签的宽度，并计算出所有标签的总宽度。

const tabWidth = this.tabRef.offsetWidth; // 获取标签的宽度
const totalWidth = tabWidth * numberOfTabs; // 计算所有标签的总宽度

将计算得到的总宽度设置为滚动视图容器的宽度，确保能容纳所有标签。

<View className="scroll-view" style={{ width: totalWidth + 'px' }}>
  {/* 标签内容 */}
</View>

通过这种方式，你可以确保滚动视图容器的宽度足够大，能够完整显示所有的标签内容。这样，在页面跳转后，滚动视图的位置应该能够保持，并且所有的标签都能够显示出来。

另外，请确保你在绑定 onScroll 方法时正确处理滚动事件，并且在滚动事件中输出的 left 值是正确的。

根据你的描述，问题可能是由于页面跳转后，scrollView的位置和滚动条默认显示位置发生了改变导致的。你可以尝试以下解决方法：

  1. 在页面跳转前，记录当前scrollView的滚动位置，并将其存储在本地存储空间中。
// 页面A
const handleRedirect = () => {
  const scrollLeft = // 获取当前scrollView的滚动位置
  Taro.setStorageSync('scrollPosition', scrollLeft);
  // 跳转到目标页面
}
  1. 在目标页面的componentDidMount生命周期方法中，获取之前存储的滚动位置，并将其设置给scrollView的scrollLeft属性。
// 目标页面
componentDidMount() {
  const scrollLeft = Taro.getStorageSync('scrollPosition');
  this.setState({ scrollLeft });
}
  1. 在目标页面的scrollView组件上设置scrollLeft属性。
<ScrollView scrollX scrollLeft={this.state.scrollLeft}>
  // 内容
</ScrollView>

通过这种方式，可以在页面跳转后恢复scrollView的滚动位置，确保最后几个字段能够完整显示，并且滚动条的默认位置也会正确显示。另外，你提到在onscroll方法中输出left的值，但只能输出到"生活"两个字的位置，这可能是因为超出了scrollView的可滚动范围，所以没有继续输出。

以下答案参考newbing,回答由博主波罗歌编写：
根据您的描述，问题可能出现在scrollView的宽度不够导致内容无法完全显示。您可以尝试以下方法解决问题：

  1. 确保scrollView的宽度足够大，可以通过设置CSS样式或者使用flex来设置宽度。例如：
<ScrollView
  style={{ width: '100%' }}
  scrollX
>
  {/* 添加内容 */}
</ScrollView>
  1. 在跳转到新页面后，手动触发一次scrollView的滚动事件，以使滚动条自动移到正确的位置。您可以在新页面的componentDidMount生命周期函数中调用scroll-top组件的scrollTo方法，将储存在本地存储空间中的值作为参数传递给scrollTo方法来实现滚动。例如：
import Taro from '@tarojs/taro';

class NewPage extends Component {
  componentDidMount() {
    const scrollLeft = Taro.getStorageSync('scrollLeft');
    if (scrollLeft) {
      this.refs.scrollView.scrollTo(scrollLeft);
    }
  }

  render() {
    return (
      <ScrollView
        ref="scrollView"
        style={{ width: '100%' }}
        scrollX
      >
        {/* 添加内容 */}
      </ScrollView>
    );
  }
}

希望以上解决方案能够帮助到您！如果问题还未解决，请提供更多相关代码以便更进一步的分析。
如果我的回答解决了您的问题，请采纳！

对于页面跳转后 scrollView 位置不正确的问题，你可以尝试在页面跳转后，通过调用 scrollView 的 scrollTo 方法来将滚动位置设置为之前保存的本地存储中的值。


复制代码
// 获取 scrollView 的 ref  
const scrollViewRef = useRef(null);  
  
// 在跳转前的页面中保存滚动位置  
const saveScrollPosition = () => {  
  const scrollLeft = scrollViewRef.current.scrollLeft;  
  Taro.setStorageSync('scrollLeft', scrollLeft);  
};  
  
// 在跳转后的页面中恢复滚动位置  
const restoreScrollPosition = () => {  
  const scrollLeft = Taro.getStorageSync('scrollLeft');  
  if (scrollLeft !== null) {  
    scrollViewRef.current.scrollTo({ x: scrollLeft });  
  }  
};