uni-app 实现一个选项卡

痛定思痛。 2022-10-16 12:26 173阅读 0赞

<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>

效果图：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTkzMjE1Nw_size_16_color_FFFFFF_t_70]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTkzMjE1Nw_size_16_color_FFFFFF_t_70]: /images/20221014/ff1a6476de7f49a2b8e859f02811ccc5.png