retrocode
retrocode
  • 发布:2019-05-27 19:32
  • 更新:2021-01-31 15:51
  • 阅读:1458

【报Bug】自定义组件模式 小程序\APP端 swiper中无法使用slot

分类:uni-app

详细问题描述

我封装了一个swiper组件,通过slot传入数据显示相关页面,当slot是swiper-item时,在H5端正常显示,单小程序及APP端无法显示swiper-item信息,
暂时确认是slot的问题,我在组件内直接使用swiper-item是没有任何问题的

[内容]

重现步骤

[步骤]

<!-- 主页 -->    
<template>    
    <!-- 主页开始 -->    
    <test-components :tabBars="tabBars">    
        <template v-slot:swiperpage>    
            <swiper-item><view class="swiper-page">问君能有几多愁</view></swiper-item>    
            <swiper-item><view class="swiper-page">恰似一江春水向东流</view></swiper-item>    
        </template>    
        <template v-slot:footer>    
            这里是底部    
        </template>    
    </test-components>    
    <!-- 主页结束 -->    
</template>  
<template>    
    <view class="container">    
        <header>    
            <!-- tab栏 -->    
            <scroll-view id="tab-bar" class="header-center uni-swiper-tab" scroll-x :scroll-left="scrollLeft">    
                <view    
                    v-for="(tab, index) in tabBars"    
                    :key="tab.id"    
                    :class="['swiper-tab-list', tabIndex == index && tabBars.length > 1 ? 'active' : '']"    
                    :id="tab.id"    
                    :data-current="index"    
                    @click="tapTab(index)"    
                >    
                    {{ tab.name }}    
                </view>    
            </scroll-view>    
        </header>    
        <view class="uni-tab-bar">    
            <!-- 下拉刷新组件 -->    
            <!-- :top="90" -->    
            <pulldown-refresh ref="mixPulldownRefresh"  @refresh="onPulldownReresh" @setEnableScroll="setEnableScroll">    
                <!-- swiperpage组件开始 -->    
                <swiper @change="changeTab" :current="tabIndex" class="swiper-box" duration="300" skip-hidden-item-layout="true">    
                    <!-- swiperpage开始 -->    
                    <slot name="swiperpage"></slot>    
                    <!-- swiperpage结束 -->    
                </swiper>    
                <!-- swiperpage组件结束 -->    
            </pulldown-refresh>    
            <!-- 下拉刷新组件结束 -->    
        </view>    
        <footer><slot name="footer"></slot></footer>    
    </view>    
</template>  

[结果]

[期望]
APP端及小程序端应与H5端显示一致才对

uni-app运行环境说明

[运行端是h5或app或某个小程序?] APP/H5/小程序

[编译模式是老模板模式还是新的自定义组件模式?] 自定义组件模式

2019-05-27 19:32 负责人:无 分享
已邀请:
retrocode

retrocode (作者) - 现已加入旺旺大礼包全家桶

====================

retrocode

retrocode (作者) - 现已加入旺旺大礼包全家桶

哇 难受 好歹给个回复啊

retrocode

retrocode (作者) - 现已加入旺旺大礼包全家桶

????????????

retrocode

retrocode (作者) - 现已加入旺旺大礼包全家桶

??????????

retrocode

retrocode (作者) - 现已加入旺旺大礼包全家桶

???????????????

retrocode

retrocode (作者) - 现已加入旺旺大礼包全家桶

???????????????

6***@qq.com

6***@qq.com - 木星上的程序员

请问解决没?

6***@qq.com

6***@qq.com - 木星上的程序员

我想把像这种swiper-tab封装成组件,但当swiper-item里面使用slot时,微信小程序会出现问题,组件内的数据是空的,导致无法渲染,H5无问题。

  • retrocode (作者)

    没辙,只能规避,小程序用了 Shadow DOM

    2019-09-09 18:28

biluo

biluo - 碧落

我也是刚刚封装了一个列表小组件,然后发现微信端啥都没有

吾逍遥

吾逍遥 - 编程爱好者

同样问题,我还以为是自己写错了,测试了H5正常,不在v-slot中使用filters或computed正常

要回复问题请先登录注册