小程序获取DOM（2）实战

通过获取scroll-view及scroll-item的DOM相关信息，写一个根据内容自动滑动的tab栏

WXML

<view class="box">
    <view class='classify'>
        <scroll-view class="classify_scroll"  scroll-left="{{srcollLeftDistance}}" enable-flex scroll-with-animation scroll-x>
            <block wx:key="id" wx:for="{{classify_list}}">
                <view data-index="{{index}}" class="classify_item {{currentIndex == index?'active':''}}" bind:tap="tapScrollItem">
                    {{item.classifyName}}
                </view>
            </block>
        </scroll-view>

          <swiper circular current="{{currentIndex}}" class="swiper_box" duration="300" bindchange="slideChange">
             <swiper-item class="swiper_item">1</swiper-item>
             <swiper-item class="swiper_item">2</swiper-item>
             <swiper-item class="swiper_item">3</swiper-item>
             <swiper-item class="swiper_item">4</swiper-item>
             <swiper-item class="swiper_item">5</swiper-item>
             <swiper-item class="swiper_item">6</swiper-item>
             <swiper-item class="swiper_item">7</swiper-item>
             <swiper-item class="swiper_item">8</swiper-item>
             <swiper-item class="swiper_item">9</swiper-item>
               
          </swiper>  
    </view>
</view>

WXSS

.box {
  height: 100vh;
}
.classify_scroll {
  box-sizing: border-box;
  padding: 0 20rpx;
  border-bottom: 1px solid #e6e6e6;
  width: 100vw;
  white-space: nowrap;
  display: flex;
  height: 70rpx;
}
.classify_scroll .classify_item {
  padding: 15rpx 26rpx;
  display: inline-block;
  position: relative;
}
.classify_scroll .classify_item.active {
  color: red;
}
.classify_scroll .classify_item.active::after {
  position: absolute;
  content: "";
  height: 4rpx;
  background-color: red;
  width: 100%;
  bottom: 0;
  left: 0;
}
.swiper_box {
  margin-top: 10rpx;
  border: 1rpx solid #e9e9e9;
}

JS

Page({


  data: {
    classify_list: [
      { id: 0, classifyName: '生鲜' },
      { id: 1, classifyName: '零食' },
      { id: 2, classifyName: '粮油' },
      { id: 3, classifyName: '奶粉' },
      { id: 4, classifyName: '蔬菜' },
      { id: 5, classifyName: '肉类' },
      { id: 7, classifyName: '禽蛋' },
      { id: 8, classifyName: '手机' },
      { id: 9, classifyName: '家电' }
    ],
    currentIndex: 0,
    srcollLeftDistance: 0,
    viewWidth: 0
  },


  onLoad () {

    //获取scrollItemDomList
    wx.createSelectorQuery().selectAll('.classify_item').boundingClientRect().exec(rect => this.setData({ scrollItemDomList: rect[0] }))
    
    //获取屏幕宽度
    wx.createSelectorQuery().selectViewport().boundingClientRect().exec(rect => this.setData({ viewWidth: rect[0].width }))
  
  },


  //点击scrollItem
  tapScrollItem(e) {

    if (e.currentTarget.dataset.index !== this.data.currentIndex) return this.setData({ currentIndex: e.currentTarget.dataset.index })

  },

  //滑动swiperItem
  slideChange(e) {

    this.setData({ currentIndex: e.detail.current, srcollLeftDistance: this.data.scrollItemDomList[e.detail.current].left - this.data.viewWidth / 2 })
  }


})