Question

我在我的应用中使用Framework7 swiper。当我使用静态数据时，swiper工作正常，但是当我使用Web服务从服务器获取数据时，它无法正常工作。我已经使用DOM来更新swiper但不幸的是，它没有更新。请给我解决更新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>

我添加了这一行来更新swiper：

$$(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();

如果您在单个页面中使用多个swiper，则可以用[0]的索引替换swiper，也可以使用Framework7 API更新Swiper。 / p>

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

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

Answer 2

为了现在发现这个的其他人，更优雅的解决方案是使用 v-if 确保仅在您准备好内容后才启动 swiper。

在您准备好动态数据之前创建 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中的动态数据

2 个答案: