devbox
小小林熬夜学编程
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

uni-app 简单顶部tab切换菜单3—可滑动切换菜单_uniapp tab

作者：小小林熬夜学编程 | 2024-03-25 20:55:00

赞

踩

uniapp tab

 

顶部tab是可滑动，用scroll-view实现，内容部分比较潦草，可以自行更改，话不多说上代码，最后有完整的代码（复制即可用）

HTML 

  1. <template>
  2. 	<view>
  3. 		<!-- tab部分 -->
  4. 		<swiper class="ct_tab">
  5. 			<swiper-item  :class="{ 'ct_active': index == tabCur }" v-for="(item, index) in tabList" :key="index" class="ct_item"  @click="clickCtTab(index)">
  6. 				<text  v-text="item.title"></text>
  7. 			</swiper-item>
  8. 		</swiper>
  9. 		
  10. 		<!-- 内容信息 -->
  11. 		<view v-if="tabCur===0">
  12. 			<view>全部信息</view>
  13. 		</view>
  14. 		<view v-if="tabCur===1">
  15. 			<view>水果</view>
  16. 		</view>
  17. 		<view v-if="tabCur===2">
  18. 			<view>蔬菜</view>
  19. 		</view>
  20. 		<view v-if="tabCur===3">
  21. 			<view>调味品</view>
  22. 		</view>
  23. 		<view v-if="tabCur===4">
  24. 			<view>肉类</view>
  25. 		</view>
  26. 		<view v-if="tabCur===5">
  27. 			<view>油类</view>
  28. 		</view>
  29. 		<view v-if="tabCur===6">
  30. 			<view>米类</view>
  31. 		</view>
  32. 		<view v-if="tabCur===7">
  33. 			<view>海鲜</view>
  34. 		</view>
  35. 		
  36. 	</view>
  37. </template>
JS

 

  1. <script>
  2. 	export default {
  3. 		data() {
  4. 			return {
  5. 				tabCur:0,
  6. 				tabList:[
  7. 					{
  8. 						title:'全部',
  9. 					},{
  10. 						title:'水果',
  11. 					},{
  12. 						title:'蔬菜',
  13. 					},{
  14. 						title:'调味品',
  15. 					},{
  16. 						title:'肉类',
  17. 					},{
  18. 						title:'油类',
  19. 					},{
  20. 						title:'米类',
  21. 					},{
  22. 						title:'海鲜',
  23. 					}
  24. 				]
  25. 			}
  26. 		},
  27. 		methods: {
  28. 			clickCtTab(ctCur){
  29. 				this.tabCur = ctCur
  30. 				console.log('点击了--->'+this.tabCur)
  31. 			}
  32. 		}
  33. 	}
  34. </script>

CSS

  1. <style>
  2. 	.ct_tab{
  3. 	    width: 698upx;
  4. 		height: 100rpx;
  5. 	    margin: 0 auto;
  6. 	    padding: 30upx 0;
  7. 	    font-size: 26upx;
  8. 	    font-weight: bold;
  9. 	    color: #c0c8d0;
  10. 	    white-space: nowrap;
  11. 	    display: flex;
  12. 	    overflow: hidden;
  13. 	}
  14. 	.ct_item{
  15. 	    width: 150upx;    
  16. 	    padding: 30upx 0;
  17. 	    display: inline-block;
  18. 	}
  19. 	.ct_item text{
  20. 	    padding: 30upx 0;
  21. 	}
  22. 	.ct_active{
  23. 	    color:#007AFF;
  24. 	}
  25. 	.ct_active text{
  26. 	    border-bottom: 2px solid #007AFF;
  27. 	}
  28. 	swiper{
  29. 	    width:100%;
  30. 	}
  31. 	
  32. 	swiper-item{
  33. 	    width: 150upx !important;
  34. 	}
  35. </style>

完整代码

  1. <template>
  2. 	<view>
  3. 		<!-- tab部分 -->
  4. 		<swiper class="ct_tab">
  5. 			<swiper-item  :class="{ 'ct_active': index == tabCur }" v-for="(item, index) in tabList" :key="index" class="ct_item"  @click="clickCtTab(index)">
  6. 				<text  v-text="item.title"></text>
  7. 			</swiper-item>
  8. 		</swiper>
  9. 		
  10. 		<!-- 内容信息 -->
  11. 		<view v-if="tabCur===0">
  12. 			<view>全部信息</view>
  13. 		</view>
  14. 		<view v-if="tabCur===1">
  15. 			<view>水果</view>
  16. 		</view>
  17. 		<view v-if="tabCur===2">
  18. 			<view>蔬菜</view>
  19. 		</view>
  20. 		<view v-if="tabCur===3">
  21. 			<view>调味品</view>
  22. 		</view>
  23. 		<view v-if="tabCur===4">
  24. 			<view>肉类</view>
  25. 		</view>
  26. 		<view v-if="tabCur===5">
  27. 			<view>油类</view>
  28. 		</view>
  29. 		<view v-if="tabCur===6">
  30. 			<view>米类</view>
  31. 		</view>
  32. 		<view v-if="tabCur===7">
  33. 			<view>海鲜</view>
  34. 		</view>
  35. 		
  36. 	</view>
  37. </template>
  38.  
  39. <script>
  40. 	export default {
  41. 		data() {
  42. 			return {
  43. 				tabCur:0,
  44. 				tabList:[
  45. 					{
  46. 						title:'全部',
  47. 					},{
  48. 						title:'水果',
  49. 					},{
  50. 						title:'蔬菜',
  51. 					},{
  52. 						title:'调味品',
  53. 					},{
  54. 						title:'肉类',
  55. 					},{
  56. 						title:'油类',
  57. 					},{
  58. 						title:'米类',
  59. 					},{
  60. 						title:'海鲜',
  61. 					}
  62. 				]
  63. 			}
  64. 		},
  65. 		methods: {
  66. 			clickCtTab(ctCur){
  67. 				this.tabCur = ctCur
  68. 				console.log('点击了--->'+this.tabCur)
  69. 			}
  70. 		}
  71. 	}
  72. </script>
  73.  
  74. <style>
  75. 	.ct_tab{
  76. 	    width: 698upx;
  77. 		height: 100rpx;
  78. 	    margin: 0 auto;
  79. 	    padding: 30upx 0;
  80. 	    font-size: 26upx;
  81. 	    font-weight: bold;
  82. 	    color: #c0c8d0;
  83. 	    white-space: nowrap;
  84. 	    display: flex;
  85. 	    overflow: hidden;
  86. 	}
  87. 	.ct_item{
  88. 	    width: 150upx;    
  89. 	    padding: 30upx 0;
  90. 	    display: inline-block;
  91. 	}
  92. 	.ct_item text{
  93. 	    padding: 30upx 0;
  94. 	}
  95. 	.ct_active{
  96. 	    color:#007AFF;
  97. 	}
  98. 	.ct_active text{
  99. 	    border-bottom: 2px solid #007AFF;
  100. 	}
  101. 	swiper{
  102. 	    width:100%;
  103. 	}
  104. 	
  105. 	swiper-item{
  106. 	    width: 150upx !important;
  107. 	}
  108. </style>
  109.

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/小小林熬夜学编程/article/detail/312418
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。