uinapp导航栏切换时动态效果

先看最终效果图

搭建布局样式，循环出导航栏

<view class="list">
    <view v-for="i in list" @click="listSwitch(i.id)">
	    <p>{{i.tit}}</p>
    </view>
    <view class="animation" :style="`left:${leftL}`"></view>
</view>

配置导航栏数据

list: [
    {
    	id: 0,
	    tit: '全部'
    },
    {
    	id: 1,
    	tit: '待接单'
    },
    {
    	id: 2,
    	tit: '服务中'
    },
    {
    	id: 3,
    	tit: '已完成'
    }
],

点击时移动底部椭圆模块

methods: {
    listSwitch(data) {
    	if (data == 0) {
    		this.leftL = '0%'
    	}
    	if (data == 1) {
    		this.leftL = '25%'
    	}
    	if (data == 2) {
	    	this.leftL = '50%'
    	}
    	if (data == 3) {
    		this.leftL = '75%'
    	}
    }
}

设置css布局样式，添加过渡属性

    .list {
		width: 90%;
		height: 40px;
		margin: 0 auto;
		background-color: rgb(244, 244, 244);
		margin-top: 15px;
		border-radius: 30px;
		position: relative;
	}

	.list view {
		float: left;
		line-height: 40px;
		width: 25%;
		height: 40px;
		font-size: 14px;
		text-align: center;
	}

	.list p {
		position: relative;
		z-index: 99;
	}

	.animation {
		transition: 0.8s;
		transform: inherit;
		position: absolute;
		background-color: rgb(255, 255, 255);
		border-radius: 30px;
	}