Skip to content

Instantly share code, notes, and snippets.

@sunniejs

sunniejs/gist:be304356bf17668ff4220e7dbcec8cb7

Created March 28, 2019 09:07
Show Gist options
  • Save sunniejs/be304356bf17668ff4220e7dbcec8cb7 to your computer and use it in GitHub Desktop.
Save sunniejs/be304356bf17668ff4220e7dbcec8cb7 to your computer and use it in GitHub Desktop.
Download ZIP
better-scroll
Raw
gistfile1.txt
<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