<template>
<view>
<scroll-view class="grace-nav-bar">
<view class="tabs-container-view">
<view class="nav-item" v-for="(item, index) in getTabs" :key="index" @tap="navchang(index)">
<text class="nav-item-title grace-border">{{item}}</text>
</view>
<view class="nav-active-line-wrap"></view>
</view>
</scroll-view>
<view style="padding-top: 50rpx;">
<swiper :style="{height:mainHeight+'px'}" :current="swiperCurrent" @change="change" @transition="transition" @animationfinish="animationfinish">
<swiper-item v-for="(item1,index1) in getTabs" :key="index1">
<view class="dome">请点击上面导航栏测试,看控制台数值</view>
</swiper-item>
</swiper>
</view>
</view>
</template>
<script>
export default {
data() {
return {
swiperCurrent:0,
mainHeight:600,
getTabs: ['导航1', '导航2', '导航3','导航4']
}
},
methods: {
navchang(e){this.swiperCurrent=e},
change(e){},
transition({ detail: { dx } }){
console.log(dx)
},
animationfinish({ detail: { current } }){}
}
}
</script>
<style>
.dome{width: 750rpx;height: 2000rpx;background-color: #fafafa;}
.grace-nav-bar{flex-direction:row;}
.nav-item{flex-direction:column;}
.nav-item-title{width:100%;}
.nav-active{}
.nav-active-line-wrap{position: absolute;bottom: 0; opacity: 1;}
.nav-active-line{margin-top:5rpx;}
.grace-nav-center{justify-content:center; text-align:center;}
.tabs-container-view{position: relative;flex-direction: row;transition-property: background-color;transition-duration: .2s;}
</style>
1***@qq.com
- 发布：2020-08-18 21:18
- 更新：2021-03-19 11:42
- 阅读：792
产品分类： uniapp/App
PC开发环境操作系统： Windows
PC开发环境操作系统版本号： win10
HBuilderX类型： Alpha
HBuilderX版本号： 2.8.6
手机系统： Android
手机系统版本号： Android 7.1.1
手机厂商： 模拟器
手机机型： 华为
页面类型： nvue
打包方式： 离线
项目创建方式： HBuilderX
示例代码：
操作步骤：
transition({ detail: { dx } }){console.log(dx)},
transition({ detail: { dx } }){console.log(dx)},
预期结果：
应该跟苹果获取到的值是一样的
应该跟苹果获取到的值是一样的
实际结果：
跟苹果获取到的值不一样
跟苹果获取到的值不一样
bug描述：
IOS是正常的
安卓就不正常
