• 微信小程序之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>

  • 相关阅读:
    国际短信平台哪家好？
    图片批处理工具 PhotoMill X直装 for mac
    APK 签名 v1 v2 步骤
    Day12 尚硅谷JUC——集合的线程安全
    Istio服务网格进阶⑦：Istio流量治理之故障注入与重试
    LeetCode 1280. 学生们参加各科测试的次数
    超详细的mysql多表操作教程
    录音m4a怎么转换成mp3
    05 MIT线性代数-转置,置换,向量空间Transposes, permutations, spaces
    Java:设计模式七大原则整理
  • 原文地址：https://blog.csdn.net/qq_39772439/article/details/136669767