uni-app 实现一个选项卡

<template>
	<view  class="tab">
		<scroll-view  class="tab-scroll"   scroll-x >
			<view class="tab-scroll_box" >
				<view  v-for="item  in  list" class="tab-scroll_item">
					{{item.name}}
				</view>
			</view>
		</scroll-view>
		<view  class="tab-icons">
			<uni-icons type="gear" size="26" color="#666"></uni-icons>
		</view>
	</view>
</template>

<script>
	export default {
		name:"tab",
		data() {
			return {
				list:[
					{
						name:"uni-app"
					},
					{
						name:"vue"
					},
					{
						name:"java"
					},
					{
						name:"php"
					},
					{
						name:"html"
					},
					{
						name:"pythoy"
					},
					{
						name:"git"
					}
				]
			};
		}
	}
</script>

<style  lang="scss">
  .tab{
	  display: flex;
	  width: 100%;
	  background-color: #FFFFFF;
	  border-bottom: 1px  #f5f5f5  solid;
	  box-sizing: border-box;
	  .tab-scroll{
		  flex: 1;//撑满整个页面
		  overflow: hidden;
		  box-sizing: border-box;
		  .tab-scroll_box{
		  		  display: flex;
		  		  height: 45px;
		  		  align-items: center;
		  		  flex-wrap: nowrap;
		  		  box-sizing: border-box;
		  		  .tab-scroll_item{
		  			  flex-shrink: 0;//不让元素进行挤压
		  			  padding: 0  10px;
		  			  color: #333;
		  			  font-size: 14px;
		  		  }
		  }
	  }
	   
	  .tab-icons{
		  position: relative;
		  display: flex;
		  justify-content: center;
		  align-items: center;
		  width: 45px;
		  &::after{
			  content: "";
			  position: absolute;
			  top: 12px;
			  bottom: 12px;
			  left: 0;
			  width: 1px;
			  background-color: #ddd;
		  }
	  }
  }
</style>

效果图：