标签：size dsl lock min com vertica 页面 隐藏 red
项目需求介绍：
1.页面图文混排，
2.点击图片后全屏展示图片，并在底部显示文字，如果没有则不显示
3.关闭全屏后依然停留在上次浏览的位置
4.浏览图片时，不管点击的哪张图片，全屏展示的时候也要显示这一张
以下是所有需要引用的文件，其中只有 reset.css，swiperM.css，swiperVue.js 是自己写的
<link rel="stylesheet" href="reset.css">
<link rel="stylesheet" href="swiper.min.css">
<link rel="stylesheet" href="swiperM.css">
<script src="vue.js"></script>
<script src="swiper.min.js"></script>
<script src="swiperVue.js"></script>
<script src="axios.min.js"></script>
reset.css文件
html,body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0}caption,th,td{text-align:center}fieldset,img,abbr,acronym{border:0}abbr,acronym{font-variant:normal}h1,h2,h3,h4,h5,h6,p{font-size:100%;font-weight:normal;line-height:1}input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit}address,caption,cite,code,dfn,em,th,var,i,strong,font{font-style:normal;font-weight:normal}code,kbd,pre,samp{font-family:courier new,courier,monospace}li{list-style:none}textarea{resize:none}sup{vertical-align:text-top}sub{vertical-align:text-bottom}table{border-collapse:collapse;border-spacing:0}ul,li,menu,dir{display:block;list-style-type:disc;-webkit-margin-before:0;-webkit-margin-after:0;-webkit-margin-start:0;-webkit-margin-end:0;-webkit-padding-start:0}q:before,q:after{content:‘‘}input:focus,a:focus{outline:0}a,button,input,legend{-webkit-tap-highlight-color:rgba(255,0,0,0);-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;appearance:none;-webkit-appearance:none;outline:0}*,*:before,*:after{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;word-break:break-all;word-wrap:break-word;}a{color:inherit;text-decoration:none;cursor:pointer}ul,li{width:100%;height:auto;overflow:hidden}li{clear:both}a:visited{color:inherit}a:hover{color:inherit}a:active{color:inherit}.fl{float:left}.fr{float:right}.cl{clear:both}
swiperM.css文件
.swiper-container,#swi_con{
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: black;
z-index: 10000000000000000000000000000000000000;
}
.swiper-lazy-preloader {
width: 42px;
height: 42px;
position: absolute;
left:50%;
top: 50%;
}
.swiper-slide img{
width: 100%;
position: absolute;
text-align: center;
left:50%;
top: 50%;
transform: translate(-50%,-50%);
border: 0;
}
.swiper-slide span{
display: block;
width: 100%;
position: absolute;
bottom: 0;
left: 0;
background: rgba(0,0,0,0.5);
color: #ffffff;
font-size: 0.37333333333333335rem;
box-sizing: border-box;
padding: 0.32rem;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 5;
-webkit-box-orient: vertical;
max-height: 2.96rem;
}
.swiper-slide-p{
color: #ffffff;
position: absolute;
width: 100%;
bottom: 0.233333rem;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp:5;
-webkit-box-orient: vertical;
max-height: 2.1866666666666665rem;
font-size: 0.42666666666666664rem;
}
JSON文件
{
"exclude": [
{"img":"images/timg1.jpg","title":"我是图片的文字描述0"},
{"img":"images/timg2.jpg","title":"我是图片的文字描述1"},
{"img":"images/timg3.jpg","title":"我是图片的文字描述2"},
{"img":"images/timg4.jpg","title":"我是图片的文字描述3"},
{"img":"images/timg5.jpg","title":"我是图片的文字描述4"},
{"img":"images/timg1.jpg","title":"我是图片的文字描述5"},
{"img":"images/timg2.jpg","title":"我是图片的文字描述6"},
{"img":"images/timg3.jpg","title":"我是图片的文字描述7"},
{"img":"images/timg4.jpg","title":"我是图片的文字描述8"},
{"img":"images/timg5.jpg","title":"我是图片的文字描述9"}
]
}
HTML代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>swiper轮播组件</title>
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<link rel="stylesheet" href="reset.css">
<link rel="stylesheet" href="swiper.min.css">
<link rel="stylesheet" href="swiperM.css">
<script src="vue.js"></script>
<script src="swiper.min.js"></script>
<script src="swiperVue.js"></script>
<script src="axios.min.js"></script>
<style>
.main .img{
width: 100%;
margin-bottom: 10px;
}
.main .img img{width: 100%;height:10rem;}
</style>
<!--swiper全屏轮播Vue组件封装-->
<!--使用方法：
1、在主页面中使用 <swiper-vue></swiper-vue>
2、需要传递的参数
a)在<swiper-vue></swiper-vue>里面加入要循环的数据，组件中有slot接收
b)index--为点击后的需要传递到swiper中的图片坐标
c)Okshow--要设置swiper的显示与隐藏，开始要设置为false,点击图片后设置为true
d)scroll--为滚动条的位置，关闭swiper后要对滚动条位置进行还原
-->
</head>
<body>
<div class="main">
<div class="img_list" v-show="mainShow">
<div class="img" v-for="(item,index) in list" @click="swiper(index)">
<img :src="item.img">
<p>{{item.title}}</p>
</div>
</div>
<swiper-vue
:index="Index"
:Okshow="Okshow"
:scroll="scroll"
v-on:receive="changeValueHandle(scroll)">
<div class="swiper-slide" v-for="item in list">
<img :data-src=‘item.img‘ class="swiper-lazy">
<p class="swiper-slide-p">{{item.title}}</p>
<div class="swiper-lazy-preloader"></div>
</div>
</swiper-vue>
</div>
<script>
var vm=new Vue({
el:".main",
data:{
list:[],
Index:0,
mainShow:true,
Okshow:false,
scroll:0
},
mounted(){
axios.get(‘js1.json‘)
.then(function(data){
vm.list=data.data.exclude;
})
.catch(function(error){
console.log(error);
});
},
methods:{
swiper(index){
this.Index=index;
this.mainShow=false;
this.Okshow=true;
this.scroll=document.body.scrollTop;
},
changeValueHandle: function (scroll) {
this.mainShow=true;
this.Okshow=false;
setTimeout(function(){
document.body.scrollTop=scroll;
},1);
}
}
})
</script>
</body>
</html>
swiperVue.js文件
Vue.component("swiper-vue",{
props:[‘index‘,‘Okshow‘,‘scroll‘],
updated: function () {
//swiper初始化
if(this.Okshow){
swiper = new Swiper(‘.swiper-container‘, {
pagination: ‘.swiper-pagination‘,
paginationClickable: true,
spaceBetween:0,
centeredSlides: true,
initialSlide:this.index,
autoplayDisableOnInteraction: false,
lazyLoading:true,
lazyLoadingInPrevNext : true,
lazyLoadingInPrevNextAmount :2,
lazyLoadingOnTransitionStart : true
});
}
},
template:`<div class="swiper-container" id="swi_con" v-show="Okshow" @click="swiperClose(scroll)">
<div class="swiper-wrapper">
<slot></slot>
</div>
</div>`,
methods:{
swiperClose:function(scroll){
this.$emit("receive",scroll);
}
}
});
标签：size dsl lock min com vertica 页面 隐藏 red
原文地址：http://www.cnblogs.com/qiuchuanji/p/7661832.html
