微信小程序vant-indexBar 无反应解决方法

xiao靌

已于 2024-01-23 19:00:14 修改

阅读量569

点赞数 7

文章标签：微信小程序 notepad++ 小程序

于 2024-01-23 18:59:53 首次发布

本文链接：https://blog.csdn.net/Xc_Wl/article/details/135779950

版权

问题:van-indexBar 没反应

如图：点击旁边索引不跳到相对应的字母

问题解决方法

解决方法一：把代码放到页面，不能被任何标签包裹，如图

第二种办法：手写一个，代码如下：

//index.wxml

  <van-cell title="展示弹出层" is-link bind:click="showPopup" />

  <van-popup show="{{ show }}" position="bottom" custom-style="height: 80vh;" bind:close="onClose">
    <scroll-view scroll-y="true" style="height: 80vh;" class="scroll_indexBar" scroll-into-view="{{item_char}}" binddragend="binddragend" enhanced="{{true}}" binddragstart="binddragstart">
      <view class="charNav">
        <view wx:for="{{indexList}}" data-item="{{item}}" wx:key="item" catchtap='selectcity'>
          <text class="{{item==item_char ?'char_color':''}}">{{item}}</text>
        </view>
      </view>
      <view class="char_list_box">
        <view class="char_list" wx:for="{{indexList}}" wx:key="{{item}}">
          <view class="char_title {{item==item_char ?'char_color':''}}" id="{{item}}">{{item}}</view>
          <view class="char_list_textbox" wx:for="{{3}}" wx:key="*this">
            <text>这是文字</text>
          </view>
        </view>
      </view>
    </scroll-view>
  </van-popup>

index.js

const indexList = [];
const charCodeOfA = 'A'.charCodeAt(0);
for (let i = 0; i < 26; i++) {
  indexList.push(String.fromCharCode(charCodeOfA + i));
}
Page({

  /**
   * 页面的初始数据
   */
  data: {
    show: false, //显示弹出层
    indexList, //字母数据
    item_char: "X", //选中的字母
    item_height: 0 //元素长度
  },

  showPopup() {
    this.setData({
      show: true
    });
  },

  onClose() {
    this.setData({
      show: false
    });
  },

  selectcity(e) {
    const {
      currentTarget: {
        dataset: {
          item
        }
      }
    } = e
    this.setData({
      item_char: item
    })
  },
  binddragend(e) {
    const {
      detail: {
        scrollTop
      }
    } = e
    const {
      data: {
        item_height,
        indexList,
        item_char
      }
    } = this
    const index = (scrollTop / item_height).toFixed() 
    const string = indexList[index]
    this.setData({
      item_char: string
    })
  },
  binddragstart() {
    if (this.data.item_height == 0) {
      this.getClass()
    }
  },
  getClass() {
    let that = this
    const query = wx.createSelectorQuery()
    query.select('.char_list').boundingClientRect(function (res) {
      const {
        height
      } = res
      that.setData({
        item_height: height
      })
    })
    query.exec()
  },
)}

css
.scroll_indexBar {
    position: relative;
    .charNav{
      position: fixed;
      right: 5px;
      color:#929292 ;
      top: 25vh;
      text-align: center;
      font-size: 12px;
    
    }

  }
  .char_color{
    color:red;
  }

结果展示