uni app 根据选项卡下标跳转对应选项卡页面

一时失言乱红尘 2021-09-07 06:06 590阅读 0赞

A页面根据下标跳转B选项卡的对应位置

<view class="night-box">
    	<view @tap="goincident(0)">1</view>
    	<view @tap="goincident(1)">2</view>
    	<view @tap="goincident(2)">3</view>
    	<view @tap="goincident(3)">4</view>
    </view>

//根据页面跳转事件对应状态
    goincident(num) { 
    	uni.navigateTo({ 
    	url: `../mon-telemetry/mon-telemetry?type=${ num}`
    	})
    }

B页面根据传入的状态，对应显示选项卡页面

<u-navbar :is-back="true" back-icon-color="#fff" title="" :background="background">
    	<view class="u-tabs-box">
    		<u-tabs-swiper activeColor="#ffffff" inactive-color="#ffffff" ref="tabs" :list="list" :current="current" @change="change" :is-scroll="false" swiperWidth="750" bg-color='#2E95FF'></u-tabs-swiper>
    	</view>
    </u-navbar>
    
    <swiper class="swiper-box" :current="swiperCurrent" @transition="transition" @animationfinish="animationfinish">
    	
    	<swiper-item class="swiper-item">
    		<scroll-view scroll-y style="height: 100%;width: 100%;">
    			<view class="page-box">
    			
    			</view>
    		</scroll-view>
    	</swiper-item>	
    	
    </swiper>

data() { 
    			return { 
    				background: { 
    					backgroundColor: '#2E95FF',
    				},
    				list: [{  //选项卡名称
    						name: '1'
    					},
    					{ 
    						name: '2'
    					},
    					{ 
    						name: '3'
    					},
    					{ 
    						name: '4',
    					}
    				],
    				current: 0,
    				swiperCurrent: 0,
    				tabsHeight: 0,
    				dx: 0,
    			};
    		},
    		
    		onLoad(option) { 
    			this.current = option.type
    			this.swiperCurrent = option.type
    			｝