<template>
<view>
<!-- 头部 -->
<view class="nav-tabs">
<!-- 标题 -->
<view class="nav-header-tabs">
<view class="tabs-list" v-for="(item, index) in tabsList" :key="index" @click="changeCurrent(index)">
<view class="tabs-list-text" :class="{'currentTabs':isCurrentTabs===index}">
{{item.name}}
</view>
</view>
</view>
<!-- 标题 -->
<view class="tabs-bottom-block"></view>
</view>
<!-- 头部 -->
<!-- 内容 -->
<swiper class="swiper" @change="change" @transition="transition" :current="current">
<swiper-item>
<view class="current0">
秒杀订单
</view>
</swiper-item>
<swiper-item>
<view class="current1">
直播订单
</view>
</swiper-item>
</swiper>
<!-- 内容 -->
</view>
</template>
<script>
// 2020.5.23 14:39 基于 https://uniapp.dcloud.io/component/swiper
export default {
data() {
return {
isCurrentTabs: 0, //默认的tabs选择
current: 0, // 默认显示内容
tabsList: [{
name: "秒杀订单"
},
{
name: "直播订单"
},
]
}
},
methods: {
change(e) { //current 改变时会触发 change 事件
// 当前标题的样式,当前滑动显示内容
if (typeof(e) == "number") {
this.isCurrentTabs = e
console.log(this.isCurrentTabs);
} else {
this.isCurrentTabs = e.detail.current
console.log(this.isCurrentTabs);
}
},
transition(e) { //swiper-item 的位置发生改变时会触发 transition 事件
// console.log(e.detail.dx);
},
changeCurrent(index) {
// console.log(index);
this.current = this.current
// this.current = index
this.$nextTick(function() {
this.current = index
});
// console.log(this.current);
this.change(index)
// console.log(typeof(index));
}
}
}
</script>
<style>
@import url("./style.css");
</style>
- 发布:2020-05-25 09:51
- 更新:2021-08-26 18:02
- 阅读:2320
产品分类: uniapp/H5
PC开发环境操作系统: Mac
PC开发环境操作系统版本号: 10.15.4
HBuilderX类型: 正式
HBuilderX版本号: 2.6.16
浏览器平台: Chrome
浏览器版本: 最新
项目创建方式: HBuilderX
示例代码:
操作步骤:
滑动和点击都可以切换,某次滑动后,再点击滑块不会生效
滑动和点击都可以切换,某次滑动后,再点击滑块不会生效
预期结果:
任意滑动点击都生效
任意滑动点击都生效
实际结果:
滑动过后,数据正确,效果不生效
滑动过后,数据正确,效果不生效
bug描述:
bug录屏 :http://gaojuqian.com/video/uniapp.mov
2 个回复
1***@qq.com
遇到类似问题,改变current, 对应的视图没变化
1***@qq.com
请问问题解决了吗?