小程序实现横向滚动与点击滚动居中实现小程序横向滚动，点击item可以切换显示，同时能够满足点击item后，当前的item

首先是实现一个最基础版本的小程序横向滚动，并且点击item可以切换显示，效果如下图：

实现代码：

<-- wxml部分-->
<view class="wrapper">
  <view class="content">{{currentitem}}</view>
  <scroll-view class="scroll-box" scroll-x="true" scroll-with-animation="true" scroll-left="{{scrollLeft}}">
    <view class="scroll-item {{item.name==currentitem?'active':''}}" wx:for="{{list}}"  wx:key="item" bind:tap="changeItem" data-item="{{item}}">{{item.name}}</view>
  </scroll-view>
</view>

<-- js部分 -->
Page({
  data: {
    currentitem:'',
    list:[
      {name:'类型1',id:1},
      {name:'类型2',id:2},
      {name:'类型3',id:3},
      {name:'类型4',id:4},
      {name:'类型5',id:5},
      {name:'类型6',id:6},
      {name:'类型7',id:7},
      {name:'类型8',id:8},
      {name:'类型9',id:9},
    ],
    scrollLeft:0
  },
  onLoad(options){
    this.setData({
      currentitem:this.data.list[0].name
    })
  },
  changeItem(e){
    const {item} = e.target.dataset
    this.setData({
      currentitem:item.name
    })
  }
})

<-- css部分 -->
.wrapper {
  height: 100vh;
  background-color: #ccc;
}

.content {
  width: 100%;
  height: 300px;
  line-height: 300px;
  text-align: center;
  font-size: 30px;
}

.scroll-box {
  width: 100%;
  position: fixed;
  bottom: 0;
  left: 0;
  background-color: #fff;
  padding: 20px 20px;
  padding-bottom: calc(20px + env(safe-area-inset-bottom));
  white-space: nowrap;
  box-sizing: border-box;
}

.scroll-item {
  display: inline-block;
  padding: 3px 10px;
  white-space: nowrap;
  border-radius: 10px;
  background-color: aqua;
  margin-right: 10px;
}

.active{
  background-color: aqua;
}

但是在实际开发过程中，总是会遇到一些复杂的场景，比如点击了横向滚动上的item后，被点击的item可以居中显示，或者本身显示一半的item可以全部显示，效果如下：

这种就可以通过增加scroll-left属性配合实现，该值可以设置滚动条滚动的位置。

实现代码：

<view class="wrapper">
  <view class="content">{{currentitem}}</view>
  <scroll-view class="scroll-box" scroll-x="true" scroll-with-animation="true" scroll-left="{{scrollLeft}}">
    <view class="scroll-item {{item.name==currentitem?'active':''}}" wx:for="{{list}}" wx:key="index" bind:tap="changeItem" data-item="{{item}}" data-index="{{index}}">{{item.name}}</view>
  </scroll-view>
</view>

Page({
  data: {
    currentitem:'',
    list:[
      {name:'类型1',id:1},
      {name:'类型2',id:2},
      {name:'类型3',id:3},
      {name:'类型4',id:4},
      {name:'类型5',id:5},
      {name:'类型6',id:6},
      {name:'类型7',id:7},
      {name:'类型8',id:8},
      {name:'类型9',id:9},
    ],
    scrollLeft:0
  },
  onLoad(options){
    this.setData({
      currentitem:this.data.list[0].name
    })
  },
  changeItem(e){
    const {item,index} = e.target.dataset
    this.setData({
      currentitem:item.name
    })
    let that = this
    wx.createSelectorQuery().selectAll('.scroll-item').boundingClientRect(function (rects) {
      let widthNum = 0,windowWidth = wx.getSystemInfoSync().windowWidth
      rects.slice(0, index + 1).forEach(ele => {
        widthNum += (ele.width+5)
      })
      that.setData({
        scrollLeft: widthNum - windowWidth / 2
      })
    }).exec()
  }
})

.wrapper {
  height: 100vh;
  background-color: #ccc;
}

.content {
  width: 100%;
  height: 300px;
  line-height: 300px;
  text-align: center;
  font-size: 30px;
}

.scroll-box {
  width: 100%;
  position: fixed;
  bottom: 0;
  left: 0;
  background-color: #fff;
  padding: 20px 20px;
  padding-bottom: calc(20px + env(safe-area-inset-bottom));
  white-space: nowrap;
  box-sizing: border-box;
}

.scroll-item {
  display: inline-block;
  padding: 3px 10px;
  white-space: nowrap;
  border-radius: 10px;
  background-color: #fff;
  border: 1px solid aqua;
  margin-right: 10px;
}
.active{
  background-color: aqua;
}

此时，如果横向滚动条后面的内容还有很多，足够居中显示时会优先将点击的item滚动到居中的位置，如果滚动条已经到了最后，就会靠右将点击的item全部显示出来，而不会出现第一个视频中可能点击了item但是只显示一半的情况。