评论

实现自定义等间隔的tab

使用scroll-view实现自定义等间隔tab。

在开发小程序时,不知大家有没遇过顶部自定义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

最后一次编辑于  2019-06-14  
点赞 2
收藏
评论
登录 后发表内容