移动端菜单点击效果，点击当前元素展示到可视区

Posted 2021-10-13 yw00yw

以微信小程序为例

wxml

<scroll-view
  class="scroll-menu"
  scroll-left="{{scrollLeft}}"
  scroll-x="{{true}}"
  scroll-with-animation="{{true}}"
  enable-flex="{{true}}">
  <view
    class="menu-item {{selectedIndex === index && 'activeMenu'}}"
    wx:for="{{menuList}}"
    wx:key="index"
    data-index="{{index}}"
    bindtap="handleTap">
    {{item.name}}
  </view>
</scroll-view>

js

// pages/menu/menu.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    // 菜单数据
    menuList: [
      { name: "全部分类" },
      { name: "拼团" },
      { name: "限时" },
      { name: "新人" },
      { name: "爆品" },
      { name: "日用品" },
      { name: "床上用品" },
      { name: "水果类" },
    ],
    selectedIndex: 0, // 当前点击的菜单索引
    scrollLeft: 0, // 滚动条距离左边的距离
    menuWidth: 0, // 菜单宽度
    menuItemArr: [], // 菜单所有的子项数组
  },
  onReady: function () {
    let _this = this;
    const queryDom = wx.createSelectorQuery().in(_this);
    // 获取菜单整体的宽度
    queryDom
      .select(".scroll-menu")
      .boundingClientRect()
      .exec(function(res) {
        console.log(res);
        _this.setData({
          menuWidth: res[0].width
        });
      });
    // 获取菜单所有子项数据
    let arr = [];
    queryDom
      .selectAll(".menu-item")
      .boundingClientRect()
      .exec(function(res) {
        console.log(res);
        res[1].forEach(item => {
          arr.push({ width: item.width, left: item.left });
        });
        _this.setData({
          menuItemArr: arr
        });
      });
    console.log(_this.data.menuWidth, _this.data.menuItemArr);
  },
  // 事件点击
  handleTap(e) {
    let selectedIndex = e.target.dataset.index; // 点击的当前元素索引
    let selectedItem = this.data.menuItemArr[selectedIndex]; // 点击的当前菜单item数据
    if (selectedItem) {
      // 滚动的距离 = 当前点击元素距离左边的距离-(菜单的宽度-当前点击元素的宽度)/2
      let targetDistance = selectedItem.left - (this.data.menuWidth - selectedItem.width) / 2;
      // 只有距离大于0的时候，需要滚动，否则滚动条还需要在开头
      targetDistance = targetDistance < 0 ? 0 : targetDistance;
      this.setData({
        scrollLeft: targetDistance,
        selectedIndex
      });
    }
  }
})

wxss

.scroll-menu {
  width: 100%;
  height: 40px;
  display: flex;
  flex-wrap: nowrap;
  border-bottom: 2rpx solid #eee;
  padding: 0 20rpx;
  box-sizing: border-box;
}
.menu-item {
  white-space: nowrap;
  display: flex;
  align-items: center;
  margin-right: 40rpx;
}
.activeMenu {
  color: red;
}

效果图