Swiper 无法使用 vue.js 的 Framework7 中的动态数据

Question

我在我的应用程序中使用 Framework7 swiper。当我使用静态数据时，swiper 工作正常，但当我使用 web 服务从服务器获取数据时，它不起作用。我已经使用 DOM 来更新 swiper，但不幸的是，它没有更新。请给我更新刷卡器的解决方案。

我的代码是：

<script>
export default {
    data() {
        return {
            posts: [],
        }
    },

    methods: {
        onF7Init:function() {
            this.theater();   
        },

        // function of fetch the data from serve:
        theater: function() {
            // fetch images path from server
            axios.get(`https://api.themoviedb.org/3/discover/movie?api_key={api_key}&primary_release_date.gte=2018-02-1&primary_release_date.lte=2018-02-21`)
                .then(response => {
                    current.**posts** = response.data.results;

                //I added this line to update the swiper:
                $$(this).find('#banner-swiper')[0].swiper.update();
            })
        }
    }
}
</script>

我添加了这一行来更新刷卡器：

$$(this).find('#banner-swiper')[0].swiper.update()

我的应用模板：

<f7-swiper pagination id="banner-swiper">

    <f7-swiper-slide  v-for="
     (post,index) in posts" :key="index" >              

         <img :src="'https://image.tmdb.org/t/p/w500' + 
            post.backdrop_path"/>
    </f7-swiper-slide>
</f7-swiper>

Answer 1

您可以尝试以下代码来更新您的swiper。

this.$$(".swiper-container")[0].swiper.update();

如果您在单个页面中使用超过 1 个 swiper，那么您可以将 [0] 替换为您的 swiper 的索引，或者您可以使用 Framework7 API更新您的 Swiper。

let swiper = this.$f7.swiper.get(".banner-swiper");
swiper.$el[0].swiper.update();

两种解决方案都对我有用。

Answer 2

为了现在正在寻找它的其他人，更优雅的解决方案是使用 v-if 来确保仅在您准备好内容后才启动滑动器。

在您准备好动态数据之前创建 Swiper 时，会发生未使用动态数据更新幻灯片的情况。

您可以像这样添加 v-if="posts.length > 0"：

<f7-swiper pagination v-if="posts.length > 0" id="banner-swiper">

    <f7-swiper-slide  v-for="
     (post,index) in posts" :key="index" >              

         <img :src="'https://image.tmdb.org/t/p/w500' + 
            post.backdrop_path"/>
    </f7-swiper-slide>
</f7-swiper>

Swiper 无法使用 vue.js 的 Framework7 中的动态数据

Swiper not working with Dynamic data in Framework7 with vue.js

vue.js

html-framework-7