这里的轮播图有三页,并且每页的数据有8个,只能将23个数据分割开来,这里要实现5个tab用一个轮播图
<div class="report_detail_class">
<div class="fishqc-tap">
<div ms-class="[@codePic!=''&&@codeInfo!=''?'tapHome':'changeToThree']">
<a href="javascript:;" onClick="javascript:;" ms-class="@currentSelect.key == 'fish' && 'active'" ms-click="sortclick(@setting.fish)">最近新测</a>
</div>
<div ms-class="[@codePic!=''&&@codeInfo!=''?'tapHome':'changeToThree']">
<a href="javascript:;" onClick="javascript:;" ms-class="@currentSelect.key == 'cosmetic' && 'active'" ms-click="sortclick(@setting.cosmetic)">美妆</a>
</div>
<div ms-class="[@codePic!=''&&@codeInfo!=''?'tapHome':'changeToThree']">
<a href="javascript:;" onClick="javascript:;" ms-class="@currentSelect.key == 'motherbaby' && 'active'" ms-click="sortclick(@setting.motherbaby)">母婴</a>
</div>
<div ms-class="[@codePic!=''&&@codeInfo!=''?'tapHome':'changeToThree']">
<a href="javascript:;" onClick="javascript:;" ms-class="@currentSelect.key == 'healthcare' && 'active'" ms-click="sortclick(@setting.healthcare)">保健品</a>
</div>
<div ms-class="[@codePic!=''&&@codeInfo!=''?'tapHome':'changeToThree']">
<a href="javascript:;" onClick="javascript:;" ms-class="@currentSelect.key == 'food' && 'active'" ms-click="sortclick(@setting.food)">食品/其他</a>
</div>
</div>
<!-- test借用样式 -->
<div ms-if="@currentSelect.key == 'fish'">
<div ms-visible="havadata" class="newhomepagecontain">
<div class="swiper-containerfish">
<div class="swiper-wrapper" style="height: 440px;">
<div class="swiper-slide swiperWidth" >
<div style="width:100%">
<div style="display:inline-block;width:24.9%;float:left;height:217px" ms-for="($index, el) in @slide1">
<a class="img forHover" style="width: 100%;" href="javascript:;" ms-attr="{href:el.url}" >
<div class="picContent">
<div style="height:132px;">
<img ms-attr="{src:el.img}" alt="" class="productImg">
</div>
<img src="data:image/system/pc/greenFishPc.png" alt="" class="greenFishPic" ms-visible="el.level == 'fish'">
<img src="data:image/system/pc/component Assessment.png" alt="" class="greenFishPic" ms-visible="el.level == 'pass'">
<span class="tryIt" ms-visible="el.trystatus=='1'">试用</span>
</div>
<div class="productimg productsize">
</div>
<p class="productIntro">{{el.chs_name}}</p>
</a>
</div>
</div>
</div>
<div class="swiper-slide swiperWidth">
<div style="width:100%">
<div style="display:inline-block;width:25%;float: left;height:217px" ms-for="($index, el) in @slide2">
<a class="img forHover" style="width: 100%;" href="javascript:;" ms-attr="{href:el.url}">
<div class="picContent">
<div style="height:132px;">
<img ms-attr="{src:el.img}" alt="" class="productImg">
</div>
<img src="data:image/system/pc/greenFishPc.png" alt="" class="greenFishPic" ms-visible="el.level == 'fish'">
<img src="data:image/system/pc/component Assessment.png" alt="" class="greenFishPic" ms-visible="el.level == 'pass'">
<span class="tryIt" ms-visible="el.trystatus=='1'">试用</span>
</div>
<div class="productimg productsize">
</div>
<p class="productIntro">{{el.chs_name}}</p>
</a>
</div>
</div>
</div>
<div class="swiper-slide swiperWidth">
<div style="width:100%" >
<div style="display:inline-block;width:25%;float: left;height:217px" ms-for="($index, el) in @slide3">
<a class="img forHover" style="width: 100%;" href="javascript:;" ms-attr="{href:el.url}">
<div class="picContent">
<div style="height:132px;">
<img ms-attr="{src:el.img}" alt="" class="productImg">
</div>
<img src="data:image/system/pc/greenFishPc.png" alt="" class="greenFishPic" ms-visible="el.level == 'fish'">
<img src="data:image/system/pc/component Assessment.png" alt="" class="greenFishPic" ms-visible="el.level == 'pass'">
<span class="tryIt" ms-visible="el.trystatus=='1'">试用</span>
</div>
<div class="productimg productsize">
</div>
<p class="productIntro">{{el.chs_name}}</p>
</a>
</div>
<!-- 最后一个加载更多 -->
<div style="display:inline-block;width:25%;float: left;height:217px" >
<a class="img forHover" style="width: 100%;" href="https://product.fishqc.com/product-list" href="javascript:;">
<div class="picContent">
<div style="height:132px;">
<img src="data:image/system/pc/moreInfo.png" alt="" class="productImg" style="height: 70%;vertical-align: middle;padding-top: 20px;">
</div>
</div>
<div class="productimg productsize">
</div>
<p class="productIntro">查看更多优品</p>
</a>
</div>
</div>
</div>
</div>
<div class="swiper-paginationfish"></div>
</div>
</div>
</div>
<div ms-if="@currentSelect.key == 'cosmetic'">
<div ms-visible="havadata" class="newhomepagecontain">
<div class="swiper-containercosmetic">
<div class="swiper-wrapper" style="height: 440px;">
<div class="swiper-slide swiperWidth">
<div style="width:100%">
<div style="display:inline-block;width:24.9%;float:left;height:217px" ms-for="($index, el) in @slide1Cosmetic">
<a class="img forHover" style="width: 100%;" href="javascript:;" ms-attr="{href:el.url}">
<div class="picContent">
<div style="height:132px;">
<img ms-attr="{src:el.img}" alt="" class="productImg">
</div>
<img src="data:image/system/pc/greenFishPc.png" alt="" class="greenFishPic" ms-visible="el.level == 'fish'">
<img src="data:image/system/pc/component Assessment.png" alt="" class="greenFishPic" ms-visible="el.level == 'pass'">
<span class="tryIt" ms-visible="el.trystatus=='1'">试用</span>
</div>
<div class="productimg productsize">
</div>
<p class="productIntro">{{el.chs_name}}</p>
</a>
</div>
</div>
</div>
<div class="swiper-slide swiperWidth">
<div style="width:100%">
<div style="display:inline-block;width:25%;float: left;height:217px" ms-for="($index, el) in @slide2Cosmetic">
<a class="img forHover" style="width: 100%;" href="javascript:;" ms-attr="{href:el.url}">
<div class="picContent">
<div style="height:132px;">
<img ms-attr="{src:el.img}" alt="" class="productImg">
</div>
<img src="data:image/system/pc/greenFishPc.png" alt="" class="greenFishPic" ms-visible="el.level == 'fish'">
<img src="data:image/system/pc/component Assessment.png" alt="" class="greenFishPic" ms-visible="el.level == 'pass'">
<span class="tryIt" ms-visible="el.trystatus=='1'">试用</span>
</div>
<div class="productimg productsize">
</div>
<p class="productIntro">{{el.chs_name}}</p>
</a>
</div>
</div>
</div>
<div class="swiper-slide swiperWidth">
<div style="width:100%">
<div style="display:inline-block;width:25%;float: left;height:217px" ms-for="($index, el) in @slide3Cosmetic">
<a class="img forHover" style="width: 100%;" href="javascript:;" ms-attr="{href:el.url}">
<div class="picContent">
<div style="height:132px;">
<img ms-attr="{src:el.img}" alt="" class="productImg">
</div>
<img src="data:image/system/pc/greenFishPc.png" alt="" class="greenFishPic" ms-visible="el.level == 'fish'">
<img src="data:image/system/pc/component Assessment.png" alt="" class="greenFishPic" ms-visible="el.level == 'pass'">
<span class="tryIt" ms-visible="el.trystatus=='1'">试用</span>
</div>
<div class="productimg productsize">
</div>
<p class="productIntro">{{el.chs_name}}</p>
</a>
</div>
<!-- 最后一个加载更多 -->
<div style="display:inline-block;width:25%;float: left;height:217px">
<a class="img forHover" style="width: 100%;" href="https://product.fishqc.com/product-list?product=meizhuang" href="javascript:;">
<div class="picContent">
<div style="height:132px;">
<img src="data:image/system/pc/moreInfo.png" alt="" class="productImg" style="height: 70%;vertical-align: middle;padding-top: 20px;">
</div>
</div>
<div class="productimg productsize">
</div>
<p class="productIntro">查看更多优品</p>
</a>
</div>
</div>
</div>
</div>
<div class="swiper-paginationcosmetic"></div>
</div>
</div>
</div>
<div ms-if="@currentSelect.key == 'motherbaby'">
<div ms-visible="havadata" class="newhomepagecontain">
<div class="swiper-containermotherbaby">
<div class="swiper-wrapper" style="height: 440px;">
<div class="swiper-slide swiperWidth">
<div style="width:100%">
<div style="display:inline-block;width:24.9%;float:left;height:217px" ms-for="($index, el) in @slide1Motherbaby">
<a class="img forHover" style="width: 100%;" href="javascript:;" ms-attr="{href:el.url}">
<div class="picContent">
<div style="height:132px;">
<img ms-attr="{src:el.img}" alt="" class="productImg">
</div>
<img src="data:image/system/pc/greenFishPc.png" alt="" class="greenFishPic" ms-visible="el.level == 'fish'">
<img src="data:image/system/pc/component Assessment.png" alt="" class="greenFishPic" ms-visible="el.level == 'pass'">
<span class="tryIt" ms-visible="el.trystatus=='1'">试用</span>
</div>
<div class="productimg productsize">
</div>
<p class="productIntro">{{el.chs_name}}</p>
</a>
</div>
</div>
</div>
<div class="swiper-slide swiperWidth">
<div style="width:100%">
<div style="display:inline-block;width:25%;float: left;height:217px" ms-for="($index, el) in @slide2Motherbaby">
<a class="img forHover" style="width: 100%;" href="javascript:;" ms-attr="{href:el.url}">
<div class="picContent">
<div style="height:132px;">
<img ms-attr="{src:el.img}" alt="" class="productImg">
</div>
<img src="data:image/system/pc/greenFishPc.png" alt="" class="greenFishPic" ms-visible="el.level == 'fish'">
<img src="data:image/system/pc/component Assessment.png" alt="" class="greenFishPic" ms-visible="el.level == 'pass'">
<span class="tryIt" ms-visible="el.trystatus=='1'">试用</span>
</div>
<div class="productimg productsize">
</div>
<p class="productIntro">{{el.chs_name}}</p>
</a>
</div>
</div>
</div>
<div class="swiper-slide swiperWidth">
<div style="width:100%">
<div style="display:inline-block;width:25%;float: left;height:217px" ms-for="($index, el) in @slide3Motherbaby">
<a class="img forHover" style="width: 100%;" href="javascript:;" ms-attr="{href:el.url}">
<div class="picContent">
<div style="height:132px;">
<img ms-attr="{src:el.img}" alt="" class="productImg">
</div>
<img src="data:image/system/pc/greenFishPc.png" alt="" class="greenFishPic" ms-visible="el.level == 'fish'">
<img src="data:image/system/pc/component Assessment.png" alt="" class="greenFishPic" ms-visible="el.level == 'pass'">
<span class="tryIt" ms-visible="el.trystatus=='1'">试用</span>
</div>
<div class="productimg productsize">
</div>
<p class="productIntro">{{el.chs_name}}</p>
</a>
</div>
<!-- 最后一个加载更多 -->
<div style="display:inline-block;width:25%;float: left;height:217px">
<a class="img forHover" style="width: 100%;" href="https://product.fishqc.com/product-list?product=muying" href="javascript:;">
<div class="picContent">
<div style="height:132px;">
<img src="data:image/system/pc/moreInfo.png" alt="" class="productImg" style="height: 70%;vertical-align: middle;padding-top: 20px;">
</div>
</div>
<div class="productimg productsize">
</div>
<p class="productIntro">查看更多优品</p>
</a>
</div>
</div>
</div>
</div>
<div class="swiper-paginationmotherbaby"></div>
</div>
</div>
</div>
<div ms-if="@currentSelect.key == 'healthcare'">
<div ms-visible="havadata" class="newhomepagecontain">
<div class="swiper-containerhealthcare">
<div class="swiper-wrapper" style="height: 440px;">
<div class="swiper-slide swiperWidth">
<div style="width:100%">
<div style="display:inline-block;width:24.9%;float:left;height:217px" ms-for="($index, el) in @slide1Healthcare">
<a class="img forHover" style="width: 100%;" href="javascript:;" ms-attr="{href:el.url}">
<div class="picContent">
<div style="height:132px;">
<img ms-attr="{src:el.img}" alt="" class="productImg">
</div>
<img src="data:image/system/pc/greenFishPc.png" alt="" class="greenFishPic" ms-visible="el.level == 'fish'">
<img src="data:image/system/pc/component Assessment.png" alt="" class="greenFishPic" ms-visible="el.level == 'pass'">
<span class="tryIt" ms-visible="el.trystatus=='1'">试用</span>
</div>
<div class="productimg productsize">
</div>
<p class="productIntro">{{el.chs_name}}</p>
</a>
</div>
</div>
</div>
<div class="swiper-slide swiperWidth">
<div style="width:100%">
<div style="display:inline-block;width:25%;float: left;height:217px" ms-for="($index, el) in @slide2Healthcare">
<a class="img forHover" style="width: 100%;" href="javascript:;" ms-attr="{href:el.url}">
<div class="picContent">
<div style="height:132px;">
<img ms-attr="{src:el.img}" alt="" class="productImg">
</div>
<img src="data:image/system/pc/greenFishPc.png" alt="" class="greenFishPic" ms-visible="el.level == 'fish'">
<img src="data:image/system/pc/component Assessment.png" alt="" class="greenFishPic" ms-visible="el.level == 'pass'">
<span class="tryIt" ms-visible="el.trystatus=='1'">试用</span>
</div>
<div class="productimg productsize">
</div>
<p class="productIntro">{{el.chs_name}}</p>
</a>
</div>
</div>
</div>
<div class="swiper-slide swiperWidth">
<div style="width:100%">
<div style="display:inline-block;width:25%;float: left;height:217px" ms-for="($index, el) in @slide3Healthcare">
<a class="img forHover" style="width: 100%;" href="javascript:;" ms-attr="{href:el.url}">
<div class="picContent">
<div style="height:132px;">
<img ms-attr="{src:el.img}" alt="" class="productImg">
</div>
<img src="data:image/system/pc/greenFishPc.png" alt="" class="greenFishPic" ms-visible="el.level == 'fish'">
<img src="data:image/system/pc/component Assessment.png" alt="" class="greenFishPic" ms-visible="el.level == 'pass'">
<span class="tryIt" ms-visible="el.trystatus=='1'">试用</span>
</div>
<div class="productimg productsize">
</div>
<p class="productIntro">{{el.chs_name}}</p>
</a>
</div>
<!-- 最后一个加载更多 -->
<div style="display:inline-block;width:25%;float: left;height:217px">
<a class="img forHover" style="width: 100%;" href="javascript:;" href="https://product.fishqc.com/product-list">
<div class="picContent">
<div style="height:132px;">
<img src="data:image/system/pc/moreInfo.png" alt="" class="productImg" style="height: 70%;vertical-align: middle;padding-top: 20px;">
</div>
</div>
<div class="productimg productsize">
</div>
<p class="productIntro">查看更多优品</p>
</a>
</div>
</div>
</div>
</div>
<div class="swiper-paginationhealthcare"></div>
</div>
</div>
</div>
<div ms-if="@currentSelect.key == 'food'">
<div ms-visible="havadata" class="newhomepagecontain">
<div class="swiper-containerfood">
<div class="swiper-wrapper" style="height: 440px;">
<div class="swiper-slide swiperWidth">
<div style="width:100%">
<div style="display:inline-block;width:24.9%;float:left;height:217px" ms-for="($index, el) in @slide1Food">
<a class="img forHover" style="width: 100%;" href="javascript:;" ms-attr="{href:el.url}">
<div class="picContent">
<div style="height:132px;">
<img ms-attr="{src:el.img}" alt="" class="productImg">
</div>
<img src="data:image/system/pc/greenFishPc.png" alt="" class="greenFishPic" ms-visible="el.level == 'fish'">
<img src="data:image/system/pc/component Assessment.png" alt="" class="greenFishPic" ms-visible="el.level == 'pass'">
<span class="tryIt" ms-visible="el.trystatus=='1'">试用</span>
</div>
<div class="productimg productsize">
</div>
<p class="productIntro">{{el.chs_name}}</p>
</a>
</div>
</div>
</div>
<div class="swiper-slide swiperWidth">
<div style="width:100%">
<div style="display:inline-block;width:25%;float: left;height:217px" ms-for="($index, el) in @slide2Food">
<a class="img forHover" style="width: 100%;" href="javascript:;" ms-attr="{href:el.url}">
<div class="picContent">
<div style="height:132px;">
<img ms-attr="{src:el.img}" alt="" class="productImg">
</div>
<img src="data:image/system/pc/greenFishPc.png" alt="" class="greenFishPic" ms-visible="el.level == 'fish'">
<img src="data:image/system/pc/component Assessment.png" alt="" class="greenFishPic" ms-visible="el.level == 'pass'">
<span class="tryIt" ms-visible="el.trystatus=='1'">试用</span>
</div>
<div class="productimg productsize">
</div>
<p class="productIntro">{{el.chs_name}}</p>
</a>
</div>
</div>
</div>
<div class="swiper-slide swiperWidth">
<div style="width:100%">
<div style="display:inline-block;width:25%;float: left;height:217px" ms-for="($index, el) in @slide3Food">
<a class="img forHover" style="width: 100%;" href="javascript:;" ms-attr="{href:el.url}">
<div class="picContent">
<div style="height:132px;">
<img ms-attr="{src:el.img}" alt="" class="productImg">
</div>
<img src="data:image/system/pc/greenFishPc.png" alt="" class="greenFishPic" ms-visible="el.level == 'fish'">
<img src="data:image/system/pc/component Assessment.png" alt="" class="greenFishPic" ms-visible="el.level == 'pass'">
<span class="tryIt" ms-visible="el.trystatus=='1'">试用</span>
</div>
<div class="productimg productsize">
</div>
<p class="productIntro">{{el.chs_name}}</p>
</a>
</div>
<!-- 最后一个加载更多 -->
<div style="display:inline-block;width:25%;float: left;height:217px">
<a class="img forHover" style="width: 100%;" href="https://product.fishqc.com/product-list?product=shipin" href="javascript:;">
<div class="picContent">
<div style="height:132px;">
<img src="data:image/system/pc/moreInfo.png" alt="" class="productImg" style="height: 70%;vertical-align: middle;padding-top: 20px;">
</div>
</div>
<div class="productimg productsize">
</div>
<p class="productIntro">查看更多优品</p>
</a>
</div>
</div>
</div>
</div>
<div class="swiper-paginationfood"></div>
</div>
</div>
</div>
</div>
currentSelect: {},
setting: {
fish: {
key: "fish"
},
cosmetic: {
key: "cosmetic"
},
motherbaby: {
key: "motherbaby"
},
healthcare: {
key: "healthcare"
},
food:{
key: "food"
}
},
owlObj: {},
fishlistdata: [],
cosmeticlistdata: [],
motherbabylistdata: [],
foodlistdata: [],
healthcarelistdata: [],
slide1:[],
slide2:[],
slide3:[],
slide1Cosmetic:[],
slide2Cosmetic: [],
slide3Cosmetic: [],
slide1Motherbaby:[],
slide2Motherbaby: [],
slide3Motherbaby: [],
slide1Food:[],
slide2Food: [],
slide3Food: [],
getFutureDate:[],
slide1Healthcare: [],
slide2Healthcare:[],
slide3Healthcare: [],
havadata:false,
sortclick: function (tap) {
zhou.currentSelect = tap;
console.log(tap,'调用1')
zhou.gethomepageProductList(tap.key)
},
Jumpreport: function(type,table,miyao) {
if(type == "pro"){
url = "https://product.fishqc.com/product/"+table+"/"+miyao;
window.open(url);
}else{
url = "https://www.fishqc.com/report-"+table;
window.open(url);
}
return false;
},
// 优品的数据
gethomepageProductList: function (type) {
zhou.havadata = false;
zhou.youloading = true;
$.ajaxSetup({
crossDomain: true,
xhrFields: {
withCredentials: true
}
});
$.get("//product.fishqc.com/homepageProductList", { 'lang': 'chs', 'type': type ,'limit': }, function (data) {
var res = data;
if (res.code == "") {
zhou.youloading = false;
zhou.networkfail = false;
zhou.havadata = true;
console.log(res.data, 'data')
if (type == 'fish') {
res.data.push({ chs_name: '查看更多优品', img: '/image/system/new-arr.png', orgreen: true, url: '//product.fishqc.com/product-list' })
zhou.fishlistdata = res.data
console.log(zhou.fishlistdata,'data')
zhou.slide1=zhou.fishlistdata.slice(,)
zhou.slide2=zhou.fishlistdata.slice(,)
zhou.slide3=zhou.fishlistdata.slice(,)
zhou.getnew(type)
} else if (type == 'cosmetic') {
res.data.push({ chs_name: '查看更多优品', img: '/image/system/new-arr.png', orgreen: true, url: '//product.fishqc.com/product-list?product=meizhuang' })
zhou.cosmeticlistdata = res.data
zhou.slide1Cosmetic = zhou.cosmeticlistdata.slice(, )
zhou.slide2Cosmetic = zhou.cosmeticlistdata.slice(, )
zhou.slide3Cosmetic = zhou.cosmeticlistdata.slice(, )
zhou.getnew(type)
} else if (type == 'motherbaby') {
res.data.push({ chs_name: '查看更多优品', img: '/image/system/new-arr.png', orgreen: true, url: '//product.fishqc.com/product-list?product=muying' })
zhou.motherbabylistdata = res.data
zhou.slide1Motherbaby = zhou.cosmeticlistdata.slice(, )
zhou.slide2Motherbaby = zhou.cosmeticlistdata.slice(, )
zhou.slide3Motherbaby = zhou.cosmeticlistdata.slice(, )
zhou.getnew(type)
} else if (type == 'food') {
res.data.push({ chs_name: '查看更多优品', img: '/image/system/new-arr.png', orgreen: true, url: '//product.fishqc.com/product-list?product=shipin' })
zhou.foodlistdata = res.data
zhou.slide1Food = zhou.cosmeticlistdata.slice(, )
zhou.slide2Food = zhou.cosmeticlistdata.slice(, )
zhou.slide3Food = zhou.cosmeticlistdata.slice(, )
zhou.getnew(type)
} else if (type == 'healthcare') {
res.data.push({ chs_name: '查看更多优品', img: '/image/system/new-arr.png', orgreen: true, url: '//product.fishqc.com/product-list' })
zhou.healthcarelistdata = res.data
zhou.slide1Healthcare = zhou.cosmeticlistdata.slice(, )
zhou.slide2Healthcare = zhou.cosmeticlistdata.slice(, )
zhou.slide3Healthcare = zhou.cosmeticlistdata.slice(, )
zhou.getnew(type)
}
} else {
zhou.youloading = false;
}
}).fail(function () {
zhou.networkfail = true
zhou.youloading = false;
});
},
getnew: function (type) {
console.log('调用了轮播图', type)
zhou.owlObj[type] = new Swiper('.swiper-container' + type, {
pagination: {
el: '.swiper-pagination' + type,
draggable: true,
clickable: true,
},
uniqueNavElements: false,
slidesPerView: ,
slidesPerGroup: ,
});
},