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 += '

';
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)

1个回答

高度不用100%,直接付个px值, 或者img设置个宽度

Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
其他相关推荐
微信小程序能不能实现用button绑定点击事件,跳转到目标页面里设置的swiper的页面啊
微信小程序能不能实现用button绑定点击事件,跳转到目标页面里设置的swiper的页面啊
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("未查明原因"); } });
如何解决lazyload.js 和 商品列表的每个商品都是swiper 懒加载的冲突问题呢?
![图片说明](https://img-ask.csdn.net/upload/201907/25/1564045461_145855.jpg) 如何解决lazyload.js 和 商品列表的每个商品都是swiper 懒加载的冲突问题呢? 我需要下拉时懒加载,并且每个商品豆腐块又是swiper懒加载。
component 动态组件为子组件, props获取不到数据
props 获取的值为undefined 需求: 1、需要将 父组件获取到的数据传递到对应组件的data里 ,通过:list 传递给小组件到的 这是引入component 的 父组件 ``` <template> <!-- <web-view :webview-styles="webviewStyles" src="https://uniapp.dcloud.io/static/web-view.html"></web-view> --> <eptaskpage :lists="lists"></eptaskpage> </template> <script> import eptaskpage from "@/pages/task/task-page/task-page.vue" export default { components: { eptaskpage, }, data() { return { lists: { banner: [], grid: [], } } }, onLoad() { console.log('开始加载数据') // this.getBanner(), this.getGrid() // this.getLcard2() // this.getAdList(); }, methods: { async getBanner() { let _self = this; let param = { type: '0' }; _self.banner = await _self.$apis.getBanner(param); }, // getGrid() { // var _self = this; // console.log(_self,9585) // }, getGrid() { var _self = this; uni.request({ url: 'http://122.112.191.190:8080/API/more_video', //请求接口 data: { 'video_type': '', 'price_order': '', 'hot_order': '', 'price': 'F', 'discount': '', 'general_order': '' }, success: (res) => { _self.lists.grid = res.data.data console.log(res, "111111111111") this.flag = true } }); }, ``` 这是component 子组件,用import 引入的小组件来动态生成的页面,封装成为组件 ``` <template> <joy-page class="ep-taskpage"> <div v-for="(item,i) in page_template.items" :key="i" v-if="lists"> <component :is="item.component.tag" :list="item.component.data"></component> </div> </joy-page> </template> <script> import { mapState, mapGetters } from 'vuex' import epSearch from "@/components/ep-search/ep-search.vue" import epSwiper from "@/components/ep-swiper/ep-swiper.vue" import listTitM from "@/components/ep-tit/ep-tit-m.vue" import listTit from "@/components/ep-tit/ep-tit.vue" import epGrid from "@/components/ep-grid/ep-grid.vue" import epCard from "@/components/ep-card/ep-card.vue" import epCcard from "@/components/ep-ccard/ep-ccard.vue" import epCcard2 from "@/components/ep-ccard/ep-ccard2.vue" import epBox2 from "@/components/ep-box/ep-box-2.vue" import epLoadMore from '@/components/ep-b-tab/uni-load-more.vue' import epListCp from "@/components/ep-list-c/ep-list-cp.vue" export default { name: 'eptaskpage', components: { epSearch, epSwiper, listTit, epGrid, epCard, epCcard, epCcard2, epBox2, listTitM, epLoadMore, epListCp }, props: { lists: { type: [Array, Object, Number], default () { return } } }, data() { return { page_template: { //页面的模板,整页 template: "", //可以指定前端对应的templete,无则默认 items: [ //页面上的组件数组,按顺序显示 { component: { tag: "ep-search", data: ['grid'] } }, { component: { tag: "ep-swiper", data: ['banner'] } }, { component: { tag: "ep-grid", data: ['grid'] } }, { component: { tag: "list-tit", data: ['listtit'] } }, { component: { tag: "ep-box-2", data: ['adList'] } }, { component: { tag: "list-tit", data: ['listtit'] } }, { component: { tag: "ep-ccard", data: ['lcard'], } }, { component: { tag: "list-tit", data: ['listtit'] } }, { component: { tag: "ep-ccard", data: ['lcard2'], } }, { component: { tag: "list-tit-m", data: ['listTitM'] } }, { component: { tag: "ep-ccard2", data: ['lcard3'], } }, ] }, } }, ```
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> ```
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切换,左侧切换标签,右侧切换轮播图
swiper插件的pagination不起作用
各位大牛,我用swiper的pagination,能显示几个圆点,但是点击圆点并不能实现翻页效果。代码如下,求各位指点迷津,多谢啦! <body> <!-- Swiper --> <div class="swiper-container"> <div class="swiper-wrapper"> <div class="swiper-slide"><span>Slide 1</span></div> <div class="swiper-slide"><span>Slide 2</span></div> <div class="swiper-slide"><span>Slide 3</span></div> <div class="swiper-slide"><span>Slide 4</span></div> <div class="swiper-slide"><span>Slide 5</span></div> </div> <!-- Add Pagination --> <div class="swiper-pagination"></div> </div> <!-- Initialize Swiper --> <script type="text/javascript"> $(document).ready(function(){ var swiper = new Swiper('.swiper-container', { pagination: '.swiper-pagination', paginationClickable: true, }); }); </script> </body> 效果如下,忽略css设置 ![图片说明](https://img-ask.csdn.net/upload/201510/30/1446192453_321231.png)
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动画效果,急求
swiper 渲染多条数据时时间太长
swiper 渲染多条数据时时间太长;如果以10条数据分页的话,每次滑动加载又会造成1~2秒的加载卡顿
HTML Video播放视频,会短暂黑屏一下,详细描述正文,请问什么问题?
最近在做一个小视频的平台,采用的是swiper做的滚动加载,每个视频是video播放,其他手机暂时没发现问题,但是vivo x5手机播放时会短暂黑屏一下,然后开始播放,都是有默认图的。也就是默认图之后会有一个0.5s的黑屏才会开始播放视频,其他手机暂时没发现这个问题,请问有大佬知道这是什么问题么。
echarts能不能和swiper结合使用?
需要一个自动轮播插件里显示图表,现在把echarts放进swiper的div里会出现Error: Initialize failed: invalid dom. JS的加载顺序没有问题,div的宽高也设置了,请问一下是什么地方有问题导致echarts不能显示出来
在react中关于swiper中时间控制的需求
场景需求是这样的:这是一个轮播组件,组件加载完毕之后,右上角倒计时开始倒数,到0会自动切换下一个菜品,下一个菜品显示出来的时候,倒计时重新从5开始倒数,以此类推。要求是使用Swiper。![图片说明](https://img-ask.csdn.net/upload/201908/22/1566443729_293914.png)
swiper的paginationRender如何与滑动事件一起使用?请教各位大佬
//swiper的paginationRender如何与滑动事件一起使用? <script> var swiper = new Swiper('.vip_user_order', { autoHeight: true, //enable auto height pagination: '.order_nav', paginationClickable: true, paginationBulletRender: function (swiper,index, className) { switch (index) { case 0: name='全部';break; case 1: name='待付款';break; case 2: name='待发货';break; case 3: name='已成交';break; default: name=''; } return '<a class="' + className + '">' + name + '</a>'; } }); /* var Myswiper = new Swiper('.swiper-container', { on:{ slidePrevTransitionEnd:function(){ alert("后退"); }, slideNextTransitionEnd:function(){ alert("前行"); }, } }); */ </script>
swiper 页面 在安卓上 有白色区块 在ios上表现的很好没有白色区块 看图
# ![图片说明](https://img-ask.csdn.net/upload/201507/20/1437381110_697265.jpg)![图片说明](https://img-ask.csdn.net/upload/201507/20/1437381120_451970.jpg)
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的变动,请问如何才能实现想要的效果?
vue2.0整合swiper4.0的兼容性问题
最近使用vue整合swiper的时候,官网上给的移动端的在线演示的项目的整合到vue的时候,发现在swiper做页面的上下滚动的时候出现各种问题,slidesPerView:‘auto’,的时候不能滑动,值为1的时候,slide都会初始化成相同的高度,导致有的出现空白区域,有的直接覆盖下面的slide了,添加autoHeight:true,没什么作用
Vue里面用v-bind绑定一个src,里面能否用相对路径呢
这是我在网上学习的项目,老师用的都是网址一样的绝对路径。写在下面要轮播的imgUrl里,这样没有问题,但是如果我用现在的相对路径就不行了,图片显示不出来,从电脑上本地开始的绝对路径也不行,路径直接出现在html上面了,如果不用v-bind就还可以,请问有解决的办法吗 ``` <template> <div class="warpper"> <swiper :options="swiperOption"> <!-- slides --> <swiper-slide v-for="item of swiperList" :key="item.id"><img class="swiper-img" src="F:\html5\mukeVUE\classic APP\Travel\travel\src\assets\swiper2.jpg"></swiper-slide> <!-- Optional controls --> <div class="swiper-pagination" slot="pagination"></div> </swiper> </div> </template> <script> export default { name: 'HomeSwiper', data: function(){ return { swiperOption: { pagination:'.swiper-pagination' }, swiperList: [{ id: '0001', imgUrl: '../../../assets/swiper1.jpg' }, { id: '0002', imgUrl: '../../../assets/swiper2.jpg' }] } } } ``` ![图片说明](https://img-ask.csdn.net/upload/201910/18/1571343703_355570.png)
h5 swiper如何禁止对角滚动
3个slider1,slider2,slider3,每个slider都是list,高度大于屏高,可以上下滚动。用了swiper左右滑动切换slider,发现左右滑动时可以上下滑动,造成页面滑动时不受控制,整体滑动体验很差,请问如何禁止对角滑动,就是在上下滑动时,不可以横向滑动,横向滑动时,阻止上下滑动
前端-swiper的使用!!!新人求问
在做一个手机页面,需要用到很多轮播图,在网上找到了swiper这个插件。 现在想在一个页面利用swiper实现两个以上的轮播图,不知道可以吗? 我自己尝试了下,认为js文件里面都和swiper-content这些类名都绑定了,如果要修改 是不是就要修改原生的js文件呢?有没有其他办法??
终于明白阿里百度这样的大公司,为什么面试经常拿ThreadLocal考验求职者了
点击上面↑「爱开发」关注我们每晚10点,捕获技术思考和创业资源洞察什么是ThreadLocalThreadLocal是一个本地线程副本变量工具类,各个线程都拥有一份线程私...
《奇巧淫技》系列-python!!每天早上八点自动发送天气预报邮件到QQ邮箱
将代码部署服务器,每日早上定时获取到天气数据,并发送到邮箱。 也可以说是一个小人工智障。 思路可以运用在不同地方,主要介绍的是思路。
加快推动区块链技术和产业创新发展,2019可信区块链峰会在京召开
11月8日,由中国信息通信研究院、中国通信标准化协会、中国互联网协会、可信区块链推进计划联合主办,科技行者协办的2019可信区块链峰会将在北京悠唐皇冠假日酒店开幕。   区块链技术被认为是继蒸汽机、电力、互联网之后,下一代颠覆性的核心技术。如果说蒸汽机释放了人类的生产力,电力解决了人类基本的生活需求,互联网彻底改变了信息传递的方式,区块链作为构造信任的技术有重要的价值。   1...
阿里面试官问我:如何设计秒杀系统?我的回答让他比起大拇指
你知道的越多,你不知道的越多 点赞再看,养成习惯 GitHub上已经开源 https://github.com/JavaFamily 有一线大厂面试点脑图和个人联系方式,欢迎Star和指教 前言 Redis在互联网技术存储方面使用如此广泛,几乎所有的后端技术面试官都要在Redis的使用和原理方面对小伙伴们进行360°的刁难。 作为一个在互联网公司面一次拿一次Offer的面霸,打败了...
C语言魔塔游戏
很早就很想写这个,今天终于写完了。 游戏截图: 编译环境: VS2017 游戏需要一些图片,如果有想要的或者对游戏有什么看法的可以加我的QQ 2985486630 讨论,如果暂时没有回应,可以在博客下方留言,到时候我会看到。 下面我来介绍一下游戏的主要功能和实现方式 首先是玩家的定义,使用结构体,这个名字是可以自己改变的 struct gamerole { char n...
面试官问我:什么是消息队列?什么场景需要他?用了会出现什么问题?
你知道的越多,你不知道的越多 点赞再看,养成习惯 GitHub上已经开源 https://github.com/JavaFamily 有一线大厂面试点脑图、个人联系方式和人才交流群,欢迎Star和完善 前言 消息队列在互联网技术存储方面使用如此广泛,几乎所有的后端技术面试官都要在消息队列的使用和原理方面对小伙伴们进行360°的刁难。 作为一个在互联网公司面一次拿一次Offer的面霸...
Android性能优化(4):UI渲染机制以及优化
文章目录1. 渲染机制分析1.1 渲染机制1.2 卡顿现象1.3 内存抖动2. 渲染优化方式2.1 过度绘制优化2.1.1 Show GPU overdraw2.1.2 Profile GPU Rendering2.2 卡顿优化2.2.1 SysTrace2.2.2 TraceView 在从Android 6.0源码的角度剖析View的绘制原理一文中,我们了解到View的绘制流程有三个步骤,即m...
微服务中的Kafka与Micronaut
今天,我们将通过Apache Kafka主题构建一些彼此异步通信的微服务。我们使用Micronaut框架,它为与Kafka集成提供专门的库。让我们简要介绍一下示例系统的体系结构。我们有四个微型服务:订单服务,行程服务,司机服务和乘客服务。这些应用程序的实现非常简单。它们都有内存存储,并连接到同一个Kafka实例。 我们系统的主要目标是为客户安排行程。订单服务应用程序还充当网关。它接收来自客户的请求...
致 Python 初学者们!
作者| 许向武 责编 | 屠敏 出品 | CSDN 博客 前言 在 Python 进阶的过程中,相信很多同学应该大致上学习了很多 Python 的基础知识,也正在努力成长。在此期间,一定遇到了很多的困惑,对未来的学习方向感到迷茫。我非常理解你们所面临的处境。我从2007年开始接触 Python 这门编程语言,从2009年开始单一使用 Python 应对所有的开发工作,直至今...
究竟你适不适合买Mac?
我清晰的记得,刚买的macbook pro回到家,开机后第一件事情,就是上了淘宝网,花了500元钱,找了一个上门维修电脑的师傅,上门给我装了一个windows系统。。。。。。 表砍我。。。 当时买mac的初衷,只是想要个固态硬盘的笔记本,用来运行一些复杂的扑克软件。而看了当时所有的SSD笔记本后,最终决定,还是买个好(xiong)看(da)的。 已经有好几个朋友问我mba怎么样了,所以今天尽量客观...
程序员一般通过什么途径接私活?
二哥,你好,我想知道一般程序猿都如何接私活,我也想接,能告诉我一些方法吗? 上面是一个读者“烦不烦”问我的一个问题。其实不止是“烦不烦”,还有很多读者问过我类似这样的问题。 我接的私活不算多,挣到的钱也没有多少,加起来不到 20W。说实话,这个数目说出来我是有点心虚的,毕竟太少了,大家轻喷。但我想,恰好配得上“一般程序员”这个称号啊。毕竟苍蝇再小也是肉,我也算是有经验的人了。 唾弃接私活、做外...
字节跳动面试官这样问消息队列:分布式事务、重复消费、顺序消费,我整理了一下
你知道的越多,你不知道的越多 点赞再看,养成习惯 GitHub上已经开源 https://github.com/JavaFamily 有一线大厂面试点脑图、个人联系方式和人才交流群,欢迎Star和完善 前言 消息队列在互联网技术存储方面使用如此广泛,几乎所有的后端技术面试官都要在消息队列的使用和原理方面对小伙伴们进行360°的刁难。 作为一个在互联网公司面一次拿一次Offer的面霸...
Python爬虫爬取淘宝,京东商品信息
小编是一个理科生,不善长说一些废话。简单介绍下原理然后直接上代码。 使用的工具(Python+pycharm2019.3+selenium+xpath+chromedriver)其中要使用pycharm也可以私聊我selenium是一个框架可以通过pip下载 pip installselenium -ihttps://pypi.tuna.tsinghua.edu.cn/simple/ ...
阿里程序员写了一个新手都写不出的低级bug,被骂惨了。
这种新手都不会范的错,居然被一个工作好几年的小伙子写出来,差点被当场开除了。
Java工作4年来应聘要16K最后没要,细节如下。。。
前奏: 今天2B哥和大家分享一位前几天面试的一位应聘者,工作4年26岁,统招本科。 以下就是他的简历和面试情况。 基本情况: 专业技能: 1、&nbsp;熟悉Sping了解SpringMVC、SpringBoot、Mybatis等框架、了解SpringCloud微服务 2、&nbsp;熟悉常用项目管理工具:SVN、GIT、MAVEN、Jenkins 3、&nbsp;熟悉Nginx、tomca...
SpringBoot2.x系列教程(三十六)SpringBoot之Tomcat配置
Spring Boot默认内嵌的Tomcat为Servlet容器,关于Tomcat的所有属性都在ServerProperties配置类中。同时,也可以实现一些接口来自定义内嵌Servlet容器和内嵌Tomcat等的配置。 关于此配置,网络上有大量的资料,但都是基于SpringBoot1.5.x版本,并不适合当前最新版本。本文将带大家了解一下最新版本的使用。 ServerProperties的部分源...
Python绘图,圣诞树,花,爱心 | Turtle篇
每周每日,分享Python实战代码,入门资料,进阶资料,基础语法,爬虫,数据分析,web网站,机器学习,深度学习等等。 公众号回复【进群】沟通交流吧,QQ扫码进群学习吧 微信群 QQ群 1.画圣诞树 import turtle screen = turtle.Screen() screen.setup(800,600) circle = turtle.Turtle()...
作为一个程序员,CPU的这些硬核知识你必须会!
CPU对每个程序员来说,是个既熟悉又陌生的东西? 如果你只知道CPU是中央处理器的话,那可能对你并没有什么用,那么作为程序员的我们,必须要搞懂的就是CPU这家伙是如何运行的,尤其要搞懂它里面的寄存器是怎么一回事,因为这将让你从底层明白程序的运行机制。 随我一起,来好好认识下CPU这货吧 把CPU掰开来看 对于CPU来说,我们首先就要搞明白它是怎么回事,也就是它的内部构造,当然,CPU那么牛的一个东...
破14亿,Python分析我国存在哪些人口危机!
一、背景 二、爬取数据 三、数据分析 1、总人口 2、男女人口比例 3、人口城镇化 4、人口增长率 5、人口老化(抚养比) 6、各省人口 7、世界人口 四、遇到的问题 遇到的问题 1、数据分页,需要获取从1949-2018年数据,观察到有近20年参数:LAST20,由此推测获取近70年的参数可设置为:LAST70 2、2019年数据没有放上去,可以手动添加上去 3、将数据进行 行列转换 4、列名...
听说想当黑客的都玩过这个Monyer游戏(1~14攻略)
第零关 进入传送门开始第0关(游戏链接) 请点击链接进入第1关: 连接在左边→ ←连接在右边 看不到啊。。。。(只能看到一堆大佬做完的留名,也能看到菜鸡的我,在后面~~) 直接fn+f12吧 &lt;span&gt;连接在左边→&lt;/span&gt; &lt;a href="first.php"&gt;&lt;/a&gt; &lt;span&gt;←连接在右边&lt;/span&gt; o...
在家远程办公效率低?那你一定要收好这个「在家办公」神器!
相信大家都已经收到国务院延长春节假期的消息,接下来,在家远程办公可能将会持续一段时间。 但是问题来了。远程办公不是人在电脑前就当坐班了,相反,对于沟通效率,文件协作,以及信息安全都有着极高的要求。有着非常多的挑战,比如: 1在异地互相不见面的会议上,如何提高沟通效率? 2文件之间的来往反馈如何做到及时性?如何保证信息安全? 3如何规划安排每天工作,以及如何进行成果验收? ...... ...
作为一个程序员,内存和磁盘的这些事情,你不得不知道啊!!!
截止目前,我已经分享了如下几篇文章: 一个程序在计算机中是如何运行的?超级干货!!! 作为一个程序员,CPU的这些硬核知识你必须会! 作为一个程序员,内存的这些硬核知识你必须懂! 这些知识可以说是我们之前都不太重视的基础知识,可能大家在上大学的时候都学习过了,但是嘞,当时由于老师讲解的没那么有趣,又加上这些知识本身就比较枯燥,所以嘞,大家当初几乎等于没学。 再说啦,学习这些,也看不出来有什么用啊!...
这个世界上人真的分三六九等,你信吗?
偶然间,在知乎上看到一个问题 一时间,勾起了我深深的回忆。 以前在厂里打过两次工,做过家教,干过辅导班,做过中介。零下几度的晚上,贴过广告,满脸、满手地长冻疮。 再回首那段岁月,虽然苦,但让我学会了坚持和忍耐。让我明白了,在这个世界上,无论环境多么的恶劣,只要心存希望,星星之火,亦可燎原。 下文是原回答,希望能对你能有所启发。 如果我说,这个世界上人真的分三六九等,...
2020年全新Java学习路线图,含配套视频,学完即为中级Java程序员!!
新的一年来临,突如其来的疫情打破了平静的生活! 在家的你是否很无聊,如果无聊就来学习吧! 世上只有一种投资只赚不赔,那就是学习!!! 传智播客于2020年升级了Java学习线路图,硬核升级,免费放送! 学完你就是中级程序员,能更快一步找到工作! 一、Java基础 JavaSE基础是Java中级程序员的起点,是帮助你从小白到懂得编程的必经之路。 在Java基础板块中有6个子模块的学...
B 站上有哪些很好的学习资源?
哇说起B站,在小九眼里就是宝藏般的存在,放年假宅在家时一天刷6、7个小时不在话下,更别提今年的跨年晚会,我简直是跪着看完的!! 最早大家聚在在B站是为了追番,再后来我在上面刷欧美新歌和漂亮小姐姐的舞蹈视频,最近两年我和周围的朋友们已经把B站当作学习教室了,而且学习成本还免费,真是个励志的好平台ヽ(.◕ฺˇд ˇ◕ฺ;)ノ 下面我们就来盘点一下B站上优质的学习资源: 综合类 Oeasy: 综合...
爬取薅羊毛网站百度云资源
这是疫情期间无聊做的爬虫, 去获取暂时用不上的教程 import threading import time import pandas as pd import requests import re from threading import Thread, Lock # import urllib.request as request # req=urllib.request.Requ...
如何优雅地打印一个Java对象?
你好呀,我是沉默王二,一个和黄家驹一样身高,和刘德华一样颜值的程序员。虽然已经写了十多年的 Java 代码,但仍然觉得自己是个菜鸟(请允许我惭愧一下)。 在一个月黑风高的夜晚,我思前想后,觉得再也不能这么蹉跎下去了。于是痛下决心,准备通过输出的方式倒逼输入,以此来修炼自己的内功,从而进阶成为一名真正意义上的大神。与此同时,希望这些文章能够帮助到更多的读者,让大家在学习的路上不再寂寞、空虚和冷。 ...
雷火神山直播超两亿,Web播放器事件监听是怎么实现的?
Web播放器解决了在手机浏览器和PC浏览器上播放音视频数据的问题,让视音频内容可以不依赖用户安装App,就能进行播放以及在社交平台进行传播。在视频业务大数据平台中,播放数据的统计分析非常重要,所以Web播放器在使用过程中,需要对其内部的数据进行收集并上报至服务端,此时,就需要对发生在其内部的一些播放行为进行事件监听。 那么Web播放器事件监听是怎么实现的呢? 01 监听事件明细表 名...
3万字总结,Mysql优化之精髓
本文知识点较多,篇幅较长,请耐心学习 MySQL已经成为时下关系型数据库产品的中坚力量,备受互联网大厂的青睐,出门面试想进BAT,想拿高工资,不会点MySQL优化知识,拿offer的成功率会大大下降。 为什么要优化 系统的吞吐量瓶颈往往出现在数据库的访问速度上 随着应用程序的运行,数据库的中的数据会越来越多,处理时间会相应变慢 数据是存放在磁盘上的,读写速度无法和内存相比 如何优化 设计...
HTML5适合的情人节礼物有纪念日期功能
前言 利用HTML5,css,js实现爱心树 以及 纪念日期的功能 网页有播放音乐功能 以及打字倾诉感情的画面,非常适合情人节送给女朋友 具体的HTML代码 具体只要修改代码里面的男某某和女某某 文字段也可自行修改,还有代码下半部分的JS代码需要修改一下起始日期 注意月份为0~11月 也就是月份需要减一。 当然只有一部分HTML和JS代码不够运行的,文章最下面还附加了完整代码的下载地址 &lt;!...
相关热词 c# 识别回车 c#生成条形码ean13 c#子控制器调用父控制器 c# 写大文件 c# 浏览pdf c#获取桌面图标的句柄 c# list反射 c# 句柄 进程 c# 倒计时 线程 c# 窗体背景色
立即提问