swiper.js如何实现从上往下自动滚动啊?

swiper.js如何实现从上往下自动滚动啊?默认是从下往上滚动。

Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
其他相关推荐
swiper.js写的滑块,在浏览器和IOS微信上都能正常显示,但是在安卓上有问题

swiper.js写的滑块,在浏览器和IOS微信上都能正常显示,但是在安卓上有问题,请问怎么解决啊

swiper.js的pagination导航小圆点不随图片滑动了

用swiper.js做了个轮播图(4张图),轮播图(4张图)的div在一个大的div中,大的div包括其他非轮播内容,进入页面大div是隐藏的,点击按钮出现,这是导航小圆点显示正确,点击大的div后打div隐藏,再点击按钮大div出现,这时导航圆点显示在第一个,右滑一张图后,应该显示在第二个,但是这个小圆点却显示到第4个去了。这样该怎么解决?

swiper.js写的一个滑块,在安卓中不能滑动

在IOS上显示正常, 安卓4.1 、4.2不能运行,5.0的可以。现在怎么样可以让安卓手机能正常显示。

idangerous.swiper.js怎么样获取当前页面

<!DOCTYPE html> <html lang="zh-CN"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>demo</title> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> <meta name="apple-touch-fullscreen" content="yes" /> <meta name="format-detection" content="telephone=no" /> <meta name="apple-mobile-web-app-capable" content="yes" /> <meta name="apple-mobile-web-app-status-bar-style" content="black" /> <link rel="stylesheet" href="css/idangerous.swiper.css"> <link rel="stylesheet" type="text/css" href="css/animate.min.css"/> <link rel="stylesheet" type="text/css" href="css/index.css"/> <style> body { margin: 0; } .swiper-container { width: 100%; height: 480px; } .swiper-slide img { width: 100%; } #audio_btn { position: absolute; left: 10px; bottom: 10px; z-index: 200; display: none; width: 50px; height: 50px; background-repeat: no-repeat; } .loading_background { background-image: url(img/music_loading.gif); background-size: 30px 30px; opacity: 0.5; background-position: center center; } .loading_yinfu { position: absolute; left: 10px; top: 10px; width: 30px; height: 30px; background-image: url(img/yinfu.png); background-repeat: no-repeat; background-position: center center; } .play_yinfu { background-image: url(img/music.gif); background-repeat: no-repeat; background-position: center center; background-size: 60px 60px; } .rotate { position: absolute; left: 10px; top: 10px; width: 30px; height: 30px; background-size: 100% 100%; background-image: url(img/music_off.png); -webkit-animation: rotating 1.2s linear infinite; -moz-animation: rotating 1.2s linear infinite; -o-animation: rotating 1.2s linear infinite; animation: rotating 1.2s linear infinite; } @-webkit-keyframes rotating { from { -webkit-transform: rotate(0deg); } to { -webkit-transform: rotate(360deg); } } @keyframes rotating { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @-moz-keyframes rotating { from { -moz-transform: rotate(0deg); } to { -moz-transform: rotate(360deg); } } .off { background-image: url(img/music_off.png); background-size: 30px 30px; background-repeat: no-repeat; background-position: center center; } @-webkit-keyframes start { 0%, 30% { opacity: 0; -webkit-transform: translate(0, 10px); } 60% { opacity: 1; -webkit-transform: translate(0, 0); } 100% { opacity: 0; -webkit-transform: translate(0, -8px); } } @-moz-keyframes start { 0%, 30% { opacity: 0; -moz-transform: translate(0, 10px); } 60% { opacity: 1; -moz-transform: translate(0, 0); } 100% { opacity: 0; -moz-transform: translate(0, -8px); } } @keyframes start { 0%, 30% { opacity: 0; transform: translate(0, 10px); } 60% { opacity: 1; transform: translate(0, 0); } 100% { opacity: 0; transform: translate(0, -8px); } } </style> </head> <body class="home-template"> <script src="js/jquery-1.10.1.min.js"></script> <script src="js/idangerous.swiper.min.js"></script> <script> $(function(){ $('#audio_btn').click(function() { if($(this).hasClass('play_yinfu')){ $(this).attr('class','off'); $(this).find('#yinfu').removeClass(); $('audio')[0].pause(); }else{ $(this).attr('class','play_yinfu'); $(this).find('#yinfu').addClass('rotate'); $('audio')[0].play(); } }); }); </script> <div id="audio_btn" class="play_yinfu" style="opacity: 1; display: block;"> <div id="yinfu" class="rotate"></div> <audio loop src="music.mp3" id="media" preload="" autoplay="true"></audio> </div> <div class="swiper-container"> <div class="swiper-wrapper" id="box"> <div class="swiper-slide page_1" id="page_1"> <img src="img/2.png"> <header><img src="img/news_header.png"></header> <section><img src="img/news_word.png"></section> </div> <div class="swiper-slide page_2" id="page_2"> <img src="img/2.png"> <header><img src="img/2_word.png"></header> <section><img src="img/2_map.png"></section> </div> <div class="swiper-slide page_3"> <img src="img/2.png"> <header><img src="img/3.png"></header> <section><img src="img/3_word.png"></section> </div> <div class="swiper-slide page_4"> <img src="img/2.png"> <header><img src="img/4_word.png"></header> <section><img src="img/4.png"></section> </div> <div class="swiper-slide page_5"> <img src="img/2.png"> <header><img src="img/5.png"></header> <section><img src="img/5_word.png"></section> </div> <div class="swiper-slide page_6"> <img src="img/2.png"> <header><img src="img/6_word.png"></header> <section><img src="img/6.png"></section> </div> <div class="swiper-slide page_7"> <img src="img/2.png"> <header><img src="img/7.png"></header> <section><img src="img/7_word.png"></section> </div> <div class="swiper-slide page_8"> <img src="img/2.png"> <header><img src="img/8_word.png"></header> <p><img src="img/8-middle.png"></p> <section><img src="img/8.png"></section> </div> <div class="swiper-slide page_9"> <img src="img/2.png"> <header><img src="img/9.png"></header> <section><img src="img/9_word.png"></section> </div> <div class="swiper-slide page_10"> <img src="img/2.png"> <header><img src="img/10_word.png"></header> <p><img src="img/10_middle.png"></p> <section><img src="img/10.png"></section> </div> <div class="swiper-slide page_11"> <img src="img/2.png"> <header><img src="img/11.png"></header> <section><img src="img/11_word.png"></section> </div> <div class="swiper-slide page_12"> <img src="img/2.png"> <header><img src="img/12_word.png"></header> <section><img src="img/12.png"></section> </div> <div class="swiper-slide page_13"> <img src="img/2.png"> <header><img src="img/13.png"></header> <section><img src="img/13_word.png"></section> </div> <div class="swiper-slide page_14"> <img src="img/2.png"> <header><img src="img/14_word.png"></header> <p><img src="img/14_middle.png"></p> <section><img src="img/14.png"></section> </div> <div class="swiper-slide page_15"> <img src="img/2.png"> <header><img src="img/15.png"></header> <section><img src="img/15_word.png"></section> </div> <div class="swiper-slide page_16"> <img src="img/2.png"> <header><img src="img/16_word.png"></header> <section><img src="img/16.png"></section> </div> <div class="swiper-slide page_17"> <img src="img/2.png"> <header><img src="img/17.png"></header> <section><img src="img/17_word.png"></section> </div> <div class="swiper-slide page_18"> <img src="img/2.png"> <header><img src="img/18_word.png"></header> <section><img src="img/18.png"></section> </div> <div class="swiper-slide page_19"> <img src="img/2.png"> <header><img src="img/19.png"></header> <section><img src="img/19_word.png"></section> </div> <div class="swiper-slide page_20"> <img src="img/2.png"> <header><img src="img/20_word.png"></header> <section><img src="img/20.png"></section> </div> </div> </div> <script> var mySwiper; setTimeout("ready()", 1000); function ready(){ if($("img")[0].height == 0){ $("img")[0].onload = function () { $(".swiper-container").css("height", $("img")[0].height); mySwiper = new Swiper('.swiper-container',{ pagination: '.pagination', paginationClickable: true, mode: 'vertical', speed : 500, freeMode:true, freeModeFluid:true, // onSlidePrev:function(swiper){ // alert(2); // } }) } } else { $(".swiper-container").css("height", $("img")[0].height); mySwiper = new Swiper('.swiper-container',{ pagination: false, paginationClickable: true, mode: 'vertical', }) // mySwiper.activeSlide = function(swiper){ // alert(swiper) // $('header').addClass('animated fadeInDown'); // } } } $(".swiper-container").css("height", document.documentElement.clientHeight+"px"); $(".swiper-slide").css("height", $("img")[0].height+"px"); // alert($(".swiper-slide").css("height")+"haha"+$("img")[0].height+"nrg"+$(".swiper-container").css("height")); </script> </body> </html> 要做css3动画效果,急求

如何解决lazyload.js 和 商品列表的每个商品都是swiper 懒加载的冲突问题呢?

![图片说明](https://img-ask.csdn.net/upload/201907/25/1564045461_145855.jpg) 如何解决lazyload.js 和 商品列表的每个商品都是swiper 懒加载的冲突问题呢? 我需要下拉时懒加载,并且每个商品豆腐块又是swiper懒加载。

tab切换后swiper自动轮播卡死

轮播图tab切换后会卡死,observer没有效果。 function RPM(a, b, c, d) { var swiper = new Swiper({ el: a, loop: true, speed: 500, spaceBetween: 10, autoplay: { delay: 1000, disableOnInteraction: false, }, observer: true, observeParents: true, navigation: { nextEl: b, prevEl: c, }, pagination: { el: d, clickable: true, }, }); }RPM('.swiper-container.sc4-1', '.gb-girl-1-btn-next', '.gb-girl-1-btn-prev', '.swiper-pagination.sc4-1'); //2-2 RPM('.swiper-container.sc4-2', '.gb-girl-2-btn-next', '.gb-girl-2-btn-prev', '.swiper-pagination.sc4-2'); //2-3 RPM('.swiper-container.sc4-3', '.gb-girl-3-btn-next', '.gb-girl-3-btn-prev', '.swiper-pagination.sc4-3'); //2-4 RPM('.swiper-container.sc4-4', '.gb-girl-4-btn-next', '.gb-girl-4-btn-prev', '.swiper-pagination.sc4-4'); //2-5 RPM('.swiper-container.sc4-5', '.gb-girl-5-btn-next', '.gb-girl-5-btn-prev', '.swiper-pagination.sc4-5'); $(".off").hide(); for (let i = 0; i < 5; i++) { $(".pf").eq(i).on("click", function() { $(".gb-girl").hide().eq(i).show(); $(".pf").removeClass("on").eq(i).addClass("on"); }) } html就是一个很简单的tab切换,左侧切换标签,右侧切换轮播图

js,jq怎么实现滑动一张图片就刷新一次页面?

如图,星球的滑动是用swiper插件做的![图片说明](https://img-ask.csdn.net/upload/201905/22/1558519869_41509.png),请问怎么实现图二的这种效果?![图片说明](https://img-ask.csdn.net/upload/201905/22/1558519893_24005.png),滑动一次星球,就刷新一下居民?就比如滑到下一个绿色星球,上面的居民也更新一下,![图片说明](https://img-ask.csdn.net/upload/201905/22/1558519998_603470.png) 麻烦上一下代码,感谢各位大佬!

h5 swiper如何禁止对角滚动

3个slider1,slider2,slider3,每个slider都是list,高度大于屏高,可以上下滚动。用了swiper左右滑动切换slider,发现左右滑动时可以上下滑动,造成页面滑动时不受控制,整体滑动体验很差,请问如何禁止对角滑动,就是在上下滑动时,不可以横向滑动,横向滑动时,阻止上下滑动

swiper的maxTranslate()是什么意思?

用swiper写了一个移动端左右滑动的效果仿照这个链接里的头部 http://www.17sucai.com/preview/702590/2017-06-08/toutiaoNav/index.html ![图片说明](https://img-ask.csdn.net/upload/201711/28/1511858278_629390.png) 在swiper官网上找了很久 还不理解这个maxTranslate()方法到底是获取的什么值?麻烦知道的大神给我解解疑惑

swiper快速滑动后,滑动事件失效

假如有1,2,3屏,从2滑动切换屏幕到3时,删除1,新增4在3后面, 慢点滑动的时候没问题,但是一旦滑动快了,这个滑动事件就失效了,求问大神有什么解决办法没? (function(){ var flog = 0; var mySwiper = new Swiper ('.swiper-container', { initialSlide:2, direction: 'horizontal', onSlideNextEnd: function(swiper){//往左滑,出现后一个,删掉第一个 if(flog != 0){ var num = parseInt($('.swiper-slide').eq(4).text()) + 1; mySwiper.appendSlide('<div class="swiper-slide swiper-slide-next">'+num+'</div>'); mySwiper.removeSlide(0); } flog++; }, onSlidePrevEnd: function(swiper){//往右滑,出现前一个,删掉最后一个 var num = parseInt($('.swiper-slide').eq(0).text()) - 1; mySwiper.prependSlide('<div class="swiper-slide swiper-slide-prev">'+num+'</div>'); mySwiper.removeSlide(4); } }) })();

急求swiper插件的应用

哪位大神有swiper的Demo,就是可以左右滑动和下拉刷新的例子,求大神们指导啊![图片说明](http://forum.csdn.net/PointForum/ui/scripts/csdn/Plugin/003/monkey/14.gif)![图片说明](http://forum.csdn.net/PointForum/ui/scripts/csdn/Plugin/003/monkey/14.gif)![图片说明](http://forum.csdn.net/PointForum/ui/scripts/csdn/Plugin/003/monkey/14.gif)![图片说明](http://forum.csdn.net/PointForum/ui/scripts/csdn/Plugin/003/monkey/14.gif)

swiper怎么动态加载数据?

$.ajax({ url: "../Minitor/data_SOE.ashx?Action=GetSOEByPage", type: "GET", dataType: "json", data: { page: page, treeid: 1, rows: 10, endtime: endtime, starttime: '2016-07-20 00:00:00' }, cache: false, success: function (data) { var data = eval(data); var num = data.ResultData.DataTable.length; var total = data.ResultData.totalRecords; var max = Math.floor(10 / 10); var mySwiper = new Swiper('.swiper-container', { onSlideNextStart: function (swiper) { $.ajax({ url: "../Minitor/data_SOE.ashx?Action=GetSOEByPage", type: "GET", dataType: "json", data: { page: 1, treeid: 1, rows: 10, endtime: endtime, starttime: '2016-07-20 00:00:00' }, cache: false, success: function (data) { var data = eval(data); var mySwiper = new Swiper('.swiper-container', { }); var html = ""; for (var i = 0; i < 10; i++) { html += data.ResultData.DataTable[i].TagName; if ((i + 1) % 10 == 0) { mySwiper.appendSlide(' ' + 'html' + ' '); //加到Swiper的最后 $(".swiper-slide").addClass('container jin1'); mySwiper.update(); } }; // $(".swiper-container").find('.swiper-wrapper').html(s); }, error: function (data) { alert("未查明原因"); } }); } }); var html = ""; for (var j = 0; j < 10; j++) { var time = new Date(eval('new ' + (data.ResultData.DataTable[j].CreateTime.replace(/\//g, '')))).Format('yyyy-MM-dd hh:mm:ss'); html += " " + "" + "" + "" + "" + "" + "" + "" + "" + "" + "" + "" + '' + "" + "" + " " + "" + data.ResultData.DataTable[j].IEDNO + "" + " " + "" + "" + "" + "" + "" + " " + "安装位置:" + " " + data.ResultData.DataTable[j].StationName + data.ResultData.DataTable[j].MainLineName + data.ResultData.DataTable[j].TwoerAdr + " " + data.ResultData.DataTable[j].TagName + " ' + time + ' "; $(".table tbody tr td").find("i").addClass("icon iconfont"); $(".table tbody tr td a i").css({ "color": "#337ab7" }); $(".icon ").css({ "text-align": "right" }); if ((j + 1) % 10 == 0) { mySwiper.appendSlide(' ' + html + ' '); //加到Swiper的最后 $(".swiper-slide").addClass('container jin1'); html = ""; } }; // $(".swiper-container").find('.swiper-wrapper').html(); }, error: function (data) { alert("未查明原因"); } });

swiper4.0 问题,动态加载的数据显示不正常

动态加载的数据,静态数据是20个slide 能对整齐。动态加载的数据只有15个却不能对齐![图片说明](https://img-ask.csdn.net/upload/201904/22/1555925727_411340.png) ``` var mySwiper = new this.$Swiper(".swiper-container2", { slidesPerView: 5, //一行显示5个 slidesPerColumn: 2, //显示2行 slidesPerGroup: 5, //每次滑动滚动的数量 scrollbar: { el: "#sw2", dragSize: 53 }, draggable: false, observer: true, //修改swiper自己或子元素时,自动初始化swiper observeParents: false, }); mySwiper.scrollbar.$el.css("height", "15px"); mySwiper.scrollbar.$dragEl.css("background", "#F2414C"); mySwiper.scrollbar.$el.css("width", "157px"); mySwiper.scrollbar.updateSize(); //结构 <div class="swiper-container2"> <div class="swiper-wrapper"> <div class="swiper-slide" v-for="item in goodslist" :key="item.id" @click="toNew(item.id)" > <div class="box"> <img :src="item.src" alt="这是图" /> </div> <span>{{ item.name }}</span> </div> </div> <br /> <div class="swiper-scrollbar" id="sw2"></div> </div> ```

vue使用swiper组件获得activeIndex后,如何实现实时监听activeIndex,如果发生变化则设置flag属性为false

vue使用swiper组件获得activeIndex后,如何实现实时监听activeIndex,如果发生变化则设置flag属性为false ``` <swiper :options="swiperOption" ref="Myswper"> <swiper-slide v-for="card in itemcard" :key="card.id"> <img>//循环数据展示 </swiper-slide> </swiper> ``` ``` data () { return { // swiper默认配置 swiperOption: { slidesPerView: 'auto', spaceBetween: 30, centeredSlides: true, pagination: '.swiper-pagination', paginationClickable: true, on: { slideChangeTransitionEnd: function () { // console.log(this.activeIndex) // 切换结束时,告诉我现在是第几个slide } } } } } ``` ``` watch: { 实现监听this.$refs.Myswper.swiper.activeIndex发生变化执行赋值动作 } ``` 由于vue不能监听到swiper中的activeIndex,也不能监听到ref的变动,请问如何才能实现想要的效果?

swiper多层嵌套,页面加载有时banner没有高度

![最外层的pages是大的滑动切换,然后中间的scroll-container是长内容滚动,在第一个最内层的wrapper slide中还嵌套着一个轮播,var html = ''; html += '<div class="swiper-container" id="swiper-banners" style="height:100%;>'; html += '<div class="swiper-wrapper sw_banner" style="height:100%;>'; html += '<div class="swiper-slide sw_slide" style="height:100%;"><img src="images/1.jpg" alt=""></div>'; html += '<div class="swiper-slide sw_slide" style="height:100%;><img src="images/2.jpg" alt=""></div>'; html += '<div class="swiper-slide sw_slide" style="height:100%;><img src="images/3.jpg" alt=""></div>'; html += '<div class="swiper-slide sw_slide" style="height:100%;><img src="images/4.jpg" alt=""></div>'; html += '<div class="swiper-slide sw_slide" style="height:100%;><img src="images/5.jpg" alt=""></div>'; html += '<div class="swiper-slide sw_slide" style="height:100%;><img src="images/6.jpg" alt=""></div>'; html += '</div>'; html += '<div class="pagination"></div>'; html += '</div>'; 然后页面加载的时候就会出现问题,有时候banner的盒子都会没有高度,图片获取到了但是高度没有,发现new swiper的一些问题,但是有时刷新一次,两次以后就会有了,求教这是什么问题。 //Init Navigation var nav = $('.swiper-nav').swiper({ slidesPerView: 4, freeMode:true, freeModeFluid:true, onSlideClick: function(nav){ var index=nav.clickedSlideIndex; pages.swipeTo( nav.clickedSlideIndex); $('.swiper-slide').eq(index).addClass('tabbat_la_index' ).siblings().removeClass("tabbat_la_index"); } }) //Function to Fix Pages Height function fixPagesHeight() { $('.swiper-pages').css({ height: $(window).height()-nav.height }) } $(window).on('resize',function(){ fixPagesHeight() }) fixPagesHeight() //Init Pages var pages = $('.swiper-pages').swiper({ onTouchEnd: function(pages){ var index=pages.activeIndex; $('.swiper-slide').eq(index).addClass('tabbat_la_index' ).siblings().removeClass("tabbat_la_index"); }, onSlideChangeEnd: function(pages){ var index=pages.activeIndex; $('.swiper-slide').eq(index).addClass('tabbat_la_index' ).siblings().removeClass("tabbat_la_index"); }, observer: true, observeParents: true }) var as; //Scroll Containers $('.scroll-container').each(function(index){ if(index==0){ as=$(this).swiper({ mode:'vertical', scrollContainer: true, mousewheelControl: true, scrollbar: { container:$(this).find('.swiper-scrollbar')[0] }, slidesPerView:'auto', observer: true, observeParents: true, }) }else{ $(this).swiper({ mode:'vertical', scrollContainer: true, mousewheelControl: true, scrollbar: { container:$(this).find('.swiper-scrollbar')[0] } }) } }) var html = ''; html += '<div style="height:0.89rem;"></div>'; html += '<div class="swiper-container" id="swiper-banners" style="height:100%;>'; html += '<div class="swiper-wrapper sw_banner" style="height:100%;>'; html += '<div class="swiper-slide sw_slide" style="height:100%;"><img src="images/1.jpg" alt=""></div>'; html += '<div class="swiper-slide sw_slide" style="height:100%;><img src="images/2.jpg" alt=""></div>'; html += '<div class="swiper-slide sw_slide" style="height:100%;><img src="images/3.jpg" alt=""></div>'; html += '<div class="swiper-slide sw_slide" style="height:100%;><img src="images/4.jpg" alt=""></div>'; html += '<div class="swiper-slide sw_slide" style="height:100%;><img src="images/5.jpg" alt=""></div>'; html += '<div class="swiper-slide sw_slide" style="height:100%;><img src="images/6.jpg" alt=""></div>'; html += '</div>'; html += '<div class="pagination"></div>'; html += '</div>'; var bannerSwiper = $('#swiper-banners').swiper({ pagination : '.pagination', autoplay : 3000, loop : true, grabCursor : true, visibilityFullFit : true, paginationClickable : true, updateOnImagesReady : true, observer : true, observeParents : true }) as.prependSlide(html,'swiper-slide','div'); as.updateActiveSlide(0); as.reInit();图片说明](https://img-ask.csdn.net/upload/201711/07/1510025649_714579.png)

swiper插件自动轮播怎么只显示3个div

在使用swiper插件的时候将loop设置为true,将slidesPerView设置为3,得到的是被压缩的数个div,怎么样才能让div最多只显示3个?

vue-awesome-swiper 手势缩放无效

问题描述: 想在vue项目中使用vue-awesome-swiper实现相册查看功能,测试的时候发现使用写死的图片src 时手势缩放没有问题,但是图片src集合换到从后台获取到再赋值的,手势缩放就不起作用了,不知道是什么原因。 用的vue template, 后台获取到的数据已经渲染到dom中,手机上测试切换没有问题,双击放大也可以,就是手势缩放或者双击放大后图片不能拖拽移动查看(用写死的图片src是可以的)。 vue项目依赖或版本: ``` "devDependencies": { "axios": "^0.15.3", "babel-plugin-component": "^0.10.1", "babel-plugin-transform-object-rest-spread": "^6.26.0", "bootstrap-sass": "^3.3.7", "cross-env": "^3.2.3", "jquery": "^3.1.1", "laravel-mix": "^0.12.1", "less": "^2.7.3", "less-loader": "^4.0.5", "lodash": "^4.17.4", "postcss-px2rem": "^0.3.0", "vue-lazyload": "^1.2.6" }, "dependencies": { "fastclick": "^1.0.6", "leancloud-realtime": "^4.0.0-alpha.3", "leancloud-realtime-plugin-typed-messages": "^3.0.0", "leancloud-storage": "^3.4.2", "mint-ui": "^2.2.11", "moment": "^2.19.1", "vee-validate": "^2.0.0", "vue": "^2.5.13", "vue-awesome-swiper": "^2.6.7", "vue-resource": "^1.3.4", "vue-router": "^3.0.1", "vuex": "^3.0.1" } ``` 问题出现的环境背景及自己尝试过哪些方法: 试过使用另一个图片预览插件 [PhotoSwipe](http://photoswipe.com/ ""):PhotoSwipe,这个插件体验感比较好,但是插件需要预先知道图片的宽高,这个目前还没有时间研究。 相关代码: ``` <style> .viewImg .swiper-slide img { width: 100%; } </style> <template> <div class="viewImg" > <a class="btn-close f-r"><img src="/images/icon-close.png" @click="closeViewer" alt="关闭" title="关闭"></a> <swiper :options="swiperOption" ref="mySwiper"> <swiper-slide v-for="img in images" :key="img.id"> <div class="swiper-zoom-container"> <img :data-src="img.smallSizeUrl" class="swiper-lazy"> </div> </swiper-slide> <div class="swiper-button-prev" slot="button-prev"></div> <div class="swiper-button-next" slot="button-next"></div> </swiper> </div> </template> <script> import 'swiper/dist/css/swiper.css' ; import { swiper, swiperSlide } from 'vue-awesome-swiper' export default { components: { swiper, swiperSlide }, data() { return {swiperOption: { allowTouchMove: true, width: window.innerWidth, notNextTick: false, observer:true,//修改swiper自己或子元素时,自动初始化swiper observeParents:true,//修改swiper的父元素时,自动初始化swiper loadPrevNext: true, lazy: { loadPrevNext: true, }, lazyLoading : true, lazyLoadingInPrevNext: true, // 设置为true允许将延迟加载应用到最接近的slide的图片(前一个和后一个slide)。 zoom: true, grabCursor: true, // 设置为true时,鼠标覆盖Swiper时指针会变成手掌形状,拖动时指针会变成抓手形状。(根据浏览器形状有所不同) pagination: { el: '.swiper-pagination' }, navigation: { nextEl: '.swiper-button-next', prevEl: '.swiper-button-prev' } } } }, //定义这个sweiper对象 computed: { swiper() { return this.$refs.mySwiper.swiper; } }, mounted () { //这边就可以使用swiper这个对象去使用swiper官网中的那些方法 // this.swiper.slideTo(0, 1, false); }, props: { images: { required: true } }, methods:{ closeViewer: function(){ this.viewImg = false; } } } </script> ``` 我期待的结果是什么?实际看到的错误信息又是什么: 需要实现流畅的相册查看功能,支持预加载、流畅切换以及手机中手势缩放查看。 [vue-awesome-swiper 的demo](https://surmon-china.github.io/vue-awesome-swiper/ "")里可以看到都可以满足目前的主要需求,但是我在项目中出现了以上问题,求助。

微信公众号用swiper,vertical时,第二页超出的内容如何才能像PC端一样滚动条显示?

![这是PC端swiper上一页](https://img-ask.csdn.net/upload/201706/28/1498612561_52291.png) !这是PC端 swiper下一页,问题如图所说](https://img-ask.csdn.net/upload/201706/28/1498612583_99655.png) ![这是微信端截图,微信端的时候下一页的内容超出部分被隐藏了,](https://img-ask.csdn.net/upload/201706/28/1498612594_801139.jpg)

javaScript中fullpage.js滚动条和目录导航栏关联不上怎么解决

![想让上面的导航栏和右面的滚动条做关联](https://img-ask.csdn.net/upload/201607/27/1469622281_483039.jpg) $(document).ready(function() { $('#fullpage').fullpage({ paddingTop: '50px', anchors:['firstPage', 'secondPage', 'thirdPage','fourthPage'], menu: '#myMenu' }); }); 按网上的代码进行试验,发现只能点击一次,然后就不起作用了,不知道是怎么回事, 求大神帮忙解决下。。。

在中国程序员是青春饭吗?

今年,我也32了 ,为了不给大家误导,咨询了猎头、圈内好友,以及年过35岁的几位老程序员……舍了老脸去揭人家伤疤……希望能给大家以帮助,记得帮我点赞哦。 目录: 你以为的人生 一次又一次的伤害 猎头界的真相 如何应对互联网行业的「中年危机」 一、你以为的人生 刚入行时,拿着傲人的工资,想着好好干,以为我们的人生是这样的: 等真到了那一天,你会发现,你的人生很可能是这样的: ...

程序员请照顾好自己,周末病魔差点一套带走我。

程序员在一个周末的时间,得了重病,差点当场去世,还好及时挽救回来了。

和黑客斗争的 6 天!

互联网公司工作,很难避免不和黑客们打交道,我呆过的两家互联网公司,几乎每月每天每分钟都有黑客在公司网站上扫描。有的是寻找 Sql 注入的缺口,有的是寻找线上服务器可能存在的漏洞,大部分都...

点沙成金:英特尔芯片制造全过程揭密

“亚马逊丛林里的蝴蝶扇动几下翅膀就可能引起两周后美国德州的一次飓风……” 这句人人皆知的话最初用来描述非线性系统中微小参数的变化所引起的系统极大变化。 而在更长的时间尺度内,我们所生活的这个世界就是这样一个异常复杂的非线性系统…… 水泥、穹顶、透视——关于时间与技艺的蝴蝶效应 公元前3000年,古埃及人将尼罗河中挖出的泥浆与纳特龙盐湖中的矿物盐混合,再掺入煅烧石灰石制成的石灰,由此得来了人...

上班一个月,后悔当初着急入职的选择了

最近有个老铁,告诉我说,上班一个月,后悔当初着急入职现在公司了。他之前在美图做手机研发,今年美图那边今年也有一波组织优化调整,他是其中一个,在协商离职后,当时捉急找工作上班,因为有房贷供着,不能没有收入来源。所以匆忙选了一家公司,实际上是一个大型外包公司,主要派遣给其他手机厂商做外包项目。**当时承诺待遇还不错,所以就立马入职去上班了。但是后面入职后,发现薪酬待遇这块并不是HR所说那样,那个HR自...

女程序员,为什么比男程序员少???

昨天看到一档综艺节目,讨论了两个话题:(1)中国学生的数学成绩,平均下来看,会比国外好?为什么?(2)男生的数学成绩,平均下来看,会比女生好?为什么?同时,我又联想到了一个技术圈经常讨...

副业收入是我做程序媛的3倍,工作外的B面人生是怎样的?

提到“程序员”,多数人脑海里首先想到的大约是:为人木讷、薪水超高、工作枯燥…… 然而,当离开工作岗位,撕去层层标签,脱下“程序员”这身外套,有的人生动又有趣,马上展现出了完全不同的A/B面人生! 不论是简单的爱好,还是正经的副业,他们都干得同样出色。偶尔,还能和程序员的特质结合,产生奇妙的“化学反应”。 @Charlotte:平日素颜示人,周末美妆博主 大家都以为程序媛也个个不修边幅,但我们也许...

如果你是老板,你会不会踢了这样的员工?

有个好朋友ZS,是技术总监,昨天问我:“有一个老下属,跟了我很多年,做事勤勤恳恳,主动性也很好。但随着公司的发展,他的进步速度,跟不上团队的步伐了,有点...

我入职阿里后,才知道原来简历这么写

私下里,有不少读者问我:“二哥,如何才能写出一份专业的技术简历呢?我总感觉自己写的简历太烂了,所以投了无数份,都石沉大海了。”说实话,我自己好多年没有写过简历了,但我认识的一个同行,他在阿里,给我说了一些他当年写简历的方法论,我感觉太牛逼了,实在是忍不住,就分享了出来,希望能够帮助到你。 01、简历的本质 作为简历的撰写者,你必须要搞清楚一点,简历的本质是什么,它就是为了来销售你的价值主张的。往深...

外包程序员的幸福生活

今天给你们讲述一个外包程序员的幸福生活。男主是Z哥,不是在外包公司上班的那种,是一名自由职业者,接外包项目自己干。接下来讲的都是真人真事。 先给大家介绍一下男主,Z哥,老程序员,是我十多年前的老同事,技术大牛,当过CTO,也创过业。因为我俩都爱好喝酒、踢球,再加上住的距离不算远,所以一直也断断续续的联系着,我对Z哥的状况也有大概了解。 Z哥几年前创业失败,后来他开始干起了外包,利用自己的技术能...

C++11:一些微小的变化(新的数据类型、template表达式内的空格、nullptr、std::nullptr_t)

本文介绍一些C++的两个新特性,它们虽然微小,但对你的编程十分重要 一、Template表达式内的空格 C++11标准之前建议在“在两个template表达式的闭符之间放一个空格”的要求已经过时了 例如: vector&lt;list&lt;int&gt; &gt;; //C++11之前 vector&lt;list&lt;int&gt;&gt;; //C++11 二、nullptr ...

优雅的替换if-else语句

场景 日常开发,if-else语句写的不少吧??当逻辑分支非常多的时候,if-else套了一层又一层,虽然业务功能倒是实现了,但是看起来是真的很不优雅,尤其是对于我这种有强迫症的程序"猿",看到这么多if-else,脑袋瓜子就嗡嗡的,总想着解锁新姿势:干掉过多的if-else!!!本文将介绍三板斧手段: 优先判断条件,条件不满足的,逻辑及时中断返回; 采用策略模式+工厂模式; 结合注解,锦...

深入剖析Springboot启动原理的底层源码,再也不怕面试官问了!

大家现在应该都对Springboot很熟悉,但是你对他的启动原理了解吗?

离职半年了,老东家又发 offer,回不回?

有小伙伴问松哥这个问题,他在上海某公司,在离职了几个月后,前公司的领导联系到他,希望他能够返聘回去,他很纠结要不要回去? 俗话说好马不吃回头草,但是这个小伙伴既然感到纠结了,我觉得至少说明了两个问题:1.曾经的公司还不错;2.现在的日子也不是很如意。否则应该就不会纠结了。 老实说,松哥之前也有过类似的经历,今天就来和小伙伴们聊聊回头草到底吃不吃。 首先一个基本观点,就是离职了也没必要和老东家弄的苦...

为什么你不想学习?只想玩?人是如何一步一步废掉的

不知道是不是只有我这样子,还是你们也有过类似的经历。 上学的时候总有很多光辉历史,学年名列前茅,或者单科目大佬,但是虽然慢慢地长大了,你开始懈怠了,开始废掉了。。。 什么?你说不知道具体的情况是怎么样的? 我来告诉你: 你常常潜意识里或者心理觉得,自己真正的生活或者奋斗还没有开始。总是幻想着自己还拥有大把时间,还有无限的可能,自己还能逆风翻盘,只不是自己还没开始罢了,自己以后肯定会变得特别厉害...

为什么程序员做外包会被瞧不起?

二哥,有个事想询问下您的意见,您觉得应届生值得去外包吗?公司虽然挺大的,中xx,但待遇感觉挺低,马上要报到,挺纠结的。

当HR压你价,说你只值7K,你该怎么回答?

当HR压你价,说你只值7K时,你可以流畅地回答,记住,是流畅,不能犹豫。 礼貌地说:“7K是吗?了解了。嗯~其实我对贵司的面试官印象很好。只不过,现在我的手头上已经有一份11K的offer。来面试,主要也是自己对贵司挺有兴趣的,所以过来看看……”(未完) 这段话主要是陪HR互诈的同时,从公司兴趣,公司职员印象上,都给予对方正面的肯定,既能提升HR的好感度,又能让谈判气氛融洽,为后面的发挥留足空间。...

面试:第十六章:Java中级开发(16k)

HashMap底层实现原理,红黑树,B+树,B树的结构原理 Spring的AOP和IOC是什么?它们常见的使用场景有哪些?Spring事务,事务的属性,传播行为,数据库隔离级别 Spring和SpringMVC,MyBatis以及SpringBoot的注解分别有哪些?SpringMVC的工作原理,SpringBoot框架的优点,MyBatis框架的优点 SpringCould组件有哪些,他们...

面试阿里p7,被按在地上摩擦,鬼知道我经历了什么?

面试阿里p7被问到的问题(当时我只知道第一个):@Conditional是做什么的?@Conditional多个条件是什么逻辑关系?条件判断在什么时候执...

面试了一个 31 岁程序员,让我有所触动,30岁以上的程序员该何去何从?

最近面试了一个31岁8年经验的程序猿,让我有点感慨,大龄程序猿该何去何从。

【阿里P6面经】二本,curd两年,疯狂复习,拿下阿里offer

二本的读者,在老东家不断学习,最后逆袭

大三实习生,字节跳动面经分享,已拿Offer

说实话,自己的算法,我一个不会,太难了吧

程序员垃圾简历长什么样?

已经连续五年参加大厂校招、社招的技术面试工作,简历看的不下于万份 这篇文章会用实例告诉你,什么是差的程序员简历! 疫情快要结束了,各个公司也都开始春招了,作为即将红遍大江南北的新晋UP主,那当然要为小伙伴们做点事(手动狗头)。 就在公众号里公开征简历,义务帮大家看,并一一点评。《启舰:春招在即,义务帮大家看看简历吧》 一石激起千层浪,三天收到两百多封简历。 花光了两个星期的所有空闲时...

《经典算法案例》01-08:如何使用质数设计扫雷(Minesweeper)游戏

我们都玩过Windows操作系统中的经典游戏扫雷(Minesweeper),如果把质数当作一颗雷,那么,表格中红色的数字哪些是雷(质数)?您能找出多少个呢?文中用列表的方式罗列了10000以内的自然数、质数(素数),6的倍数等,方便大家观察质数的分布规律及特性,以便对算法求解有指导意义。另外,判断质数是初学算法,理解算法重要性的一个非常好的案例。

《Oracle Java SE编程自学与面试指南》最佳学习路线图(2020最新版)

正确选择比瞎努力更重要!

面试官:你连SSO都不懂,就别来面试了

大厂竟然要考我SSO,卧槽。

微软为一人收购一公司?破解索尼程序、写黑客小说,看他彪悍的程序人生!...

作者 | 伍杏玲出品 | CSDN(ID:CSDNnews)格子衬衫、常掉发、双肩包、修电脑、加班多……这些似乎成了大众给程序员的固定标签。近几年流行的“跨界风”开始刷新人们对程序员的...

终于,月薪过5万了!

来看几个问题想不想月薪超过5万?想不想进入公司架构组?想不想成为项目组的负责人?想不想成为spring的高手,超越99%的对手?那么本文内容是你必须要掌握的。本文主要详解bean的生命...

我说我懂多线程,面试官立马给我发了offer

不小心拿了几个offer,有点烦

自从喜欢上了B站这12个UP主,我越来越觉得自己是个废柴了!

不怕告诉你,我自从喜欢上了这12个UP主,哔哩哔哩成为了我手机上最耗电的软件,几乎每天都会看,可是吧,看的越多,我就越觉得自己是个废柴,唉,老天不公啊,不信你看看…… 间接性踌躇满志,持续性混吃等死,都是因为你们……但是,自己的学习力在慢慢变强,这是不容忽视的,推荐给你们! 都说B站是个宝,可是有人不会挖啊,没事,今天咱挖好的送你一箩筐,首先啊,我在B站上最喜欢看这个家伙的视频了,为啥 ,咱撇...

立即提问
相关内容推荐