小程序顶部选项卡(实现效果，选中的元素居中显示

小程序顶部选项卡(实现效果，选中的元素居中显示

图中实现的效果是基于微信小程序提供的scroll-view组件实现的，用到的属性如下：

scroll-x（允许横向滚动）
scroll-left （设置横向滚动条位置）
scroll-with-animation （在设置滚动条位置时使用动画过渡）

实现的效果

wxml代码

<scroll-view class="tab_list" scroll-left="{{tabList[tabKey].tabLeft}}" scroll-with-animation="{{true}}" scroll-y="{{false}}" scroll-x="{{true}}" >
	<view class="pack" style="width:{{tabList.length * tabItemWidht}}px">
		<view wx:for="{{tabList}}" wx:key="key" wx:for-index="key" class="{{key == tabKey?'name cut_name':'name'}}" data-key="{{key}}" bindtap="tabOpt">{{item.name}}</view>
	</view>
</scroll-view>

wxss代码

.tab_list{position: relative; background-color: #ffffff;}
.tab_list .pack{display: flex; justify-content: space-between; flex-wrap: wrap;}
.tab_list .name{width: 78px; height: 48px; line-height: 48px; border-bottom: 2px #ffffff solid; text-align: center;}
.tab_list .cut_name{border-bottom: 2px #00ff00 solid; color: #00ff00; font-weight: bold;}
::-webkit-scrollbar{display: none;}

js代码

const app = getApp();
data:{
    screen: app.globalData, // 这里是当前屏幕的宽高，只是我在app.js中已经获取到了，所以这就直接调用了
    tabList:[{id:1,name:'标题'},{id:2,name:'标题1'},{id:3,name:'标题2'},{id:4,name:'标题3'},{id:5,name:'标题4'},{id:6,name:'标题5'},{id:7,name:'标题6'},{id:8,name:'标题7'},{id:9,name:'标题8'},{id:10,name:'标题9'},{id:11,name:'标题10'},{id:12,name:'标题11'},{id:12,name:'标题12'},{id:14,name:'标题13'},{id:15,name:'标题14'},{id:16,name:'标题15'},{id:17,name:'标题16'}], // 这是一个简单的数组里面内容自定义
    tabItemWidht: 80, // 这是每个元素块的宽度
    tabKey:2, // 当前选中元素的下标
},

onLoad(){
    this.setTabSite();
},

/* 选择元素 */
tabOpt(e){
    this.setData({tabKey: e.currentTarget.dataset.key});
  },

/* 重点是这段计算代码 */
setTabSite(){
	let list = this.data.tabList;
    let screen = this.data.screen.screenWidth / 2;
    let w = this.data.tabItemWidht;
    for(let i in list){
      if((i * w) <= screen){
        if(((Number(i) + 1) * w) >= screen) list[i].tabLeft = (((Number(i) + 1) * w) - screen + (w / 2) - w);
        else list[i].tabLeft = 0;
      }else{
        list[i].tabLeft = (i * w) - screen + (w / 2);
      }
    }
    this.setData({tabList: list});
},

最后总结一下我实现它的逻辑，我先拿到屏幕的宽度除以2，拿到了屏幕居中的位置，接下来开始循环列表，第一个if条件我拿到了小于等于屏幕居中位置的元素，第二个if条件我拿到了第一个条件中位于屏幕居中位置的元素。并给上对应的值。

补充：写的不好大佬勿喷，大佬勿喷，大佬勿喷，如果有好的建议或者方法请留言谢谢