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

微信小程序之vue按钮切换内容变化

作者：weixin_40725706 | 2024-03-18 08:41:22

赞

踩

微信小程序之vue按钮切换内容变化

效果图如下；

上代码

  1. <template>
  2. 	<view class="content">
  3. 		<view class="searchDiv">
  4. 			 <view class="paytab">
  5. 			 	 <view class="buttab" v-for="(t,index) in tabList" :key="index" @click="tabsOn(t.id)" >
  6. 					 <text :class="t.id == tabsId ? 'fontColorBox' : 'default'">{{t.title}}</text>
  7. 					 <hr :class="t.id == tabsId ? 'lineBox' : 'default'"/>
  8. 			 	 </view>
  9. 			 </view>
  10. 			<view class="jzalldiv">
  11. 				<image class="paylog" src="../../static/images/1.png"></image>
  12. 				<view class="jzall" bindtap="showSelectBox">
  13. 				  支付宝	
  14. 				</view> 
  15. 				<image class="sanjiao" src="../../static/sanjiao.png"></image>
  16. 				<input type="text" class="moneyInput" placeholder="￥0.00"/>
  17. 			</view>
  18. 		</view>
  19. 		  
  20. 	
  21. 	   <!-- 内容布局 -->
  22. 	    <swiper @click="slideOn" :current="tabsId" circular>
  23. 	        <!-- circular 启用循环滑动 -->
  24. 	        <swiper-item>
  25. 	            <view class="paytypelist">
  26. 	            	<view class="paytype">
  27. 	            		<image src="../../static/images/1.png" class="typeImg"></image>
  28. 	            		<view class="typeName">
  29. 	            			蔬菜
  30. 	            		</view>
  31. 	            	</view>
  32. 	            	 <view class="paytype">
  33. 	            		<image src="../../static/images/1.png" class="typeImg"></image>
  34. 	            		<view class="typeName">
  35. 	            			蔬菜
  36. 	            		</view>
  37. 	            	 </view>
  38. 	            	 <view class="paytype">
  39. 	            		<image src="../../static/images/1.png" class="typeImg"></image>
  40. 	            		<view class="typeName">
  41. 	            			蔬菜
  42. 	            		</view>
  43. 	            	 </view>
  44. 	            	 <view class="paytype">
  45. 	            		<image src="../../static/images/1.png" class="typeImg"></image>
  46. 	            		<view class="typeName">
  47. 	            			蔬菜
  48. 	            		</view>
  49. 	            	 </view>
  50. 	            	 <view class="paytype">
  51. 	            		<image src="../../static/images/1.png" class="typeImg"></image>
  52. 	            		<view class="typeName">
  53. 	            			蔬菜
  54. 	            		</view>
  55. 	            	 </view>
  56. 	            	 <view class="paytype">
  57. 	            		<image src="../../static/images/1.png" class="typeImg"></image>
  58. 	            		<view class="typeName">
  59. 	            			蔬菜
  60. 	            		</view>
  61. 	            	 </view>
  62. 	            	  <view class="paytype">
  63. 	            		<image src="../../static/images/1.png" class="typeImg"></image>
  64. 	            		<view class="typeName">
  65. 	            			蔬菜
  66. 	            		</view>
  67. 	            	  </view>
  68. 	            	  <view class="paytype">
  69. 	            		<image src="../../static/images/1.png" class="typeImg"></image>
  70. 	            		<view class="typeName">
  71. 	            			蔬菜
  72. 	            		</view>
  73. 	            	  </view>
  74. 	            	  <view class="paytype">
  75. 	            		<image src="../../static/images/1.png" class="typeImg"></image>
  76. 	            		<view class="typeName">
  77. 	            			蔬菜
  78. 	            		</view>
  79. 	            	  </view>
  80. 	            	  <view class="paytype">
  81. 	            		<image src="../../static/images/1.png" class="typeImg"></image>
  82. 	            		<view class="typeName">
  83. 	            			自定义
  84. 	            		</view>
  85. 	            	  </view>
  86. 	            </view>
  87. 	        </swiper-item>
  88. 	        <swiper-item>
  89. 	            <view class="paytypelist">
  90. 	            	<view class="paytype">
  91. 	            		<image src="../../static/images/1.png" class="typeImg"></image>
  92. 	            		<view class="typeName">
  93. 	            			蔬菜
  94. 	            		</view>
  95. 	            	</view>
  96. 	            	 <view class="paytype">
  97. 	            		<image src="../../static/images/1.png" class="typeImg"></image>
  98. 	            		<view class="typeName">
  99. 	            			蔬菜
  100. 	            		</view>
  101. 	            	 </view>
  102. 	            	 <view class="paytype">
  103. 	            		<image src="../../static/images/1.png" class="typeImg"></image>
  104. 	            		<view class="typeName">
  105. 	            			蔬菜
  106. 	            		</view>
  107. 	            	 </view>
  108. 	            	 <view class="paytype">
  109. 	            		<image src="../../static/images/1.png" class="typeImg"></image>
  110. 	            		<view class="typeName">
  111. 	            			蔬菜
  112. 	            		</view>
  113. 	            	 </view>
  114. 	            	 <view class="paytype">
  115. 	            		<image src="../../static/images/1.png" class="typeImg"></image>
  116. 	            		<view class="typeName">
  117. 	            			蔬菜
  118. 	            		</view>
  119. 	            	 </view>
  120. 	            	 <view class="paytype">
  121. 	            		<image src="../../static/images/1.png" class="typeImg"></image>
  122. 	            		<view class="typeName">
  123. 	            			蔬菜
  124. 	            		</view>
  125. 	            	 </view>
  126. 	            	  <view class="paytype">
  127. 	            		<image src="../../static/images/1.png" class="typeImg"></image>
  128. 	            		<view class="typeName">
  129. 	            			蔬菜
  130. 	            		</view>
  131. 	            	  </view>
  132. 	            	
  133. 	            </view>
  134. 	        </swiper-item>
  135. 	        <swiper-item>
  136. 	            <view class="paytype">
  137. 	            	            		<image src="../../static/images/1.png" class="typeImg"></image>
  138. 	            	            		<view class="typeName">
  139. 	            	            			蔬菜
  140. 	            	            		</view>
  141. 	            </view>
  142. 	            <view class="paytype">
  143. 	            	            		<image src="../../static/images/1.png" class="typeImg"></image>
  144. 	            	            		<view class="typeName">
  145. 	            	            			蔬菜
  146. 	            	            		</view>
  147. 	            </view>
  148. 	            <view class="paytype">
  149. 	            	            		<image src="../../static/images/1.png" class="typeImg"></image>
  150. 	            	            		<view class="typeName">
  151. 	            	            			自定义
  152. 	            	            		</view>
  153. 	            </view>
  154. 	        </swiper-item>
  155. 	    </swiper>
  156. 	 
  157. 		 
  158. 	</view>
  159.  
  160. </template>
  161.  
  162. <script>
  163.  
  164. 		export default {
  165.   
  166. 			data() {
  167. 				return {
  168. 			 
  169. 				 "tabList": [// tab选项
  170. 							 {title: "支出",id: "0",},
  171. 							 {title: "收入",id: "1",},
  172. 							 {title: "转账",id: "2",},
  173. 						  ],
  174. 				 "tabsId": 0, //默认选型为装备
  175. 				}
  176. 			},
  177. 			 
  178. 			methods: { 
  179. 				 // 滑动时触发的事件
  180. 				    slideOn(e) {
  181. 				      this.tabsId=e;
  182. 				    },
  183. 				    //点击tab时触发
  184. 				    tabsOn(e) {
  185. 				        this.tabsId= e;
  186. 				    },
  187. 				 
  188. 			}
  189. 		}
  190. 	
  191. </script>
  192.  
  193. <style>
  194. 	
  195. 	 .paytype,.jdheadtitle1,.jdtop,.jdbottom,.jdheaddiv,.jdlist,.jdhead,.jdtitle,.selectTime,
  196. 	.picsView,.moneyInput,.paylog,.buttab,.paytab,.quxBut,.submitBut,.paybeizhu,.paytypelist,.outmoney,.jzalldiv,.sanjiao,.jzall{
  197. 		float: left;
  198. 	}
  199. 	.default{}
  200. 	.fontColorBox {
  201. 	  /* 选中tab样式 */
  202. 	  color: black;
  203. 	  font-size: 25px;
  204. 	  font-weight: bold;
  205. 	  
  206. 	}
  207. 	.lineBox {
  208. 	  /* 线条样式 */
  209. 	  width: 90rpx;
  210. 	  height: 8rpx;
  211. 	  background: black;
  212. 	  margin-top: 7rpx;
  213. 	  border-radius: 4rpx;
  214. 	}
  215. 	.addImgBtn {
  216. 		width:100%;
  217. 		float: left;
  218. 		margin-left: 30rpx;
  219. 		margin-top: 20rpx;
  220. 		border-top: 1rpx solid rgba(68,68,68,0.1);
  221. 		display: flex;
  222. 		align-items: center;
  223. 		justify-content: space-between;
  224. 		padding: 12rpx 24rpx;
  225. 		font-size: 30rpx;
  226. 		font-family: PingFang SC;
  227. 		font-weight: bold;
  228. 		color: #333333;
  229. 		
  230. 	}
  231. 	.addImgBtn image {
  232. 		float: left;
  233. 		width: 50rpx;
  234. 		height: 50rpx;
  235. 	}
  236. 	.picsView{
  237. 		margin-left: 30rpx;
  238. 	}
  239. 	.addImgBtn text{
  240. 		font-size: 11px;
  241. 		color: #2979FF;
  242. 		font-weight: 100;
  243. 	}
  244. 	.moneyInput{
  245. 		width: 50%;
  246. 		height: 40px;
  247. 		text-align: right;
  248. 		margin-left: 8%;
  249. 		font-size: 22px;
  250. 		font-weight: bold;
  251. 	}
  252. 	.buttab{
  253. 		height: 100%;
  254. 		margin-left: 10%;
  255. 		font-size: 20px;
  256. 		/* border-bottom: 2px solid red; */
  257. 	}
  258. 	 
  259. 	.paytab{
  260. 		width: 80%;
  261. 		margin-left: 15%;
  262. 		height: 30px;
  263. 	}
  264. 	.quxBut{
  265. 		background-color: red;
  266. 	}
  267. 	.submitBut{
  268. 	background-color: #7CFC00;	
  269. 	margin-bottom: 30px;
  270. 	}
  271. 	.quxBut,.submitBut{
  272. 		width: 80%;
  273. 		height: 25px;
  274. 		margin-left: 10%;
  275. 		margin-top: 15px;
  276. 		border-radius: 5px;
  277. 	    text-align: center;
  278. 		padding-top: 5px;
  279. 		color: 	white;
  280. 	}
  281. 	
  282. 	.paybeizhu{
  283. 		width: 80%;
  284. 		height: 120px;
  285. 		padding-left: 5px;
  286. 		padding-top: 5px;
  287. 		border-radius: 10px;
  288. 		margin-left: 10%;
  289. 		margin-top: 20px;
  290. 		border: 1px solid #C0C0C0;
  291. 	}
  292. 	.paytypelist{
  293. 		width: 80%;
  294. 		margin-top: 10px;
  295. 		margin-left: 10%;
  296. 	}
  297. 	 
  298. 	.paytype{
  299. 		width: 13%;
  300. 		height: 60px;
  301. 		margin-top: 10px;
  302. 		margin-left: 6%;
  303. 		font-size: 12px;
  304. 		border-radius: 10px;
  305. 	}
  306.     .typeImg{
  307. 		float: left;
  308. 		width: 100%;
  309. 		height: 40px;
  310. 		border-radius: 50%
  311. 	}
  312.     .typeName{
  313. 		float: left;
  314. 		width: 100%;
  315. 		height: 20px;
  316. 		padding-top: 5px;
  317. 		text-align: center;
  318. 	}
  319. 	 
  320. 	.dbTab{
  321. 		position: fixed;
  322. 		z-index: 29;
  323. 		width:40px;
  324. 		height:40px;
  325. 		border-radius: 50%;
  326. 		display: block;
  327. 		bottom: 10px;
  328. 		left: 48%;
  329. 	}
  330. 	.jdheadtitle1,.jdheadtitle2{
  331. 		font-size: 17px;
  332. 	}
  333. 	.jdheadtitle1{
  334. 		width: 70%;
  335. 		margin-top: 2%;
  336. 		overflow:hidden;
  337. 		white-space:nowrap; 
  338. 		text-overflow:ellipsis;
  339. 	}
  340. 	.jdheadtitle2{
  341. 		float: right;
  342. 		margin-right: 3%;
  343. 	    margin-top: 2%;
  344. 	}
  345. 	.jdtop,.jdbottom{
  346. 		width:100%;
  347. 		height: 30px;
  348. 	}
  349.  
  350. 	.jdbottom{
  351. 		 padding-top: 5px;
  352. 		 color: #cdcdcd;
  353. 		 font-size: 12px;
  354. 	}
  355. 	.jdlist:first-child{
  356. 		margin-top: 120px;
  357. 	}
  358. 	.jdlist{
  359. 		width: 100%;
  360. 		height: 60px;
  361. 	}
  362. 	.jdheaddiv{
  363. 		width: 20%;
  364. 		height: 60px;
  365. 	}
  366. 	.jdhead{
  367. 		width: 50px;
  368. 		height: 50px;
  369. 		margin-top: 5px;
  370. 		margin-left: 15px;
  371. 	}
  372. 	.jdtitle{
  373. 		width:80%;
  374. 		height: 60px;
  375. 		border-bottom: 1px solid #e7e6e1;
  376. 	}
  377. 	 
  378. 	.jzalldiv{
  379. 		width: 90%;
  380. 		height: 40px;
  381. 		margin-top: 20px;
  382. 		padding-bottom: 5px;
  383. 		padding-top: 10px;
  384. 		background-color: #F5F5F5;
  385. 		margin-left: 5%;
  386. 		border-radius: 10px;
  387. 	}
  388.  
  389. 	 
  390. 	.jzall{
  391. 		margin-left: 10px;
  392. 		margin-top: 5px;
  393. 		font-weight: bold;
  394. 		font-size: 20px;
  395. 	}
  396. 	.paylog{
  397. 		width: 35px;
  398. 		height:35px;
  399. 		margin-left: 10px;
  400. 	}
  401. 	.sanjiao{
  402. 		width: 12px;
  403. 		height: 12px;
  404. 		margin-left: 5px;
  405. 		margin-top: 15px;
  406. 	}
  407. 	 
  408.     .headall1{
  409. 		float: left;
  410. 		width: 100%;
  411. 		height: 50%;
  412. 	}
  413. 	 
  414. 	.searchDiv{
  415. 		width: 100%;
  416. 		float: left;
  417. 		/* background-color:#F5F5F5; */
  418. 	}
  419. 	page{
  420. 		font-family: "Lucida Calligraphy", cursive, serif, sans-serif;
  421. 		 /* background-color: #e7e6e1; e6e6e6*/
  422. 	}
  423. </style>

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

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

  

闽ICP备14008679号