Created
March 28, 2019 09:07
better-scroll
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<template> | |
<!--<div class="ignore">--> | |
<div class="app-container"> | |
<div ref="top" class="top"> | |
</div> | |
<div ref="tab-containter" :class="['tab-warp',isFixed?'isFixed':'']"> | |
<div class="tab" ref="tab" id="tab"> | |
<ul class="tab_content" ref="tabWrapper"> | |
<li class="tab_item" v-for="(item,index) in itemList" ref="tabitem" :key="index" @click="checkStatus(index)" :class="{'check':index == checkIndex}"> | |
<div class="inner"> {{item.title}}</div> | |
</li> | |
</ul> | |
</div> | |
<i :class="'more-bot'" @click="()=>flag=!flag"></i> | |
<div class="dropList" v-if="flag" key="1"> | |
<div class="list-title"> | |
<span class="status">切换楼层</span> | |
<i :class="'more-top'" @click="()=>flag=!flag"></i> | |
</div> | |
<div class="statusIndex"> | |
<span v-for="(item,index) in itemList" :key="index" @click="checkStatus(index,true)" :class="{'check':index == checkIndex}">{{item.title}}</span> | |
</div> | |
</div> | |
<div class='popContainer' v-if="flag" key="2" @click="()=>flag=false"></div> | |
</div> | |
<div ref="content" class="content"> | |
<div class="inner" :style="isFixed?'padding-top:50px':''"> | |
<div class="content_item0" ref="contentItem0"></div> | |
<div class="content_item1" ref="contentItem1"> | |
<div class="brand-swiper"> | |
<mt-swipe @change="handleChange" :auto="5000" class="scroll-images"> | |
<mt-swipe-item v-for="(item,index) in swipeImgList" :key="index"> | |
<img @click="brandDetail('s-newer-weapp.png')" :src="item"> | |
</mt-swipe-item> | |
</mt-swipe> | |
</div> | |
</div> | |
<div class="content_item2" ref="contentItem2"></div> | |
<div class="content_item3" ref="contentItem3"></div> | |
<div class="content_item4" ref="contentItem4"></div> | |
<div class="content_item5" ref="contentItem5"></div> | |
<div class="content_item6" ref="contentItem6"></div> | |
<div class="content_item7" ref="contentItem7"> | |
<div class="comment-swiper"> | |
<swiper :options="swiperOption" ref="mySwiper"> | |
<!-- slides --> | |
<swiper-slide v-for="(item,index) in swipeCommentList" :key="index"> | |
<img class="comment-images" :src="item" alt=""> | |
</swiper-slide> | |
</swiper> | |
</div> | |
</div> | |
<div class="content_item8" ref="contentItem8"> | |
<div class="video-warp"> | |
<!-- <video class="videos" src="{{src}}" title="{{title}}" controls autoplay="true" enable-play-gesture="true"></video> --> | |
<!-- <video class="video-player-box" src="https://tweapp.top1buyer.com/preview/quality-video.mp4" controls enable-play-gesture="true"></video> --> | |
<video class="video-player-box" id="myvideo" controls="controls" src="https://tweapp.top1buyer.com/preview/quality-video1.mp4" | |
resize="true" preload="none" :poster="poster"></video> | |
<!-- <video-player class="video-player-box" ref="videoPlayer" :options="playerOptions" :playsinline="true" customEventName="customstatechangedeventname"> | |
</video-player> --> | |
</div> | |
</div> | |
<div class="content_item9" ref="contentItem9"></div> | |
<div class="content_item10" ref="contentItem10"></div> | |
</div> | |
</div> | |
</div> | |
<!--</div>--> | |
</template> | |
<script> | |
import BScroll from 'better-scroll' | |
import 'swiper/dist/css/swiper.css' | |
import { | |
swiper, | |
swiperSlide | |
} from 'vue-awesome-swiper' | |
export default { | |
data() { | |
return { | |
poster: require('../../assets/common/images/quality/quality-video.jpg'), | |
swiperOption: { | |
effect: 'coverflow', | |
grabCursor: true, | |
centeredSlides: true, | |
slidesPerView: 'auto', | |
loop: true, | |
coverflowEffect: { | |
rotate: 0, | |
stretch: 0, | |
depth: 200, | |
modifier: 1, | |
slideShadows: true | |
} | |
}, | |
swipeIndex: { | |
nowIndex: 1 | |
}, | |
flag: false, | |
checkIndex: 0, | |
isFixed: false, | |
swipeImgList: [ | |
require('../../assets/common/images/quality/logo1.jpg'), | |
require('../../assets/common/images/quality/logo2.jpg'), | |
require('../../assets/common/images/quality/logo3.jpg'), | |
require('../../assets/common/images/quality/logo4.jpg'), | |
require('../../assets/common/images/quality/logo5.jpg'), | |
require('../../assets/common/images/quality/logo6.jpg') | |
], | |
swipeCommentList: [ | |
require('../../assets/common/images/quality/comment_01.jpg'), | |
require('../../assets/common/images/quality/comment_02.jpg'), | |
require('../../assets/common/images/quality/comment_03.jpg'), | |
require('../../assets/common/images/quality/comment_04.jpg'), | |
require('../../assets/common/images/quality/comment_05.jpg') | |
], | |
itemList: [{ | |
'title': '战略升级' | |
}, | |
{ | |
'title': '官方授权' | |
}, | |
{ | |
'title': '100%正品' | |
}, | |
{ | |
'title': '全链路监管' | |
}, | |
{ | |
'title': '阳光保险' | |
}, | |
{ | |
'title': '售后无忧' | |
}, | |
{ | |
'title': '专业仓储' | |
}, | |
{ | |
'title': '用户好评' | |
}, | |
{ | |
'title': '媒体监督' | |
}, | |
{ | |
'title': '资质公示' | |
} | |
], | |
contentH: [], | |
tabToTop: 0, // 头部高度 | |
tabHeight: 0, // tab高度 | |
tabRealHeight: 0 // tab真正高度 | |
} | |
}, | |
components: { | |
swiper, | |
swiperSlide | |
// videoPlayer | |
}, | |
mounted() { | |
this.$nextTick(() => { | |
window.addEventListener('scroll', this.handleScroll) // 监听滚动事件 | |
this.InitTabScroll() // 初始化滚动 | |
}) | |
}, | |
methods: { | |
handleChange(index) { | |
this.swipeIndex.nowIndex = index + 1 | |
}, | |
// 滚动事件 | |
handleScroll() { | |
const scrollTop = window.pageYOffset || document.documentElement.scrollTop || | |
document.body.scrollTop | |
// 吸顶效果 | |
const isFixed = scrollTop >= this.tabToTop | |
if (isFixed !== this.isFixed) { | |
this.isFixed = isFixed | |
} | |
// 当页面滚动时候标签也要滚动 | |
for (var i = 0; i < this.contentH.length; i++) { | |
// 高度小于第一个大于第二个设置 | |
if (scrollTop + 151 > this.contentH[i] && scrollTop + 151 < this.contentH[i + 1]) { | |
if (this.checkIndex !== i) { | |
this.checkIndex = i | |
this.scroll.scrollToElement(this.$refs.tabitem[i], 300, -100) | |
} | |
} | |
} | |
}, | |
brandDetail(name) { | |
// console.log(name) | |
// this.$router.push(`/images?img=${name}`) | |
}, | |
InitTabScroll() { | |
// 头部高度 | |
this.tabToTop = this.$refs['tab-containter'].offsetTop | |
// tab 带面板高度 | |
this.tabRealHeight = this.$refs['tab-containter'].offsetHeight | |
// tab 高度 | |
this.tabHeight = this.$refs['tabitem'][0].offsetHeight | |
// 内容高度 | |
for (let i = 0; i < 11; i++) { | |
this.contentH.push(this.$refs['contentItem' + i].offsetTop) | |
} | |
// 横向滚动宽度 | |
let width = 0 | |
for (let i = 0; i < this.itemList.length; i++) { | |
width += this.$refs.tabitem[i].getBoundingClientRect().width // getBoundingClientRect() 返回元素的大小及其相对于视口的位置 | |
} | |
this.$refs.tabWrapper.style.width = width + 'px' | |
this.$nextTick(() => { | |
if (!this.scroll) { | |
this.scroll = new BScroll(this.$refs.tab, { | |
startX: 0, | |
click: true, | |
scrollX: true, | |
scrollY: false, | |
eventPassthrough: 'vertical' | |
}) | |
} else { | |
this.scroll.refresh() | |
} | |
}) | |
}, | |
checkStatus(index, pop) { | |
this.checkIndex = index | |
// 点击展开面板的选项 | |
if (pop) { | |
this.flag = !this.flag | |
} | |
// tab回滚 | |
this.scroll.scrollToElement(this.$refs.tabitem[index], 300, -100) | |
// 距离dom顶部高度 | |
const offsetTop = this.$refs['contentItem' + index].offsetTop | |
window.scrollTo(0, offsetTop - this.tabHeight) | |
} | |
} | |
} | |
</script> | |
<style lang="scss"> | |
@import '~assets/common/css/mixin.scss'; // .ignore { | |
.top { | |
height: 912px; | |
background: url('../../assets/common/images/quality/uality1.jpg') no-repeat center center; | |
background-size: 100% 100%; | |
} | |
.tab-warp { | |
background-color: #fff; | |
border-bottom: 1px solid #ECECEC; | |
overflow: hidden; | |
position: relative; | |
width: 750px; // 一定要给宽度 | |
&.isFixed { | |
position: fixed; | |
background-color: #fff; | |
top: 0; | |
z-index: 999; | |
.more-bot { | |
position: fixed; | |
} | |
.more-top { | |
position: fixed; | |
} | |
} | |
.tab { | |
width: 100%; | |
overflow: hidden; | |
} | |
.tab_item.check .inner { | |
height: 100%; | |
border-bottom: 4px solid $red; | |
color: $red; | |
} | |
.tab_item { | |
position: relative; | |
display: block; | |
float: left; | |
padding-left: 50px; | |
height: 100px; | |
line-height: 100px; | |
text-align: center; | |
box-sizing: border-box; | |
font-size: 28px; | |
&:last-child { | |
padding-right: 100px; | |
} | |
} | |
.more-bot { | |
right: 0; | |
top: 0; | |
height: 99px; | |
width: 70px; | |
position: absolute; | |
z-index: 1; | |
background: #fff; | |
} | |
.more-bot::after { | |
border: solid 2px #c8c8cd; | |
border-bottom-width: 0; | |
border-left-width: 0; | |
content: " "; | |
top: 50%; | |
right: 25px; | |
position: absolute; | |
width: 25px; | |
height: 25px; | |
-webkit-transform: translateY(-50%) rotate(45deg); | |
transform: translateY(-50%) rotate(135deg); | |
} | |
.dropList { | |
width: 100%; | |
background-color: #fff; | |
margin-top: -100px; | |
.list-title { | |
background-color: #fff; | |
-webkit-box-sizing: border-box; | |
box-sizing: border-box; | |
color: inherit; | |
height: 101px; | |
line-height: 101px; | |
display: block; | |
overflow: hidden; | |
position: relative; | |
text-decoration: none; | |
padding-left: 55px; | |
border-bottom: 1px solid #ECECEC; | |
.status { | |
font-size: 28px; | |
color: #333333; | |
} | |
.more-top { | |
right: 0; | |
top: 0; | |
height: 99px; | |
width: 70px; | |
position: absolute; | |
z-index: 2; | |
background: #fff; | |
} | |
.more-top::after { | |
border: solid 2px #c8c8cd; | |
border-bottom-width: 0; | |
border-left-width: 0; | |
content: " "; | |
top: 60%; | |
right: 20px; | |
position: absolute; | |
width: 25px; | |
height: 25px; | |
-webkit-transform: translateY(-50%) rotate(45deg); | |
transform: translateY(-50%) rotate(-45deg); | |
} | |
} | |
.statusIndex { | |
overflow: hidden; | |
display: flex; | |
flex-direction: row; | |
flex-wrap: wrap; | |
padding: 20px; | |
width: 750px; | |
span { | |
flex: 0 0 25%; | |
font-size: 28px; | |
line-height: 90px; | |
line-height: 90px; | |
text-align: center; | |
} | |
.check { | |
color: $red; | |
} | |
} | |
} | |
.popContainer { | |
position: fixed; | |
z-index: -1; | |
top: 0; | |
left: 0; | |
right: 0; | |
bottom: 0; | |
background: rgba(0, 0, 0, 0.3); | |
} | |
} | |
.content { | |
.inner { | |
background: #ffffff; | |
.content_item0 { | |
height: 329px; | |
background: url('../../assets/common/images/quality/uality3.jpg') no-repeat center center; | |
background-size: 100% 100%; | |
} | |
.content_item1 { | |
position: relative; | |
height: 1095px; | |
background: url('../../assets/common/images/quality/uality4.jpg') no-repeat center center; | |
background-size: 100% 100%; | |
.brand-swiper { | |
position: absolute; | |
bottom: 40px; | |
width: 100%; | |
height: 681px; | |
img { | |
width: 100%; | |
height: 681px; | |
} | |
.mint-swipe-indicators { | |
bottom: 0; | |
.mint-swipe-indicator { | |
opacity: 1; | |
background: #ddd; | |
width: 18px; | |
height: 18px; | |
border-radius: 18px; | |
&.is-active { | |
background: #555555 !important; | |
} | |
} | |
} | |
} | |
} | |
.content_item2 { | |
height: 365px; | |
background: url('../../assets/common/images/quality/uality6.jpg') no-repeat center center; | |
background-size: 100% 100%; | |
} | |
.content_item3 { | |
height: 558px; | |
background: url('../../assets/common/images/quality/uality7.jpg') no-repeat center center; | |
background-size: 100% 100%; | |
} | |
.content_item4 { | |
height: 842px; | |
background: url('../../assets/common/images/quality/uality8.jpg') no-repeat center center; | |
background-size: 100% 100%; | |
} | |
.content_item5 { | |
height: 827px; | |
background: url('../../assets/common/images/quality/uality9.jpg') no-repeat center center; | |
background-size: 100% 100%; | |
} | |
.content_item6 { | |
height: 810px; | |
background: url('../../assets/common/images/quality/uality10.jpg') no-repeat center center; | |
background-size: 100% 100%; | |
} | |
.content_item7 { | |
position: relative; | |
height: 764px; | |
background: url('../../assets/common/images/quality/uality11.jpg') no-repeat center center; | |
background-size: 100% 100%; | |
.comment-swiper { | |
position: absolute; | |
bottom: 50px; | |
width: 100%; | |
height: 400px; | |
display: flex; | |
flex-direction: row; | |
overflow-x: scroll; | |
.swiper-slide { | |
background-position: center; | |
background-size: cover; | |
width: 500px; | |
height: 400px; | |
box-sizing: content-box; | |
.comment-images { | |
padding: 0 50px; | |
width: 400px; | |
height: 400px; // box-shadow: 0 2px 10px rgba(0, 0, 0, .15); | |
text-align: center; | |
} | |
} | |
} | |
} | |
.content_item8 { | |
height: 862px; | |
position: relative; | |
background: url('../../assets/common/images/quality/uality12.jpg') no-repeat center center; | |
background-size: 100% 100%; | |
.video-warp { | |
position: absolute; | |
bottom: 20px; | |
width: 750px; | |
height: 550px; | |
.video-player-box { | |
width: 750px; | |
height: 550px; | |
.video-js { | |
width: 750px; | |
height: 550px; | |
} | |
} | |
} | |
} | |
.content_item9 { | |
height: 764px; | |
background: url('../../assets/common/images/quality/uality121.jpg') no-repeat center center; | |
background-size: 100% 100%; | |
} | |
.content_item10 { | |
height: 137px; | |
background: url('../../assets/common/images/quality/uality13.jpg') no-repeat center center; | |
background-size: 100% 100%; | |
} | |
} | |
} // } | |
</style> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment