uni-app :左右滑动 swiper

ゝ一世哀愁。 2023-03-01 14:00 27阅读 0赞

官方文档 ： [https://uniapp.dcloud.io/component/swiper?id=swiper][https_uniapp.dcloud.io_component_swiper_id_swiper]

<template>
    	<view>
    		<view class="nav">
    			<view :class="current== 0 ? 'skyblue' : '' " @tap="onnav(0)">安装信息</view>
    			<view :class="current== 1 ? 'skyblue' : '' " @tap="onnav(1)">OBD数据</view>
    			<view :class="current== 1 ? 'span spanright' : 'span '"></view>
    		</view>
    		
    		// current : 当前所在滑块的 index 
    		// @change 事件 ： current 改变时会触发 change 事件，event.detail = {current: current, source: source} 
    		
    		<swiper :current="current" @change="onchange">
    			<swiper-item>
    				<view>
    					第一个页面
    				</view>
    			</swiper-item>
    			<swiper-item>
    				<view>
    					第二个页面
    				</view>
    			</swiper-item>
    		</swiper>
    	</view>
    
    </template>
    <script>
    	export default { 
    		data(){ 
    			return { 
    				current:0,
    			}
    		},
    		methods:{ 
    			onnav(index) { 
    				this.current = index;
    			},
    			onchange(e){ 
    				this.current = e.detail.current;
    			}
    			
    		}
    
    	}
    </script>
    <style lang="scss">
    	.nav { 
    		position: relative;
    		border-bottom: 1px solid #dddddd;
    		&::after { 
    			display: block;
    			content: "";
    			height: 0;
    			line-height: 0;
    			visibility: hidden;
    			clear: both;
    		}
    		view { 
    			float: left;
    			width: 50%;
    			text-align: center;
    			padding: 30rpx 0rpx;
    		}
    		
    		.span { 
    			width: 50%;
    			position: absolute;
    			padding: 4rpx 0rpx;
    			background-color: #2598e4;
    			bottom: 0;
    			left: 0;
    			transition: ease-in-out .2s;
    			transform: translateY(100%);
    		}
    		.spanright { 
    			left: 50%;
    		}
    		.skyblue { 
    			color: #2598e4;
    		}
    	}
    </style>

[https_uniapp.dcloud.io_component_swiper_id_swiper]: https://uniapp.dcloud.io/component/swiper?id=swiper