[Bug Report] van-tabs在sticky状态下 点击tab会使其回到普通状态

[fangkyi03]

设备

小米8

VantWeapp 版本

1.1.0-beta.2

基础库版本

2.10.3

请提供核心代码片段链接

http://a.com

描述问题

van-tabs在sticky状态下 点击tab会使其回到普通状态

Taro CLI 1.3.18 environment info: System: OS: macOS 10.15.3 Shell: 5.7.1 - /bin/zsh Binaries: Node: 10.18.1 - /usr/local/bin/node Yarn: 1.12.3 - /usr/local/bin/yarn npm: 6.13.4 - /usr/local/bin/npm npmPackages: @tarojs/cli: 1.3.18 => 1.3.18 @tarojs/components: 1.3.18 => 1.3.18 @tarojs/components-rn: 1.3.18 => 1.3.18 @tarojs/plugin-babel: 1.3.18 => 1.3.18 @tarojs/plugin-csso: 1.3.18 => 1.3.18 @tarojs/plugin-less: 1.3.18 => 1.3.18 @tarojs/plugin-sass: 1.3.18 => 1.3.18 @tarojs/plugin-uglifyjs: 1.3.18 => 1.3.18 @tarojs/redux: 1.3.18 => 1.3.18 @tarojs/redux-h5: ^2.0.6 => 2.0.6 @tarojs/router: 1.3.18 => 1.3.18 @tarojs/taro: 1.3.18 => 1.3.18 @tarojs/taro-h5: 1.3.18 => 1.3.18 @tarojs/taro-redux-rn: 1.3.18 => 1.3.18 @tarojs/taro-rn: 1.3.18 => 1.3.18 @tarojs/taro-router-rn: 1.3.18 => 1.3.18 @tarojs/taro-weapp: 1.3.18 => 1.3.18 @tarojs/webpack-runner: 1.3.18 => 1.3.18 eslint-config-taro: 1.3.18 => 1.3.18 eslint-plugin-taro: 1.3.18 => 1.3.18 nervjs: ^1.5.6 => 1.5.6 react: 16.3.1 => 16.3.1 react-native: 0.55.4 => 0.55.4 npmGlobalPackages: typescript: 3.8.3

[rex-zsd]

核心代码和截图提供一下？

[fangkyi03]

import Taro from '@tarojs/taro';
import { View, Text } from '@tarojs/components';
import styles from './index.module.less';
import HomeList from '../HomeList';

export default class TabsList extends Taro.Component {

  config = {
    "usingComponents": {
        "van-tab": "../vant-weapp/dist/tab/index",
        "van-tabs": "../vant-weapp/dist/tabs/index",
        "van-sticky": "../vant-weapp/dist/sticky/index"
    }
  }

  constructor(props) {
      super(props);
      this.state = {
        active:0
      }
  }

  onChange = (data) => {
    const {index} = data.detail
    this.setState({active:index})
  }

  render() {
    const { data = []} = this.props
    const { active } = this.state
    return (
      <van-tabs
        active={active}
        sticky={true}
        // animated={true} 
        swipeable={true}
        type={'line'}
        border={true}
        lineHeight={0}
        lineWidth={0}
        color={'red'}
        lazyRender={true}
        tabClass={styles.normal}
        tabActiveClass={styles.active}
        onChange={this.onChange}
      >
        {
          data.map((e, i) => {
            const isActive = this.state.active == i
            return (
              <van-tab title={e.name} >
                <HomeList index={i} active={isActive}/>
              </van-tab>
            )
          })
        }
      </van-tabs>
    )
  }
}

import Taro from '@tarojs/taro';
import { View, Image, ScrollView } from '@tarojs/components';
import styles from './index.module.less'
import StepView from '../StepView';

export default class HomeList extends Taro.Component {

  componentDidMount() {
    const { index } = this.props
    console.log('初始化')
    if (index == 0) {
      console.log('输出接口')
    }
  }

  //WARNING! To be deprecated in React v17. Use new lifecycle static getDerivedStateFromProps instead.
  componentWillReceiveProps(nextProps) {
    if (nextProps.active) {
      console.log('激活', nextProps.index)
    }  
  }

  renderListLeftItem = (item) => {
    return (
      <View className={styles.leftItem}>
        <View className={styles.leftImg}>
          <Image src={'http://rrd.me/gvtEM'}/>
        </View>
        <View className={styles.leftFootText}>累计销量：199</View>
      </View>
    )
  }

  renderLabel = () => {
    return (
      <View className={styles.label}>
        48h基地直送
      </View>
    )
  }

  renderPrice = () => {
    return (
      <View className={styles.priceLine}>
        <View style={{display:'flex',alignItems:'flex-end'}}>
          <View className={styles.price}>
            ¥188
          </View>
          <View className={styles.small}>
            .8
          </View>
          <View className={styles.originalPrice}>
            ￥199
          </View>
        </View>
      </View>
    )
  }

  renderFootStepValue = () => {
    return (
      <View className={styles.foot}>
        <View className={styles.remaining}>剩余123</View>
        <StepView/>
      </View>
    )
  }

  renderListRightItem = () => {
    return (
      <View className={styles.rightItem}>
        <View className={styles.rightName}>商品名称商品名称商品名商品名称商品名称商品名商品名称商品名称商品名</View>
        <View className={styles.remark}>商品备注商品备注商品备注商品备注</View>
        {this.renderLabel()}
        {this.renderPrice()}
        {this.renderFootStepValue()}
      </View> 
    )
  }

  renderItem = (item) => {
    return (
      <View className={styles.listItem}>
        {this.renderListLeftItem(item)}
        {this.renderListRightItem(item)}
      </View>
    )
  }

  render() {
    return (
      <ScrollView style={{background:'#f2f2f2'}}>
        {
          Array(10).fill({}).map((e)=>{
            return this.renderItem(e)
          })
        }
      </ScrollView>
    );
  }
}

[fangkyi03]

我这样写 是有原因的 因为 我不想一进来的时候 就请求几十个请求 因为你们那个tab组件 没法控制子组件不走didMount

[fangkyi03]

另一个问题 就是 如果tab下面的内容滑动以后 你没办法让其在点击tab的时候 滑动到顶部

[rex-zsd]

可能跟taro组合使用的时候出现的问题…………

[fangkyi03]

你看你那边能复现吗

[fangkyi03]

https://img3.nongbaxian.com.cn/QQ20200316-184413-HD.mp4

[rex-zsd]

这个应该是因为tab在切换的时候，底部未渲染出来的瞬间，高度小于屏幕高度不足以撑起页面，导致页面滚动到了顶部。

[fangkyi03]

还有点击tab的时候 如何能让下面的内容滚动到第一个呢

[GalaxyCheung]

van-tabs在sticky状态下 点击tab会使其回到普通状态

同问，学习阶段，代码中只引入了vant 加载的第一个页面吸顶，切换tab后不吸顶了

[rex-zsd]

1867 合并一下issue

[wuxianshi]

同这个问题，现在还没解决

[wuxianshi]

    <van-tabs active="{{ active }}" swipeable animated sticky offset-top="53" color="#ffd110" title-inactive-color="#808080" title-active-color="#101010">
        <van-tab title="首页推荐">
            <text wx:for="{{[1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18]}}" style="font-size:30px">首页推荐\n</text>
        </van-tab>
        <van-tab title="精品热卖">
            <text wx:for="{{[1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18]}}" style="font-size:30px">精品热卖\n</text>
        </van-tab>
        <van-tab title="新品上架">
            <text wx:for="{{[1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18]}}" style="font-size:30px">新品上架\n</text>
        </van-tab>
    </van-tabs>

[wuxianshi]

点击右边标签会自动弹回顶部，点击相对当前标签的左边标签则不会

[zuonidelaowang]

点击右边标签会自动弹回顶部，点击相对当前标签的左边标签则不会

我也是这样， 你解决了吗？

[umeitime]

这个问题解决了吗？

[umeitime]

点击右边标签会自动弹回顶部，点击相对当前标签的左边标签则不会

问题解决了吗？

[umeitime]

点击右边标签会自动弹回顶部，点击相对当前标签的左边标签则不会

我也是这样， 你解决了吗？

[umeitime]

这个应该是因为tab在切换的时候，底部未渲染出来的瞬间，高度小于屏幕高度不足以撑起页面，导致页面滚动到了顶部。

怎么解决呢？

[a11enyan97]

还没解决？什么效率？这么多人提的一个issue过了一年了还么解决？