<view>
<view class="wrap">
<view class="nav-title">
<scroll-view class="swiper-nav-tab" scroll-x="true" scroll-with-animation="true">
<view class="tab-scroll-box">
<view class="tab-item" :class="[currentTab==0?'text-item-active':'text-item-active-no']" @click="swichNav(0)">
<text class="text-c" :class="[currentTab==0?'text-size-active':'text-size-active-no']" >最新</text>
</view>
<view class="tab-item" :class="[currentTab==1?'text-item-active':'text-item-active-no']" @click="swichNav(1)">
<text class="text-c" :class="[currentTab==1?'text-size-active':'text-size-active-no']" >推荐</text>
</view>
<view class="tab-item" :class="[currentTab==2?'text-item-active':'text-item-active-no']" @click="swichNav(2)">
<text class="text-c" :class="[currentTab==2?'text-size-active':'text-size-active-no']" >颜值</text>
</view>
<view class="tab-item" :class="[currentTab==3?'text-item-active':'text-item-active-no']" @click="swichNav(3)">
<text class="text-c" :class="[currentTab==3?'text-size-active':'text-size-active-no']" >关注</text>
</view>
<view class="tab-item" :class="[currentTab==4?'text-item-active':'text-item-active-no']" @click="swichNav(4)">
<text class="text-c" :class="[currentTab==4?'text-size-active':'text-size-active-no']" >导航</text>
</view>
</view>
</scroll-view>
</view>
</view>
</view>
</template>
<script>
export default {
components: {
},
data() {
return {
currentTab: 0,
}
},
onLoad() {
},
components: {
},
onReady() {
},
methods: {
// 点击标题切换当前页时改变样式
swichNav: function(index) {
this.currentTab = index;
},
}
}
</script>
<style>
.wrap {
flex-direction: column;
width: 750rpx;
}
.nav-title {
flex-direction: row;
justify-content: space-between;
align-items: center;
}
.swiper-nav-tab {
width: 600rpx;
position: relative;
background-color: #007AFF;
}
.tab-scroll-box {
flex-direction: row;
justify-content: space-around;
align-items: flex-end;
height: 150rpx;
}
.tab-item {
background-color: #19BE6B;
font-size: 20rpx;
flex: 1;
margin: 5rpx;
height: 100rpx;
flex-direction: row;
justify-content: center;
align-items: flex-end;
transition-property: height;
transition-duration:0.5s;
transition-delay:0.1s;
transition-timing-function: ease-in-out ;
}
.text-item-active{
height: 120rpx;
}
.text-item-active-no{
height: 100rpx;
}
.text-size-active{
font-size: 50rpx!important;
color: #5500ff!important;
}
.text-size-active-no{
font-size: 30rpx!important;
color: #aaffff!important;
}
.text-c{
color: #aaffff;
font-size: 30rpx;
transition-property: font-size,color;
transition-duration:0.2s;
transition-delay:0.1s;
transition-timing-function: ease-in-out ;
}
.swiper-box {
flex: 1;
}
</style>```

- 发布:2021-06-28 15:15
- 更新:2021-08-24 11:16
- 阅读:954
产品分类: uniapp/App
PC开发环境操作系统: Windows
PC开发环境操作系统版本号: windows10 2004 19041.1052
HBuilderX类型: 正式
HBuilderX版本号: 3.1.17
手机系统: iOS
手机系统版本号: iOS 13.4
手机厂商: 苹果
手机机型: iphonexr
页面类型: nvue
打包方式: 云端
项目创建方式: HBuilderX
示例代码:
操作步骤:
文件为 .nvue ,ios真机调试
文件为 .nvue ,ios真机调试
预期结果:
1.text 文本组件 在nvue文件,app调试下,transition有过渡效果(文字大小,文字颜色)
2.默认第一个选中样式,在选择其他item之后,可以恢复没有选中前的效果(高度有问题)
1.text 文本组件 在nvue文件,app调试下,transition有过渡效果(文字大小,文字颜色)
2.默认第一个选中样式,在选择其他item之后,可以恢复没有选中前的效果(高度有问题)
实际结果:
1.text文本组件 使用transition 没有过渡效果(改变字体大小,颜色等 没有过渡效果)
2.默认选中样式,选择其他item之后,一开始初始化选中的item高度有问题,导致没有还原默认样式
1.text文本组件 使用transition 没有过渡效果(改变字体大小,颜色等 没有过渡效果)
2.默认选中样式,选择其他item之后,一开始初始化选中的item高度有问题,导致没有还原默认样式
bug描述:
nvue下 app(ios) 出现以下问题
1.text文本组件 使用transition 没有过渡效果(改变字体大小,颜色等 没有过渡效果)
2.默认选中样式,选择其他item之后,一开始初始化选中的item高度有问题,导致没有还原默认样式
大大大大小白菜 (作者)
迟来的回复,好谢谢
2022-07-23 18:05