4***@qq.com
4***@qq.com
  • 发布:2020-05-25 09:51
  • 更新:2021-08-26 18:02
  • 阅读:901

【报Bug】改变swiper当前的滑块current,数据正确,效果不生效

分类:uni-app

产品分类: uniapp/H5

PC开发环境操作系统: Mac

PC开发环境操作系统版本号: 10.15.4

HBuilderX类型: 正式

HBuilderX版本号: 2.6.16

浏览器平台: Chrome

浏览器版本: 最新

项目创建方式: HBuilderX

示例代码:
<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>  

操作步骤:

滑动和点击都可以切换,某次滑动后,再点击滑块不会生效

预期结果:

任意滑动点击都生效

实际结果:

滑动过后,数据正确,效果不生效

bug描述:

bug录屏 :http://gaojuqian.com/video/uniapp.mov

2020-05-25 09:51 负责人:无 分享
已邀请:
1***@qq.com

1***@qq.com

遇到类似问题,改变current, 对应的视图没变化

1***@qq.com

1***@qq.com

请问问题解决了吗?

要回复问题请先登录注册