小程序导航栏，点击的tab项进行居中

最新推荐文章于 2024-06-22 13:40:14 发布

述。一牛

最新推荐文章于 2024-06-22 13:40:14 发布

阅读量716

点赞数 2

CC 4.0 BY-SA版权

文章标签：小程序前端 javascript

本文链接：https://blog.youkuaiyun.com/weixin_47981445/article/details/129157715

该文讨论了在微信小程序中处理页面渲染完成后获取元素高度的问题，通过在onReady回调中使用setTimeout来确保异步数据加载完毕。文章详细介绍了如何初始化滚动数据，改变Tab时调整scroll-view的滚动位置，以及利用wx.createSelectorQuery获取元素尺寸的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Page({

data:{
   tabListSize: [],
    scrollToLeft: '',
    scrollAreaLeft: 0,
    scrollAreaWidth: 0,
  }
  //在页面渲染完成OnReady回调 获取元素高度时，如果不加定时器，获取的元素的高度还是没渲染完异步数据前的高度。故需要加定时器
  onReady: function () {
    setTimeout(() => {
      this.initScrollData()
    }, 300)
  },
// 修改tab
  changeTab(e) {
    // console.log(e, "e====")
    // const { index } = e.detail;
    const { index } = e.currentTarget.dataset;
    const { isHot, subCateIdStr, id } = this.data.cateList[index];
    this.setData({
      currentTab: index,
    });
    this.scrollDom(index)
  },
  //点击tab项，对scroll-view进行左右滑动距离
  scrollDom(index) {
    if (this.data.tabListSize.length == 0) {
      this.initScrollData();
      return;
    }
    const offsetLeft = this.data.tabListSize[index].left - this.data.scrollAreaLeft
    const scrollLeft = offsetLeft - (this.data.scrollAreaWidth - this.data.tabListSize[index].width) / 2;
    this.setData({
      scrollToLeft: scrollLeft < 0 ? 0 : scrollLeft
    })
  },
  //获取整个tab列表的长度，并push到数组进行保存
  initScrollData() {
    const query = wx.createSelectorQuery().in(this);
    query.select('.tab-list-cateList').fields({
      rect: true,
      size: true
    }, res => {
      console.log(res,'resssss--')
      this.data.scrollAreaLeft = res.left;
      this.data.scrollAreaWidth = res.width;
    });
    query.selectAll('.tab-item-cateList').fields({
      rect: true,
      size: true
    }, data => {
      data.forEach((item, index) => {
        console.log(item.width, 'width')
        this.data.tabListSize.push({
          width: item.width,
          left: item.left
        });
      });
    });
    query.exec();
  },

页面html

    <van-sticky offset-top="{{56}}">
      <scroll-view scroll-x="true" scroll-with-animation="{{true}}" throttle="{{false}}" scroll-left="{{scrollToLeft}}" >
        <view class="tab-list-cateList">
          <view wx:for="{{cateList}}" wx:key="id" class="tab-item-cateList {{currentTab==index?'active-tab':''}}" data-index="{{index}}" bindtap="changeTab">{{item.tagName}}</view>
        </view>
      </scroll-view>
    </van-sticky>