[Bug Report] IndexBar 在Popup弹出层中使用时，滚动时索引和列表对应不上 #3774

shouwangshe · 2019-07-08T07:19:41Z

设备 / 浏览器

Google Chrome 最新版本 75.0.3770.100

Vant 版本

2.0.5

Vue版本

2.6.10

重现链接

codesandbox，没打开。有空在做这个。应该描述就清楚了。

描述问题

IndexBar 在Popup弹出层中使用时，开了sticky滚动时索引和列表对应不上。不开sticky，索引不回有样式高亮。感觉在popup里面就都不太好使了。除了点击索引跳转对应位置是好使的。

chenjiahan · 2019-07-09T06:43:02Z

不能提供复现链接的话，麻烦提供复现的代码

shouwangshe · 2019-07-09T07:06:15Z

  <Body>
    <van-skeleton
      style="padding-top:4rem;"
      title
      avatar
      :row="3"
      :loading="loading"
      animate>
      <div class="top-line"></div>
      <div class="center-block">
        <div class="title">持卡人</div>
        <van-field
          class="value"
          v-model="queryResult.userName"
          placeholder="姓名"
          disabled/>
      </div>
      <div class="interval-block"></div>
      <div class="center-block">
        <div class="title">卡号</div>
        <van-field class="value" v-model="queryResult.bankCardNumber" placeholder="请输入银行卡号" />
      </div>
      <div class="interval-block"></div>
      <div class="center-block">
        <div class="title">银行预留手机号</div>
        <van-field class="value" v-model="queryResult.phoneNumber" placeholder="请输入预留手机号" />
      </div>
      <div class="van-hairline--top"></div>
      <!-- <div class="interval-line"></div> -->
      <div class="center-block">
        <div class="title">验证码</div>
        <van-field class="value verificationCode" v-model="queryResult.verificationCode" placeholder="请输入验证码" />
        <div class="getVerificationCode">获取验证码</div>
        <div class="clear"></div>
      </div>
      <div class="interval-block"></div>
      <div class="below-wrapper">
        <div class="reminders">
          <van-icon name="es-duihao"></van-icon>
          <span>已阅读并同意此《服务条款》</span>
        </div>
        <!-- 对比上面的线  上面的先0.5 不显示 -->
        <!-- <div class="interval-line"></div> -->
        <van-button class="catSupportedBank" @click="showPopup">
          <span>
            <van-icon name="es-duihao"></van-icon>
          </span>
          查看可支持银行
        </van-button>

        <van-button class="cancel-button" @click="gotToBack">取消</van-button>
        <van-button class="agree-button" @click="agree">同意并绑定</van-button>
      </div>
      <!-- 弹出窗 -->
      <van-popup
        class="popup"
        v-model="show"
        position="right"
        get-container="body"
        @opened="showIndexBar=true"
      >
        <van-index-bar
          v-if="showIndexBar"
          :sticky="true"
          :index-list="indexList"
          style="border-top: 2rem solid #fff; box-sizing: border-box;">
          <van-index-anchor index="A" />
          <!-- <van-cell title="A银行" />
            <van-cell title="A银行" />
            <van-cell title="A银行" /> -->
          <ul class="support-bank-list">
            <li><van-icon name="es-duihao"></van-icon><span>中国人民银行</span></li>
            <li><van-icon name="es-duihao"></van-icon><span>中国银行</span></li>
            <li><van-icon name="es-duihao"></van-icon><span>中国工商银行</span></li>
            <li><van-icon name="es-duihao"></van-icon><span>中国建设银行</span></li>
            <li><van-icon name="es-duihao"></van-icon><span>中国农业银行</span></li>
            <li><van-icon name="es-duihao"></van-icon><span>中国农业发展银行</span></li>
            <li><van-icon name="es-duihao"></van-icon><span>交通银行</span></li>
            <li><van-icon name="es-duihao"></van-icon><span>招商银行</span></li>
            <li><van-icon name="es-duihao"></van-icon><span>中信银行</span></li>
            <li><van-icon name="es-duihao"></van-icon><span>华夏银行</span></li>
            <li><van-icon name="es-duihao"></van-icon><span>中国人民银行</span></li>
            <li><van-icon name="es-duihao"></van-icon><span>中国银行</span></li>
            <li><van-icon name="es-duihao"></van-icon><span>中国公司银行</span></li>
            <li><van-icon name="es-duihao"></van-icon><span>中国建设银行</span></li>
            <li><van-icon name="es-duihao"></van-icon><span>中国农业银行</span></li>
            <li><van-icon name="es-duihao"></van-icon><span>中国农业发展银行</span></li>
            <li><van-icon name="es-duihao"></van-icon><span>交通银行</span></li>
            <li><van-icon name="es-duihao"></van-icon><span>招商银行</span></li>
            <li><van-icon name="es-duihao"></van-icon><span>中信银行</span></li>
          </ul>

          <van-index-anchor index="B" />
          <!-- <van-cell title="d银行" />
            <van-cell title="d银行" />
            <van-cell title="d银行" /> -->
          <ul class="support-bank-list">
            <li><van-icon name="duihao"></van-icon><span>中国人民银行</span></li>
            <li><van-icon name="duihao"></van-icon><span>中国银行</span></li>
            <li><van-icon name="duihao"></van-icon><span>中国工商银行</span></li>
            <li><van-icon name="duihao"></van-icon><span>中国建设银行</span></li>
            <li><van-icon name="duihao"></van-icon><span>中国农业银行</span></li>
            <li><van-icon name="duihao"></van-icon><span>中国农业发展银行</span></li>
            <li><van-icon name="duihao"></van-icon><span>交通银行</span></li>
            <li><van-icon name="duihao"></van-icon><span>招商银行</span></li>
            <li><van-icon name="duihao"></van-icon><span>中信银行</span></li>
            <li><van-icon name="duihao"></van-icon><span>华夏银行</span></li>
            <li><van-icon name="duihao"></van-icon><span>中国人民银行</span></li>
            <li><van-icon name="duihao"></van-icon><span>中国银行</span></li>
            <li><van-icon name="duihao"></van-icon><span>中国公司银行</span></li>
            <li><van-icon name="duihao"></van-icon><span>中国建设银行</span></li>
            <li><van-icon name="duihao"></van-icon><span>中国农业银行</span></li>
            <li><van-icon name="duihao"></van-icon><span>中国农业发展银行</span></li>
            <li><van-icon name="duihao"></van-icon><span>交通银行</span></li>
            <li><van-icon name="duihao"></van-icon><span>招商银行</span></li>
            <li><van-icon name="duihao"></van-icon><span>中信银行</span></li>
          </ul>

          <van-index-anchor index="C" />
          <!-- <van-cell title="d银行" />
            <van-cell title="d银行" />
            <van-cell title="d银行" /> -->
          <ul class="support-bank-list">
            <li><van-icon name="duihao"></van-icon><span>C中国人民银行</span></li>
            <li><van-icon name="duihao"></van-icon><span>C中国银行</span></li>
            <li><van-icon name="duihao"></van-icon><span>C中国工商银行</span></li>
            <li><van-icon name="duihao"></van-icon><span>C中国建设银行</span></li>
            <li><van-icon name="duihao"></van-icon><span>C中国农业银行</span></li>
            <li><van-icon name="duihao"></van-icon><span>C中国农业发展银行</span></li>
            <li><van-icon name="duihao"></van-icon><span>C交通银行</span></li>
            <li><van-icon name="duihao"></van-icon><span>招商银行</span></li>
            <li><van-icon name="duihao"></van-icon><span>中信银行</span></li>
            <li><van-icon name="duihao"></van-icon><span>华夏银行</span></li>
            <li><van-icon name="duihao"></van-icon><span>中国人民银行</span></li>
            <li><van-icon name="duihao"></van-icon><span>中国银行</span></li>
            <li><van-icon name="duihao"></van-icon><span>中国公司银行</span></li>
            <li><van-icon name="duihao"></van-icon><span>中国建设银行</span></li>
            <li><van-icon name="duihao"></van-icon><span>中国农业银行</span></li>
            <li><van-icon name="duihao"></van-icon><span>中国农业发展银行</span></li>
            <li><van-icon name="duihao"></van-icon><span>C交通银行</span></li>
            <li><van-icon name="duihao"></van-icon><span>C招商银行</span></li>
            <li><van-icon name="duihao"></van-icon><span>C中信银行</span></li>
          </ul>
          <van-index-anchor index="D" />
          <ul class="support-bank-list">
            <li><van-icon name="duihao"></van-icon><span>D中国人民银行</span></li>
            <li><van-icon name="duihao"></van-icon><span>D中国银行</span></li>
            <li><van-icon name="duihao"></van-icon><span>D中国工商银行</span></li>
            <li><van-icon name="duihao"></van-icon><span>D中国建设银行</span></li>
            <li><van-icon name="duihao"></van-icon><span>D中国农业银行</span></li>
            <li><van-icon name="duihao"></van-icon><span>d中国农业发展银行</span></li>
            <li><van-icon name="duihao"></van-icon><span>d交通银行</span></li>
            <li><van-icon name="duihao"></van-icon><span>招商银行</span></li>
            <li><van-icon name="duihao"></van-icon><span>中信银行</span></li>
            <li><van-icon name="duihao"></van-icon><span>华夏银行</span></li>
            <li><van-icon name="duihao"></van-icon><span>中国人民银行</span></li>
            <li><van-icon name="duihao"></van-icon><span>中国银行</span></li>
            <li><van-icon name="duihao"></van-icon><span>中国公司银行</span></li>
            <li><van-icon name="duihao"></van-icon><span>中国建设银行</span></li>
            <li><van-icon name="duihao"></van-icon><span>中国农业银行</span></li>
            <li><van-icon name="duihao"></van-icon><span>中国农业发展银行</span></li>
            <li><van-icon name="duihao"></van-icon><span>d交通银行</span></li>
            <li><van-icon name="duihao"></van-icon><span>D招商银行</span></li>
            <li><van-icon name="duihao"></van-icon><span>D中信银行</span></li>
          </ul>
          <van-index-anchor index="Y" />
          <ul class="support-bank-list">
            <li><van-icon name="duihao"></van-icon><span>Y中国人民银行</span></li>
            <li><van-icon name="duihao"></van-icon><span>Y中国银行</span></li>
            <li><van-icon name="duihao"></van-icon><span>Y中国工商银行</span></li>
            <li><van-icon name="duihao"></van-icon><span>Y中国建设银行</span></li>
            <li><van-icon name="duihao"></van-icon><span>Y中国农业银行</span></li>
            <li><van-icon name="duihao"></van-icon><span>Y中国农业发展银行</span></li>
            <li><van-icon name="duihao"></van-icon><span>Y交通银行</span></li>
            <li><van-icon name="duihao"></van-icon><span>招商银行</span></li>
            <li><van-icon name="duihao"></van-icon><span>中信银行</span></li>
            <li><van-icon name="duihao"></van-icon><span>华夏银行</span></li>
            <li><van-icon name="duihao"></van-icon><span>中国人民银行</span></li>
            <li><van-icon name="duihao"></van-icon><span>中国银行</span></li>
            <li><van-icon name="duihao"></van-icon><span>中国公司银行</span></li>
            <li><van-icon name="duihao"></van-icon><span>中国建设银行</span></li>
            <li><van-icon name="duihao"></van-icon><span>中国农业银行</span></li>
            <li><van-icon name="duihao"></van-icon><span>中国农业发展银行</span></li>
            <li><van-icon name="duihao"></van-icon><span>Y交通银行</span></li>
            <li><van-icon name="duihao"></van-icon><span>Y招商银行</span></li>
            <li><van-icon name="duihao"></van-icon><span>Y中信银行</span></li>
          </ul>
          <!-- <van-index-anchor index="D" />
            <van-cell title="d银行" />
            <van-cell title="d银行" />
            <van-cell title="d银行" />

            <van-index-anchor index="E" />
            <van-cell title="e银行" />
            <van-cell title="e银行" />
            <van-cell title="e银行" />

            <van-index-anchor index="F" />
            <van-cell title="f银行" />
            <van-cell title="f银行" />
            <van-cell title="f银行" />

            <van-index-anchor index="G" />
            <van-cell title="g银行" />
            <van-cell title="g银行" />
            <van-cell title="g银行" />

            <van-index-anchor index="H" />
            <van-cell title="e银行" />
            <van-cell title="e银行" />
            <van-cell title="e银行" />

            <van-index-anchor index="I" />
            <van-cell title="i银行" />
            <van-cell title="i银行" />
            <van-cell title="i银行" />

            <van-index-anchor index="J" />
            <van-cell title="j银行" />
            <van-cell title="j银行" />
            <van-cell title="j银行" />

            <van-index-anchor index="K" />
            <van-cell title="k银行" />
            <van-cell title="k银行" />
            <van-cell title="k银行" />

            <van-index-anchor index="L" />
            <van-cell title="l银行" />
            <van-cell title="l银行" />
            <van-cell title="l银行" />


            <van-index-anchor index="M" />
            <van-cell title="m银行" />
            <van-cell title="m银行" />
            <van-cell title="m银行" />

            <van-index-anchor index="N" />
            <van-cell title="n银行" />
            <van-cell title="n银行" />
            <van-cell title="n银行" /> -->
        </van-index-bar>

      </van-popup>
    </van-skeleton>
  </Body>
</template>

<script>
export default {
  name: 'wallet',
  data () {
    return {
      loading: true,
      queryResult: {
        userName: '魏大勋',
        bankCardNumber: '',
        phoneNumber: '',
        verificationCode: ''
      },
      BankcardNumber: '',
      show: false,
      indexList: ['A', 'B', 'C', 'D', 'Y'],
      showIndexBar: false
    }
  },
  mounted () {
    this.loading = false
  },
  components: {
  },
  methods: {
    showPopup () {
      this.show = true
    },
    gotToBack () {
      this.$router.newBack()
    },
    agree () {
      console.log('agree')
    }
  }
}
</script>

<style lang="less" scoped>
  .top-line{
    height: 0.05rem;
    width: 100%;
    background-color: #e5e5e5;
  }
  .interval-block{
    width: 100%;
    height:1rem;
    background:rgba(244,244,244,1);
  }
  // .interval-line{
  //   width: 33.5rem;
  //   height: 0.1rem; // 中间线 微调
  //   margin: 0 auto;
  //   background-color: #E5E5E5;
  // }
  .van-hairline--top{
    position: sticky;
    margin-left: 2rem;
    margin-right: 5rem;
    top: 5rem;
    background-color: #E5E5E5;
    height: 0.1rem;
  }
  .center-block{
    padding: @content-to-border-horizontal-distance;
    height: 3.8rem;
  }
  .title{
    font-size: 1.4rem;
    color: rgba(170,170,170,1);
    line-height: 1;
  }
  .value{
    display: block;
    border: 0;
    font-size: 1.6rem;
    line-height: 1;
    /deep/ .van-field__control{
      color: rgba(120,120,120,1);
    }
    /deep/ .van-field__control::placeholder {
      color: rgba(120,120,120,1);
    }
    padding: 0;
    margin-top: 1rem;
  }
  .verificationCode{
    width: 20rem;
    float: left;
  }
  .getVerificationCode{
    color: @main-color;
    font-size: 1.6rem;
    font-weight: bolder;
    float: right;
    margin-top: 1rem;
  }
  .clear{
    display: block;
    clear: both;
    content: "";
    visibility: hidden;
    height: 0
  }
  .below-wrapper{
    padding-left: @content-to-border-horizontal-distance;
    padding-top: 2rem;
    .reminders{
      color: #939393;
      font-size: 1.4rem;
      line-height: 1;
      span{
        margin-left: 0.6rem;
      }
    }
    .catSupportedBank{
      width:14rem;
      height:2.5rem;
      border-radius: 1.25rem;
      border: solid 0.1rem @main-color;
      color: @main-color;
      font-size: 1.4rem;
      line-height: 1;
      margin-top: 1.5rem;
      span{
        margin-left: -0.41rem; //icon位置微调
      }
    }
  }
  .cancel-button{
    position: absolute;
    width:12.3rem;
    height:3.8rem;
    color: @main-color;
    border: solid 0.1rem @main-color;
    left: 2rem;
    bottom: 2rem;
    line-height: 1;
    border-radius: 2rem;
  }
  .agree-button{
    position: absolute;
    width:20rem;
    height:4rem;
    background-color: @main-color;
    color: #fff;
    right: 2rem;
    bottom: 2rem;
    line-height: 1;
    border-radius: 2rem;
  }
  .popup{
    width: 64%;
    height: 100%;
    .popup-title{
      font-size: 1.6rem;
      color: #202020;
      // line-height: 1;
      // top: 2rem;
      margin-left: 2rem;
      // position: sticky;
      line-height: 2rem;
      margin-left: 2rem;
      position: fixed;
    }
    .support-bank-list{
      margin-left: 2rem;
      li{
        // background-color: red;
        margin: 1.95rem 0 0;
        line-height: 1;
        font-size: 1.4rem;
        color: #AAAAAA;
        span{
          margin-left: 0.95rem;
        }
      }
    }

    // vant index
    /deep/ .van-index-bar .van-index-bar__sidebar{
      right: 1rem;
      // top: 2rem;
      // transform: translateY(0%);
      // float: right;
      // margin-top: 0rem;
      // margin-right: 2rem;
      // color: #C2C2C2;
      // // background-color: red;
      // // display: inline-flex;
      // position: sticky;
    }
    /deep/ .van-index-bar__index{
      padding: 0;
    }
  }
  // 修改遮罩颜色
  // /deep/ .van-overlay{
  //   background-color: rgba(0, 0, 0, 0.3);
  // }
</style>```

…ody. see youzan#3774

chenjiahan · 2019-07-17T01:40:01Z

已在 2.0.8 版本修复

penghongsun · 2019-07-17T01:42:26Z

我也遇到了，正好修复了哈

penghongsun · 2019-07-17T10:12:37Z

还有一个问题，就是如果索引字符上面有其他内容，右边索引与左边索引的内容滚动位置不能对齐

chenjiahan · 2019-07-18T01:13:05Z

@penghongsun 可以试试 sticky-offset-top 属性

This was referenced Jul 11, 2019

index-bar bug fixed cfabregas/vant#1

Merged

[bugfix] IndexBar: activeAnchor bug fixes #3832

Merged

ystarlongzi added a commit to ystarlongzi/vant that referenced this issue Jul 14, 2019

[bugfix]: Index-bar: fix the bug when the scroller is not window or b…

1361f6c

…ody. see youzan#3774

chenjiahan added the 🐞 bug label Jul 17, 2019

chenjiahan added this to the 2.0.8 milestone Jul 17, 2019

chenjiahan closed this as completed Jul 17, 2019

dothin mentioned this issue Aug 9, 2019

[Bug Report] indexBar非浏览器或者body滚动的时候，索引active状态异常 #4082

Closed

ystarlongzi mentioned this issue Aug 15, 2019

[improvement]: IndexBar: refactoring <index-anchor /> sticky logic, compatible with more usage scenes #4125

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Bug Report] IndexBar 在Popup弹出层中使用时，滚动时索引和列表对应不上 #3774

[Bug Report] IndexBar 在Popup弹出层中使用时，滚动时索引和列表对应不上 #3774

shouwangshe commented Jul 8, 2019

chenjiahan commented Jul 9, 2019

shouwangshe commented Jul 9, 2019

chenjiahan commented Jul 17, 2019

penghongsun commented Jul 17, 2019

penghongsun commented Jul 17, 2019

chenjiahan commented Jul 18, 2019

[Bug Report] IndexBar 在Popup弹出层中使用时，滚动时 索引和列表对应不上 #3774

[Bug Report] IndexBar 在Popup弹出层中使用时，滚动时 索引和列表对应不上 #3774

Comments

shouwangshe commented Jul 8, 2019

设备 / 浏览器

Vant 版本

Vue版本

重现链接

描述问题

chenjiahan commented Jul 9, 2019

shouwangshe commented Jul 9, 2019

chenjiahan commented Jul 17, 2019

penghongsun commented Jul 17, 2019

penghongsun commented Jul 17, 2019

chenjiahan commented Jul 18, 2019

[Bug Report] IndexBar 在Popup弹出层中使用时，滚动时索引和列表对应不上 #3774

[Bug Report] IndexBar 在Popup弹出层中使用时，滚动时索引和列表对应不上 #3774