e***@163.com
e***@163.com
  • 发布:2021-11-29 17:39
  • 更新:2021-11-30 15:59
  • 阅读:4712

使用uview的u-tabs 官方swapper,现在滑动切换页面,顶部的tabs并不会动态根据传值动态切换

分类:uni-app
tab
<u-tabs :list="tabBars"   @click="ontabtap"  :current="tabIndex"  
         :activeStyle="{color:'#f56c6c',fontWeight:'bold',transform: 'scale(1)'}" lineColor="#f56c6c"></u-tabs>  
<swiper :current="tabIndex" class="swiper-box" style="flex: 1;" :duration="300" @change="ontabchange">  
            <swiper-item class="swiper-item" v-for="(tab,index1) in newsList" :key="index1">  
    </swiper-item>  
        </swiper>

这里监听的change时间将参数tabIndec修改了, 但断点看到u-tabs并没有获取到this.current,是不是我理解错了? 我现在想根据swipper左右滑动,动态的切换tabs.

2021-11-29 17:39 负责人:无 分享
已邀请:
小枫叶

小枫叶 - 外包接单加v:wlmk1234567 注明来意

这个是能够获取到的,它里面的demo有一个自带的change方法,请仔细查看一下demo

  • e***@163.com (作者)

    可能是我表述的有问题, 我现在使用的是uview的u-tabs实现的顶部标签,标签下面的内容区域使用的uni官方的swipper实现,swipper可以获取到current的值,但u-tabs无法根据swipper左右切换 获取到tabIndex这个值.导致的swipper左右切换不动态切换u-tabs的标签

    2021-11-30 09:34

e***@163.com

e***@163.com (作者)

如图所示

小枫叶

小枫叶 - 外包接单加v:wlmk1234567 注明来意

尝试修改这个呢?我以前也因为这个问题困扰了很久

e***@163.com

e***@163.com (作者)

<template>  
    <view>  
        <u-tabs :list="list1" @click="click" :current="tabIndex" @change="change"></u-tabs>  
        <u-swiper :list="list2" @change="change" @click="click"></u-swiper>  
    </view>  
</template>  
<script>  
    export default {  
        data() {  
            return {  
                tabIndex:0,  
                list1: [{  
                    name: '关注',  
                }, {  
                    name: '推荐',  
                }, {  
                    name: '电影'  
                }, {  
                    name: '科技'  
                }, {  
                    name: '音乐'  
                }, {  
                    name: '美食'  
                }, {  
                    name: '文化'  
                }, {  
                    name: '财经'  
                }, {  
                    name: '手工'  
                }],  
                list2: [  
                    'https://cdn.uviewui.com/uview/swiper/swiper1.png',  
                    'https://cdn.uviewui.com/uview/swiper/swiper2.png',  
                    'https://cdn.uviewui.com/uview/swiper/swiper3.png',  
                ]  
            }  
        },  
        methods: {  
            click(){  

            },  
            change(e){  
                this.tabIndex = e.current;  
                console.log(this.tabIndex)  
            }  
        }  
    }  
</script>

我又换了uview的swiper ,控制台输出tabIndex的确修改了, 但:current就是不起作用

e***@163.com

e***@163.com (作者)

我靠!!!
看了下插件市场,今天刚更新的,然后我更新了一下插件, 问题就好了!!!!!!!但文字还是竖向排列的.我的解决方案是 注释掉了u-tabs.vue中的 &__item { 根下的flex:1 文字就不竖向排列了

该问题目前已经被锁定, 无法添加新回复