vue實現輪播圖片

3403771864 發布于2022-09-07 22:45 / 601人閱讀

　　輪播在動態中是十分常見的，那vue如何實現輪播圖片？下面我們一起看看具體的代碼：

　　1、下面是顯示圖

　　2、案例

　　<template>
　　<section class="body">
　　<section class="wrap">
　　<swiper :options="swiperOption" class="swiper-wrap" ref="mySwiper" v-if="banner.length!=0">
　　<swiper-slide v-for="(item,index) in banner" :key="index" >
　　//點擊圖片跳到哪里,這里跳到home頁面 item舉例：{img:http://www.***.com/home/images/index_img02.png,url:/home}
　　<img :src="item.img" alt="" @click="skip_out_page(item.url)" />
　　</swiper-slide>
　　<!-- 常見的小圓點 -->
　　<div class="swiper-pagination" v-for="(item,index) in banner" :key="index" slot="pagination" ></div>
　　</swiper>
　　</section>
　　</section>
　　</template>

　　<script>
　　export default {
　　data() {
　　const that = this;
　　return {
　　imgIndex: 1,
　　swiperOption: {
　　//是一個組件自有屬性，如果notNextTick設置為true，組件則不會通過NextTick來實例化swiper，也就意味著你可以在第一時間獲取到swiper對象，假如你需要剛加載遍使用獲取swiper對象來做什么事，那么這個屬性一定要是true
　　notNextTick: true,
　　//循環,而不是每次都突然回到第一個
　　loop: true,
　　//設定初始化時slide的索引，加載頁面時顯示的第幾個，從0開始
　　initialSlide: 0,
　　//自動播放
　　autoplay: {
　　/*切換輪播圖片的時間，即上次切換成功后到再次需要切換的時間*/
　　delay: 1500,
　　stopOnLastSlide: false,
　　/* 觸摸滑動后是否繼續輪播 false觸摸后不再點擊繼續輪播，true觸摸后不再點擊不輪播，停在最后一次頁面*/
　　disableOnInteraction: false
　　},
　　//滑動速度，時間單位，越小越快，與上面 delay 區別，speed是完成切換所需時間，delay是切換成功后停留多長時間再切換
　　speed: 800,
　　//滑動方向
　　direction: "horizontal",
　　//小手掌抓取滑動
　　grabCursor: true,
　　on: {
　　//滑動之后回調函數
　　slideChangeTransitionStart: function() {
　　/* realIndex為滾動到當前的slide索引值 */
　　that.imgIndex= this.realIndex - 1;
　　},
　　},
　　//分頁器設置
　　pagination: {
　　el: ".swiper-pagination",
　　clickable: true,
　　type: "bullets"
　　}
　　},
　　banner: []
　　}
　　},
　　methods: {
　　skip_out_page(v) {
　　window.location.href = v
　　},
　　get_data() {
　　this.$http.get('test').then(res => {
　　if(res.data.code == '0000'){
　　this.banner = res.data.img_info
　　}
　　});
　　}
　　},
　　mounted() {
　　this.get_data()
　　}
　　}
　　</script>

　　<style>
　　.swiper-wrap{
　　width: 100%;
　　height: 210px;
　　background-color: #fff;
　　}
　　.swiper-pagination{
　　background: #fff;
　　}
　　.swiper-pagination-bullet{
　　background: #ccc;
　　width: 10px;
　　height: 10px;
　　opacity: 1;
　　}
　　.swiper-pagination-bullet-active{
　　background: #00C293;
　　}
　　</style>

　以上就是文本全部內容。

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/127569.html

基于 Vue 實現的移動端圖片輪播組件.

摘要：基于的移動端的圖片輪播組件之前一直在用功能很齊全但是唯一的問題就是體積比較大我只是想要一個簡單的圖片輪播但是卻要引入多大小的文件這樣是不對的特點支持自動播放無限輪播效果支持用戶手動滑動壓縮后大概使用在入口文件中引入暫時不支持單組 wc-swiper 基于 Vue 的移動端的圖片輪播組件. why 之前一直在用 vue-awesome-swiper, 功能很齊全, 但是唯一的問題就是體積...

hsluoyz 2019-08-20 18:52 評論0 收藏0
原生js寫一個無縫輪播圖插件(支持vue)

摘要：輪播圖插件前言寫這個插件的原因前段時間準備用加上網易云的接口，模擬網易云音樂移動端。目前主要實現了無縫輪播，自動播放，端左右按鈕點擊切換，移動端手勢滑動切換。輪播圖插件(Broadcast.js) 前言：寫這個插件的原因前段時間準備用vue加上網易云的nodejs接口，模擬網易云音樂移動端。因為想自己寫一遍所有的代碼以及加固自己的flex布局，所以沒有使用UI組件。在輪播圖部分，...

MSchumi 2019-08-02 16:03 評論0 收藏0
原生js寫一個無縫輪播圖插件(支持vue)

摘要：輪播圖插件前言寫這個插件的原因前段時間準備用加上網易云的接口，模擬網易云音樂移動端。目前主要實現了無縫輪播，自動播放，端左右按鈕點擊切換，移動端手勢滑動切換。輪播圖插件(Broadcast.js) 前言：寫這個插件的原因前段時間準備用vue加上網易云的nodejs接口，模擬網易云音樂移動端。因為想自己寫一遍所有的代碼以及加固自己的flex布局，所以沒有使用UI組件。在輪播圖部分，...

hatlonely 2019-08-22 18:09 評論0 收藏0
原生js寫一個無縫輪播圖插件(支持vue)

摘要：輪播圖插件前言寫這個插件的原因前段時間準備用加上網易云的接口，模擬網易云音樂移動端。目前主要實現了無縫輪播，自動播放，端左右按鈕點擊切換，移動端手勢滑動切換。輪播圖插件(Broadcast.js) 前言：寫這個插件的原因前段時間準備用vue加上網易云的nodejs接口，模擬網易云音樂移動端。因為想自己寫一遍所有的代碼以及加固自己的flex布局，所以沒有使用UI組件。在輪播圖部分，...

褰辯話 2019-08-30 15:53 評論0 收藏0
Vue 過渡實現輪播圖

摘要：過渡實現輪播圖過渡的過渡系統是內置的，在元素從中插入或移除時自動應用過渡效果。 Vue 過渡實現輪播圖 Vue 過渡 Vue 的過渡系統是內置的，在元素從 DOM 中插入或移除時自動應用過渡效果。過渡的實現要在目標元素上使用 transition 屬性，具體實現參考Vue2 過渡下面例子中我們用到列表過渡，可以先學習一下官方的例子要同時渲染整個列表，比如使用 v-for，我們需要...

zr_hebo 2019-08-21 15:29 評論0 收藏0
基于vue實現swipe輪播組件

摘要：項目背景圖片輪播是前端項目必有項，當前有很多效果很酷炫的輪播插件，例如。此處應該有掌聲，哈哈簡而言之，就是當需要一個簡單的輪播時，可以選用，自己寫一個組件。舉個栗子，就是我實現的這個基于實現分頁組件，移動端和端均適用哦。項目背景圖片輪播是前端項目必有項，當前有很多效果很酷炫的輪播插件，例如Swiper。但是當項目中的圖片輪播只需要一個很簡單的輪播樣式，比如這樣的showImg(ht...

Enlightenment 2019-08-22 10:42 評論0 收藏0