Vue slick carousel 动态滑块 asNavFor 问题

编程问答 2022-05-13

问题描述

<b-tabs class="learning-center-tab px-0">
            <b-tab :active="CategoryHash==Category.vSlug || (CategoryHash='' && index=='0')" v-for="(Category,index) in Categories" :set="cref = 'c'+(index+1)+'2'">
                <template #title>
                    <span @mouSEOver="hoverFunc" @mouseleave="unhoverFunc"> {{ Category.vTitle }}{{ index }} </span>
                </template>
                <b-row align-h="end" class="sub_cat_select_Box" :style="{ bottom: lcTabBoxBottom }" v-if="Category.sub_category.length>0">
                    <b-form-select v-model="selected">
                        <option value="null">Pet Type</option>
                        <option v-for="(selectOption,indexOpt) in Category.sub_category" :key="indexOpt" :value="selectOption.iCategoryId">
                            {{ selectOption.vTitle }}
                        </option>
                    </b-form-select>
                </b-row>
                <div @wheel.prevent="wheelItBetter($event,cref)">
                    <VueSlickCarousel class="LC-slider" v-bind="BannerImage" @reInit="onInitCarousel" :asNavFor="$refs.cref">
                        <div class="slick-slider-item">
                            <div class="slid-img-Box" :style="{backgroundImage: 'url(' + Category.vImagePath + ')'}"></div>
                            <div class="lc-caption" :style="{ width: captionWidth }">
                                <h2>DigyPet Learning Center</h2>
                                <h5>Resources and tips to help you be the best <br /> pet parent you can be.</h5>
                            </div>
                        </div>
                    </VueSlickCarousel>
                    <VueSlickCarousel class="LC-slider-nav-thumbnails" v-bind="IconImage" :ref="cref">
                        <div class="pl-4" v-for="(LearningCenter,index1) in Category.learning_center">
                            <b-img :src="LearningCenter.vImagePath" rounded fluid alt="Responsive image"></b-img>
                            <p @mouSEOver="hoverFunc" @mouseleave="unhoverFunc">
                                <NuxtLink :to="'/learning-center/'+LearningCenter.vSlug">
                                    {{ LearningCenter.vTitle }}
                                </NuxtLink>
                            </p>
                        </div>
                    </VueSlickCarousel>
                </div>
            </b-tab>

这是我的轮播代码，下面是wheelItBetter函数

wheelItBetter(event,ref) {
        console.log(ref);
        if (event.deltaY < 0) {
            this.$refs[ref].prev();
        } else {
            this.$refs[ref].next();
        }
    }

显示以下错误的鼠标滚轮事件::

TypeError: this.$refs[ref].next is not a function
at VueComponent.wheelItBetter (index.vue?93c2:306)
at wheel (index.vue?055e:199)
at invokeWithErrorHandling (vue.runtime.esm.js?2b0e:1854)
at HTMLdivelement.invoker (vue.runtime.esm.js?2b0e:2179)
at HTMLdivelement.original._wrapper (vue.runtime.esm.js?2b0e:6917)

提出一些建议。我尝试了各种方法来解决这个问题。但找不到任何解决方案。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

slick.jsvue.js