预览

这是一个用于切换房间的横向选择器

代码预览&详解

<scroll-view scroll-x="{{true}}" scroll-y="{{false}}" scroll-left="{{roomLeft}}" scroll-with-animation="{{true}}" class="top">
  <view class="roomPiker {{currentRoom == roomIndex && 'active'}} {{roomIndex === 0 ? 'firstPick' : ''}} {{roomIndex === roomList.length - 1 ? 'lastPick' : ''}}" data-current="{{roomIndex}}" wx:for="{{roomList}}" wx:key="roomIndex" wx:for-index="roomIndex" wx:for-item="Room" catchtap="handleRoomChange">
    <view class="pickerContainer">
      <view class="round">{{Room.roundYear}}年{{Room.roundMonth}}月</view>
      <view class="roomText {{currentRoom == roomIndex && 'active'}}">{{Room.room}}房</view>
    </view>
  </view>
</scroll-view>

使用官方组件scroll-view，首先启用横向滚动，禁用纵向滚动：scroll-x="{{true}}" scroll-y="{{false}}"（tip：参数要带{{}}），启用动画过渡scroll-with-animation，最后绑定滚动条位置scroll-Left；

接着遍历打印房间数组roomList，被选中的房间采用.roomPicker.active，第一个索引值为0房间元素margin-left设置为calc(50% - 32px)，最后一个元素的margin-right则设置为calc(50% - 32px)，这样就可以实现首尾元素都可以居中显示了；/*每个房间元素的宽度width是64px，所以要减去一半宽度*/

wxml的逻辑差不多就是这样。

.top {
  height: 64px;
  background-color: #FAFAFA;
  margin-top: 100px;
  padding-top: 9px;
  padding-bottom: 9px;
    /*这里避个坑，scroll-view的样式中尽量不要用左右的padding，
否则列表元素较少的时候会出现后面的元素溢出却不能滚动显示的问题，详情见
本文末问答参考*/
  white-space: nowrap;/*必要属性*/
  transition: all 0.5s ease;
  position: relative;/*必要属性*/
}
.roomPiker {
  display: inline-block;/*必要属性*/
  width: 64px;
  height: 64px;
  background-color: #E1F5B5;
  margin-right: 9px;
  /* 防止高度塌陷 */
  vertical-align: top;/*必要属性*/
}
.pickerContainer {
  display: grid;
  place-items: center;
}
.round {
  font-size: 12px;
  color: #383838;
}
.roomText {
  margin-top: 4px;
  font-size: 18px;
  color: #383838;
}
.roomPiker.firstPick {
  margin-left: calc(50% - 32px);
}
.roomPiker.lastPick {
  margin-right: calc(50% - 41px);
}
.roomPiker.active {
  background-color: #A5D63F;
}
.roomText.active {
  font-weight: 550;
  color: #000000;
}

wxss需要注意的地方不多，代码中注释的地方必要。

Page({
  data: {
    roomList: [{
      room: 501,
      roundYear: 2023,
      roundMonth: 11
    }, {
      room: 502,
      roundYear: 2023,
      roundMonth: 11
    }, {
      room: 503,
      roundYear: 2023,
      roundMonth: 11
    }, {
      room: 504,
      roundYear: 2023,
      roundMonth: 11
    }, {
      room: 505,
      roundYear: 2023,
      roundMonth: 11
    }, {
      room: 506,
      roundYear: 2023,
      roundMonth: 11
    }],
    currentRoom: 0, //当前显示房间索引
    roomLeft: 0, //scroll-view滚动条位置，即距离左边的距离
  },

  handleRoomChange(e) {//处理点击事件
    let {
      current
    } = e.currentTarget.dataset;
    if (this.data.currentRoom == current || current == undefined)
      return;
    this.setData({
      currentRoom: current
    })
    this.getScrollLeft(); //点击后调用改变滚动条位置的函数
  },

  getScrollLeft() {//改变滚动条位置，使选中元素在屏幕中央显示
    const query = wx.createSelectorQuery();//创建查询对象
    query.selectAll(".roomPiker").boundingClientRect();
    //调用selectAll方法选择所有class为.roomPiker的元素，并调用boundingClientRect方法获取它们的边界信息。
    query.exec(res => {
      console.log(res)
      let num = 0;
      for (let i = 0; i < this.data.currentRoom; i++) {
        //num += res[0][i].width;
        num += (res[0][i].width + 9)/*记得加上元素间的间隔*/
      }//根据当前选中元素前面所有元素的宽度和水平间距计算出滚动条左边距离
      const scrollLeft = Math.ceil(num);//取整
      this.setData({
        roomLeft: scrollLeft,
      });
    })
  }
})

本人是一个学生新手，这只是一篇学习笔记，仅供参考，欢迎指正~

文档参考：https://developers.weixin.qq.com/miniprogram/dev/component/scroll-view.html

问答参考：https://developers.weixin.qq.com/community/develop/doc/00002843c78850e695a0f3dcc6b800