在线观看不卡亚洲电影_亚洲妓女99综合网_91青青青亚洲娱乐在线观看_日韩无码高清综合久久

鍍金池/ 問(wèn)答/Python  HTML/ vue中使用swiper無(wú)法自動(dòng)輪播的問(wèn)題

vue中使用swiper無(wú)法自動(dòng)輪播的問(wèn)題

想在項(xiàng)目中使用swiper實(shí)現(xiàn)輪播的效果,但是遇到一個(gè)問(wèn)題(移動(dòng)端),配置了autoplay卻還是無(wú)法自動(dòng)輪播。以下是我使用步驟:
1)安裝swiper
2) 安裝babel-runtime
3).vue的文件中import

clipboard.png

4)template中:

clipboard.png

5)mounted中:

clipboard.png

6)效果如下:

clipboard.png

7)問(wèn)題就是,無(wú)法自動(dòng)輪播,并且點(diǎn)擊兩個(gè)按鈕(左右)也是沒(méi)用的,請(qǐng)問(wèn)我是哪里配置不對(duì)嗎還是有什么沒(méi)有配置?

回答
編輯回答
護(hù)她命

你好,你這個(gè)點(diǎn)擊下一張有用了嗎? 怎么解決的。我現(xiàn)在碰到了相同的問(wèn)題,點(diǎn)擊下張沒(méi)有用

2017年10月14日 06:23
編輯回答
獨(dú)特范

剛剛也遇到這個(gè)問(wèn)題,沒(méi)法自動(dòng)輪播。
解決方式:不要用swiper,用vue-awesome-swiper,其實(shí)是swiper做的vue組件。
使用時(shí)先注冊(cè):
//main.js
import VueAwesomeSwiper from 'vue-awesome-swiper'
Vue.use(VueAwesomeSwiper)
//頁(yè)面
<template>
<swiper :options="swiperOption" ref="mySwiper">

       
   <swiper-slide  v-for="str in data.pagelist" style="text-align:center" v-if="data.landscape_layout==0">
          <img :src="str.image_url" style="height:100%"/>
   </swiper-slide>

</swiper>
</template>
<script>
import { swiper, swiperSlide } from 'vue-awesome-swiper'
export default {

data: function () {
    return {
        data:{

        },
        swiperOption: {
            initialSlide :0,
            pagination: '.swiper-pagination',
            loop: true,
            speed: 400,
            autoplay: 2000,
            autoplayDisableOnInteraction: false,
            observer:true,//修改swiper自己或子元素時(shí),自動(dòng)初始化swiper
            observeParents:true//修改swiper的父元素時(shí),自動(dòng)初始化swiper
        }
    }
}

}

2018年4月19日 13:04
編輯回答
尐懶貓

我發(fā)現(xiàn)把new Swiper放在new Vue之后就沒(méi)事了

2017年6月5日 05:42
編輯回答
離人歸

我的一個(gè)案例,僅供參考!

 <div class="swiper-bank ">
    <div class="swiper-wrapper">
        <div class="swiper-slide bank_list flex_column" v-for="(item,index) in bank_list" v-if="index<24">
            <div class="bank_ico">
                <img :src="item.logo" alt="">
            </div>
            <span class="bank_name" v-text="item.name"></span>
        </div>
    </div>
    <div class="swiper-pagination"></div>
</div>
 data: {
        bank_list:[]
    },
 created:function () {
        this.getBanks()
    },
    methods: {
        getBanks:function () {
            this.$http.get("js/banks.json").then(function(res){
                this.bank_list = res.data.banks;
                this.$nextTick(function () {
                    var mySwiper = new Swiper('.swiper-bank',{
                        slidesPerView : 8,
                        slidesPerGroup : 8,
                        speed:1500,
                        pagination : '.swiper-pagination',
                        paginationClickable :true,
                        paginationBulletRender: function (swiper, index, className) {
                            return '<span class="' + className + '">' + (index + 1) + '</span>';
                        }
                    })
                });

            }, function(res)  {
                // 響應(yīng)錯(cuò)誤回調(diào)
                alert('服務(wù)器請(qǐng)求失敗');
            });
        }

    }
2017年8月14日 13:30
編輯回答
失魂人

把this保存下,比如var _that = this,
然后試試把swiper的定義寫在接口請(qǐng)求的_that.$nextTick(function(){})里 等待數(shù)據(jù)渲染成功,再定義swiper
一樓評(píng)論不能照抄,this作用域要搞清楚

2017年5月30日 16:22
編輯回答
骨殘心

終于解決了 主要問(wèn)題 還是在API
樓主 你看下你的插件版本(如果是組件的話)
"vue-awesome-swiper": "^3.1.3",
查看node_modules/swiper/dist/js/swiper.js 文件 第一行注釋 有API 地址 具體方法按API來(lái)http://www.idangero.us/swiper/

百度很多次 都被誤導(dǎo)了 用了國(guó)內(nèi)打那個(gè)API地址http://www.swiper.com.cn/

swiperOption: {
        
        initialSlide: 0,
        
        
        loop: true,
        speed: 400,
        autoplay: {
          delay: 3000,
          disableOnInteraction: false
        },
        // grabCursor: true,
        setWrapperSize: true,
        autoHeight: true,
        uniqueNavElements: true,
        preventInteractionOnTransition: false,
        allowSilderPrev: true,
        allowSilderNext: true,
        //   scrollbar:'.swiper-scrollbar',//滾動(dòng)條
        mousewheelControl: true,
        observer: true,
        observeParents: true,
        debugger: true,

        pagination: {
          el: ".swiper-pagination",
          clickable: true //允許點(diǎn)擊小圓點(diǎn)跳轉(zhuǎn)
        },
        navigation: {
          nextEl: ".swiper-button-next",
          prevEl: ".swiper-button-prev"
        },
        onTransitionStart(swiper) {
          console.log(swiper);
        }
      },
2018年7月7日 08:14
編輯回答
離觴

試試把swiper的定義寫在接口請(qǐng)求的this.$nextTick(function(){})里 等待數(shù)據(jù)渲染成功,再定義swiper

2017年2月1日 11:17
編輯回答
朽鹿

贊同4樓的答案,可以使用mounted鉤子圖片描述

2018年3月23日 13:06