为什么在 vue js 中显示出意外的视图？

问题描述

我正在尝试将每个 b 数组图像实现为一张幻灯片，但我正在获取第一张幻灯片，其中所有图像一个接一个，另一张幻灯片为空。我的代码有什么问题。现在调试了几个小时，但真的无法弄清楚 .

我正在尝试将每个 b 数组图像实现为一张幻灯片，但我正在获取第一张幻灯片，其中所有图像一个接一个，另一张幻灯片为空。我的代码有什么问题。现在调试了几个小时，但真的无法弄清楚 .

<template>
    <div >
        <slick ref="slick" :options="slickOptions" class="slick-b">
            <div
                v-for="(each_b,index) in b"
                :key="each_b.id"
                class="b"
            >
                <a
                    v-if="each_b.attributes.imageUrl.startsWith('http')"
                >
                    <img
                        v-if="index < 1"
                        :src="
                            getimage(
                                each_b.attributes.imageUrl +
                                    '?width=240&enforceAspectRatio=true'
                            )
                        "
                        :alt="each_b.attributes.title"
                    />
                    <img
                        v-else
                        :data-lazy="
                            getimage(
                                each_b.attributes.imageUrl +
                                    '?width=240&enforceAspectRatio=true'
                            )
                        "
                        :alt="each_b.attributes.title"
                    />
                </a>
                
            </div>
        </slick>
    </div>
</template>

<script>
import Slick from "vue-slick";
import inViewport from "vue-in-viewport-mixin";
import { mapGetters } from "vuex";
import mixins from "@/mixins";

export default {
    mixins: [mixins,inViewport],props: {
        b: {
            type: Array,required: true,},"in-viewport-once": {
            default: true,data() {
        var prev =
            '<div class="back-b-arrow"><i class="icons" aria-hidden="true">&#xe830;</i></div>';
        var next =
            '<div class="forward-b-arrow"><i class="icons" aria-hidden="true">&#xe803;</i></div>';
        var rtl_flag = false;
        return {
            slickOptions: {
                slidesToShow: 1,lazyLoad: "ondemand",infinite: false,adaptiveHeight: false,variableWidth: false,arrows: true,dots: false,draggable: true,edgeFriction: 0.3,swipe: true,rows: 0,autoplay: false,autoplaySpeed: 4000,prevArrow: prev,nextArrow: next,bTimer: "",rtl: rtl_flag,};
    },created() {
        if (this.isMobile()) {
            this.slickOptions.prevArrow = null;
            this.slickOptions.nextArrow = null;
        }
    },watch: {
        "inViewport.Now": function (visible) {
            
        },mounted() {
        this.reInit();
        const that = this;
        this.bTimer = setTimeout(() => {
            this.slickOptions.autoplay = true;
            this.reInit();
        },9000);
    },destroyed() {
        clearTimeout(this.bTimer);
    },methods: {
        next() {
            this.$refs.slick.next();
        },prev() {
            this.$refs.slick.prev();
        },reInit() {
            // Helpful if you have to deal with v-for to update dynamic lists
            this.$refs.slick.reSlick();
        },components: {
        Slick,};
</script>

解决方法

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

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

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