在开发小程序时，不知大家有没遇过顶部自定义tab？我经常遇到。

效果图如下：

刚开始想用movable-view，但无法判断每个item具体的宽度，只能固定item宽并居中，但这样字数不同时，间距则不等宽，最终使用scroll-view。

实现代码

//index.wxml
<scroll-view class=‘tab_list’ scroll-x>
<view class=‘tab_item’ wx:for="{{tabList}}" wx:key="{{index}}">{{item}}</view>
</scroll-view>

//index.wxss
.tab_list {
  width: 750rpx;
  height: 90rpx;
  white-space: nowrap;
}

.tab_item {
  height: 90rpx;
  line-height: 90rpx;
  padding: 0 30rpx;
  background-color: lightgray;
  display: inline-block;
  margin-right: 2rpx;
}

::-webkit-scrollbar {
  display: none;
}

//index.js
Page({
data: {
tabList: [‘图像去雾’, ‘图像增强对比度’, ‘图片无损放大’, ‘黑白图片上色’, ‘拉伸图片恢复’]
},
onLoad: function(options) {
}
})

代码效果图：

若想看线上产品样式戳
识图取字tab 或
多多提顶部tab