一、Vue基础实现bilibili移动端页面

简述：对于已经学到vue的同学，bilibili的页面布置难度不大，仔细阅读仔细体悟；难点在于怎么做到使用vue‘不操作’dom，从而实现较为复杂的逻辑方法。由于是按头部-导航-轮播-视频-底部的顺序，所以并没有多少注释，但是也并不难阅读。
axios.js可搜索自行下载

//html
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><link rel="stylesheet" href="./assets/reset.css"><link rel="stylesheet" href="./assets/index.css"><script src="./axios.js"></script><script src="./request.js"></script><script src="./vue.js"></script>
</head><body><!-- 图片、iconfont、svg --><div id="app" @scroll="handleScroll"><div class="header"><div class="logo"><svg width="62" height="28" viewBox="0 0 62 28" fill="#de698c"><path id="Shape" class="cls-1" d="M57.45 25a7 7 0 0 1-.74 0c-.47-.05-.94 0-1.4-.06-.3 0-.29 0-.32-.3-.07-.88-.16-1.75-.24-2.63l-.21-2.31c-.07-.77-.15-1.41-.23-2.11s-.14-1.33-.21-2q-.14-1.25-.29-2.5l-.27-2.22Q53.29 9.21 53 7.5c-.18-1.21-.39-2.42-.61-3.62 0-.22 0-.22.18-.26a14.07 14.07 0 0 1 2.63-.25h.27a.24.24 0 0 1 .18.08.25.25 0 0 1 .06.19c0 .62.07 1.24.12 1.87.07 1 .16 2 .23 3 0 .65.09 1.31.14 2l.24 3.15c0 .64.09 1.29.14 1.94l.24 2.82c0 .6.09 1.2.15 1.8l.24 2.66c.13.73.18 1.42.24 2.12z"></path><path data-name="Shape" class="cls-1" d="M23.74 3.39h.51c.19 0 .29.08.3.32.07 1.1.13 2.19.21 3.28s.17 2.36.26 3.54.17 2.17.25 3.25.2 2.38.3 3.57l.21 2.73c.07.91.16 1.69.23 2.53l.2 2.18c0 .23 0 .24-.25.24-.66 0-1.32-.09-2-.07-.15 0-.19-.06-.22-.21-.05-.31 0-.62-.08-.93-.09-.8-.14-1.64-.22-2.47s-.15-1.49-.23-2.24-.14-1.37-.21-2.05-.15-1.34-.23-2-.14-1.24-.22-1.85c-.11-.91-.22-1.81-.34-2.72S22 8.8 21.88 8q-.24-1.69-.55-3.37c0-.25-.09-.51-.15-.76s0-.2.15-.22c.39 0 .78-.13 1.17-.17a6.83 6.83 0 0 1 1.24-.06z"></path><path id="Shape-3" data-name="Shape" class="cls-1" d="M51.39 14.31c.74 0 .76 0 .88.67s.25 1.63.35 2.45.21 1.75.3 2.62c.08.7.14 1.41.21 2.12s.16 1.47.23 2.22c0 .42.09.83.13 1.25 0 .12 0 .19-.14.2l-.76.09-1.4.14c-.24 0-.26 0-.3-.22l-1.22-6.23c-.27-1.39-.53-2.77-.8-4.14 0-.19-.07-.38-.1-.57a.16.16 0 0 1 0-.14.16.16 0 0 1 .12-.07 14.3 14.3 0 0 1 2.5-.39z"></path><path id="Shape-4" data-name="Shape" class="cls-1" d="M20.13 14.31c.8 0 .79 0 .92.71.19 1.11.32 2.22.44 3.33s.25 2.15.36 3.23c.08.74.14 1.47.21 2.22.05.52.12 1 .17 1.57a.94.94 0 0 0 0 .19c0 .26 0 .28-.25.3l-1.47.14-.55.06c-.24 0-.24 0-.29-.22-.17-.83-.33-1.66-.49-2.5l-1.18-6c-.16-.8-.29-1.61-.44-2.41 0-.15 0-.21.15-.25a14.56 14.56 0 0 1 2.43-.39z"></path><path id="Shape-5" data-name="Shape" class="cls-1" d="M30.64 22.7v3.36a.82.82 0 0 0 0 .1c0 .16 0 .24-.21.23h-2.07c-.26 0-.25 0-.27-.26l-.24-2.54c-.08-.85-.14-1.56-.21-2.34s-.16-1.6-.23-2.41c-.05-.54-.1-1.07-.14-1.61l-.18-2.09c0-.29 0-.34.29-.37a14.82 14.82 0 0 1 2.3-.07 3.18 3.18 0 0 1 .57.09c.23.06.26.09.27.33 0 .48.05 1 .06 1.45s0 1.08 0 1.61c.05 1.55.04 3.04.06 4.52z"></path><path id="Shape-6" data-name="Shape" class="cls-1" d="M61.84 22.85v3.35c0 .14-.05.19-.19.19h-1a10 10 0 0 0-1.12 0c-.25 0-.25 0-.27-.23-.1-1.11-.21-2.2-.31-3.3l-.27-3c-.09-1-.2-2.1-.3-3.14 0-.52-.09-1.05-.13-1.57 0-.23 0-.28.27-.28.46 0 .91-.1 1.37-.09a8.11 8.11 0 0 1 1.37.07c.38.07.41.09.43.5.07 1.19 0 2.39.09 3.58s.02 2.51.06 3.92z"></path><path id="Shape-7" data-name="Shape" class="cls-1" d="M50.62 8.54a4.62 4.62 0 0 1 .68.06.23.23 0 0 1 .21.23c.06.68.13 1.37.2 2.05s.12 1.11.17 1.66c0 .35 0 .36-.31.38l-.92.06c-.2 0-.27 0-.3-.24-.12-1-.25-2-.38-3.07 0-.28-.07-.57-.12-.86a.21.21 0 0 1 .19-.28z"></path><path id="Shape-8" data-name="Shape" class="cls-1" d="M19.46 8.54a3.7 3.7 0 0 1 .63 0 .21.21 0 0 1 .19.21c0 .32.08.64.11 1q.15 1.47.27 3c0 .21 0 .22-.19.23l-1.08.02c-.21 0-.24 0-.27-.23l-.27-2.17c-.09-.72-.1-1.18-.19-1.79 0-.16 0-.21.16-.24a4 4 0 0 1 .64 0z"></path><path id="Shape-9" data-name="Shape" class="cls-1" d="M30.43 11.25v1.87c0 .28 0 .28-.27.28a9.08 9.08 0 0 1-1-.05c-.22 0-.22 0-.23-.25 0-.76 0-1.52-.06-2.28V9.28c0-.28 0-.28.26-.28a7.06 7.06 0 0 1 1.14.07c.23 0 .24 0 .24.28v1.9z"></path><path id="Shape-10" data-name="Shape" class="cls-1" d="M61.65 11.27v1.87c0 .26 0 .28-.27.26s-.7 0-1 0c-.17 0-.22-.09-.21-.24V13L60 9.44v-.19C60 9 60 9 60.29 9s.68 0 1 .05.34.09.34.41q.02.91.02 1.81z"></path><path id="Shape-11" data-name="Shape" class="cls-1" d="M18.61 12.73c0 .34 0 .34-.32.42l-.68.16c-.23 0-.23 0-.27-.17l-.69-3.83c0-.28 0-.28.23-.33l1-.16c.21 0 .23 0 .27.2.08.45.16.91.22 1.36.09.72.17 1.45.26 2.17a.68.68 0 0 1-.02.18z"></path><path id="Shape-12" data-name="Shape" class="cls-1" d="M47.86 9l1.28-.21c.15 0 .2.07.22.21.07.5.16 1 .22 1.49.09.72.21 1.44.23 2.18v.22a.18.18 0 0 1 0 .14.18.18 0 0 1-.12.06l-.87.2c-.14 0-.19 0-.21-.16-.09-.51-.19-1-.27-1.52l-.44-2.5a.89.89 0 0 1-.04-.11z"></path><path id="Shape-13" data-name="Shape" class="cls-1" d="M28.32 12a9.73 9.73 0 0 1 0 1.22c0 .12-.05.2-.19.21l-.86.07c-.14 0-.18 0-.2-.18-.06-.39-.05-.79-.09-1.19-.07-.75-.1-1.5-.15-2.25v-.55a.13.13 0 0 1 0-.12.13.13 0 0 1 .12 0c.37 0 .74-.08 1.11-.07.22 0 .24 0 .25.24v.45c-.03.67-.01 1.43.01 2.17z"></path><path id="Shape-14" data-name="Shape" class="cls-1" d="M59.53 11.52v1.55c0 .28 0 .29-.29.32l-.76.07c-.14 0-.21 0-.22-.19 0-.69-.09-1.37-.13-2.06S58 10.08 58 9.51v-.19c0-.11 0-.18.16-.19.36 0 .72-.08 1.08-.07s.22 0 .24.24c.05.7.05 1.48.05 2.22z"></path><path id="Shape-15" data-name="Shape" class="cls-1" d="M17.54 20.75a3.69 3.69 0 0 0-.47-.44 8.21 8.21 0 0 0-1.62-1 18.27 18.27 0 0 0-3.59-1.21 18.68 18.68 0 0 0-4.3-.52 10.55 10.55 0 0 0-1.4.11c-.24 0-.25 0-.27-.19-.1-1.07-.22-2.14-.31-3.21s-.19-2.15-.25-3.29c-.08-1.39-.16-2.77-.19-4.16V2.09a2.54 2.54 0 0 1 0-.35V.42c0-.17 0-.21-.21-.17a3.67 3.67 0 0 0-.73.22L.43 2.08c-.13.06-.18.11-.15.26.24 1.12.46 2.23.65 3.36q.36 2.06.67 4.13c.13.83.25 1.68.36 2.52s.23 1.75.34 2.62.19 1.58.27 2.37.2 1.7.3 2.56.14 1.46.21 2.18c.1 1 .21 2 .3 3s.14 1.74.21 2.6c0 .24.05.28.29.28H5.85a28.93 28.93 0 0 0 3.75-.46 17.26 17.26 0 0 0 4.91-1.68A9 9 0 0 0 17 24a3.59 3.59 0 0 0 .91-1.56 1.73 1.73 0 0 0-.37-1.69zm-8.78 4.52c-.21-1.58-.43-3.15-.65-4.78a44 44 0 0 1 4.63 1.71 27.84 27.84 0 0 1-4 3.07z"></path><path id="Shape-16" data-name="Shape" class="cls-1" d="M48.52 20.5a7 7 0 0 0-1.3-.88A16.07 16.07 0 0 0 44 18.36a19.59 19.59 0 0 0-5.07-.75 10 10 0 0 0-1.46.11c-.27 0-.29 0-.32-.24-.06-.5-.11-1-.16-1.51-.09-.92-.18-1.84-.25-2.77-.1-1.28-.19-2.55-.26-3.83 0-1-.1-1.94-.09-2.9v-.61q-.06-1.21 0-2.42c0-1 0-2 .09-3 0-.18 0-.21-.2-.19a2.25 2.25 0 0 0-.55.16c-1.37.5-2.67 1.12-4 1.64a.19.19 0 0 0-.14.28 1.75 1.75 0 0 1 0 .19c.3 1.43.57 2.86.8 4.31.16 1 .33 2 .49 3 .12.78.22 1.57.33 2.36s.19 1.47.27 2.22.2 1.58.29 2.36.15 1.3.22 1.94.16 1.39.23 2.08.14 1.48.21 2.22.16 1.61.23 2.41.13 1.52.19 2.28c0 .17.1.22.25.22h.76a12 12 0 0 0 1.82-.07c1-.09 2-.24 3.06-.42A17.36 17.36 0 0 0 46 25.64a8.24 8.24 0 0 0 2.26-1.75 3.49 3.49 0 0 0 .82-1.57 1.74 1.74 0 0 0-.56-1.82zm-4.66 1.86a5.19 5.19 0 0 1-.5.44c-1 .83-2.13 1.61-3.21 2.39a.18.18 0 0 1-.17.05l-.63-4.7a.4.4 0 0 1 .34 0c1.19.37 2.35.83 3.51 1.28l.64.28c.1.06.12.12 0 .21z"></path></svg></div><div class="search-input"><svg width="12" height="18" viewBox="0 0 1024 1024"><path d="M448 128c176 0 320 144 320 320 0 73.6-25.6 147.2-73.6 204.8l-19.2 22.4-22.4 19.2C595.2 742.4 521.6 768 448 768 272 768 128 624 128 448S272 128 448 128m0-64C236.8 64 64 236.8 64 448s172.8 384 384 384c92.8 0 179.2-35.2 246.4-89.6l211.2 208c6.4 6.4 12.8 9.6 22.4 9.6s16-3.2 22.4-9.6c12.8-16 12.8-35.2 0-48l-208-208c54.4-67.2 89.6-153.6 89.6-246.4 0-211.2-172.8-384-384-384z" fill="#aaa"></path></svg><span>北冥有鱼，化而为鹏梵蒂冈连快递费过来付款定金</span></div><div class="avatar"><svg width="24" height="24" viewBox="0 0 80 80"><path fill="#e7e7e7" d="M0 0h80v80H0z"></path><path d="M45.78 57.73h2.29a73.4 73.4 0 0 1 4.23 9.5 57.14 57.14 0 0 1 2.62 10.5 50.58 50.58 0 0 1-29.86 0 57.14 57.14 0 0 1 2.62-10.5 73.4 73.4 0 0 1 4.23-9.5h2.29l2.67 7.21 2.41-7.21h1.42l2.41 7.21zM31.72 18.51l4.87 4.87a1.8 1.8 0 0 1 0 2.55 1.8 1.8 0 0 1-2.55 0l-4.87-4.87a1.8 1.8 0 0 1 0-2.55 1.8 1.8 0 0 1 2.55 0zM48.57 18.51a1.8 1.8 0 0 1 2.55 0 1.8 1.8 0 0 1 0 2.55l-4.87 4.87a1.8 1.8 0 0 1-2.55 0 1.8 1.8 0 0 1 0-2.55z" fill="#ccc"></path><path d="M24.2 24.22h31.6a7.2 7.2 0 0 1 7.2 7.2v20.12a7.2 7.2 0 0 1-7.2 7.2H24.2a7.2 7.2 0 0 1-7.2-7.2V31.42a7.2 7.2 0 0 1 7.2-7.2zm1 4a4.24 4.24 0 0 0-4.2 4.29v17.94a4.24 4.24 0 0 0 4.21 4.27h29.5A4.24 4.24 0 0 0 59 50.45V32.51a4.24 4.24 0 0 0-4.21-4.27z" fill="#ccc"></path><path d="M25.88 29.84h28.24a3.22 3.22 0 0 1 3.22 3.21v16.86a3.22 3.22 0 0 1-3.22 3.21H25.88a3.22 3.22 0 0 1-3.22-3.21V33.05a3.22 3.22 0 0 1 3.22-3.21zm0 .8a2.42 2.42 0 0 0-2.42 2.41v16.86a2.42 2.42 0 0 0 2.42 2.41h28.24a2.42 2.42 0 0 0 2.42-2.41V33.05a2.42 2.42 0 0 0-2.42-2.41z" fill="#ccc"></path><path d="M26.73 40.1l7-3.1a1.81 1.81 0 1 1 1.48 3.3l-7 3.1a1.81 1.81 0 1 1-1.48-3.3zM53.27 40.1a1.81 1.81 0 1 1-1.48 3.3l-7-3.1a1.81 1.81 0 1 1 1.48-3.3zM37.58 47.9c-1 0-1.9-.7-2.7-2a.8.8 0 0 1 .26-1.11.81.81 0 0 1 1.11.26c.54.86 1 1.23 1.33 1.23s.79-.37 1.33-1.23a.81.81 0 0 1 1.37 0c.54.86 1 1.23 1.33 1.23s.79-.37 1.33-1.23a.81.81 0 0 1 1.11-.26.8.8 0 0 1 .26 1.11c-.8 1.28-1.69 2-2.7 2a2.71 2.71 0 0 1-2-1.06 2.71 2.71 0 0 1-2.03 1.06z" fill="#ccc"></path></svg></div><div class="download-app">下载App</div></div><!-- 导航区域 --><template v-if='navList.length'><div :class="{'nav-box': navIndex === 1,'hide-nav-box': navIndex === 2,hide: navIndex === 2 && navHide}" v-for="navIndex in 2" :key='navIndex'><ul class="nav-list"><li @click="handleNavClick(index)"class="nav" :class="{big: nav.title.length === 3 && navIndex === 2,active: index === navActiveIndex}"v-for="(nav, index) in navList":key="nav.id">{{ nav.title }}</li></ul><div class="down" v-if="navIndex === 1"@click="handleClick"><svg width="16" height="32" viewBox="0 0 1024 1024"><path d="M515.2 649.6L169.6 304c-12.8-12.8-32-12.8-44.8 0s-12.8 35.2 0 48l368 364.8c12.8 12.8 32 12.8 44.8 0l361.6-361.6c12.8-12.8 12.8-35.2 0-48s-32-12.8-44.8 0L515.2 649.6z" fill="#ccc"></path></svg></div><div v-else class="up" @click="handleClick"><svg width="16" height="32" viewBox="0 0 1024 1024"><path d="M854.4 713.6c12.8 12.8 32 12.8 44.8 0s12.8-35.2 0-48L537.6 304c-12.8-12.8-32-12.8-44.8 0L124.8 672c-12.8 12.8-12.8 35.2 0 48s32 12.8 44.8 0l345.6-342.4 339.2 336z" fill="#ccc"></path></svg></div></div></template><!-- 轮播 --><div class="banner-box" v-if='bannerList.length'><ul class="banner-list" :style='bannerStyle' @transitionend='handleTransitionEnd'><li class="banner" v-for='banner in bannerList' :key='banner.id'><img :src="banner.poster" :alt="banner.title"></li></ul><ul class="index-list"><li v-for='index in bannerList.length - 1' :key='index' class="index" :class='{active: index - 1 === bannerActiveIndex % 3}'></li></ul></div><!-- 视频区域 --><div class="video-box" v-if='videoList'><ul class="video-list"><li class="video" v-for='video in videoList' :key='video.id'><div class="poster"><img :src="video.poster" :alt="video.title"><div class="info"><div class="play"><svg viewBox="0 0 1024 1024"><path d="M800 128H224C134.4 128 64 198.4 64 288v448c0 89.6 70.4 160 160 160h576c89.6 0 160-70.4 160-160V288c0-89.6-70.4-160-160-160z m96 608c0 54.4-41.6 96-96 96H224c-54.4 0-96-41.6-96-96V288c0-54.4 41.6-96 96-96h576c54.4 0 96 41.6 96 96v448z"></path><path d="M684.8 483.2l-256-112c-22.4-9.6-44.8 6.4-44.8 28.8v224c0 22.4 22.4 38.4 44.8 28.8l256-112c25.6-9.6 25.6-48 0-57.6z"></path></svg>{{ video.play }}</div><div class="rank" v-if='video.rank'><svg viewBox="0 0 1024 1024"><path d="M800 128H224C134.4 128 64 198.4 64 288v448c0 89.6 70.4 160 160 160h576c89.6 0 160-70.4 160-160V288c0-89.6-70.4-160-160-160z m96 608c0 54.4-41.6 96-96 96H224c-54.4 0-96-41.6-96-96V288c0-54.4 41.6-96 96-96h576c54.4 0 96 41.6 96 96v448z"></path><path d="M240 384h64v64h-64zM368 384h384v64h-384zM432 576h352v64h-352zM304 576h64v64h-64z"></path></svg>{{ video.rank }}</div></div>   </div><div class="title">{{ video.title }}</div></li></ul></div><!-- 底部区域 --><div class="footer"><p>哔哩哔哩 沪ICP备13002172号-3</p><p>信息网络传播视听节目许可证：0910417</p></div></div><script>const vm = new Vue({el: '#app',data: {navList: [],navHide: true,navActiveIndex: 0,bannerList: [],bannerWidth: 350,bannerStyle: {left: 0,transition: 'left .3s',},bannerActiveIndex: 0,videoOldList: [],videoOldList: [],videoGettingData: false,videoCount: 0,},computed: {videoList () {return this.videoOldList.map(video => {video.play = video.play > 10000 ? video.play / 10000 + '万' : video.play;video.rank = video.rank > 10000 ? video.rank / 10000 + '万' : video.rank;return video;})}},methods: {handleClick () {this.navHide = !this.navHide;},handleNavClick (index) {this.navActiveIndex = index;},autoMove () {setTimeout(() => {if(this.bannerActiveIndex === 0 ) {//判断轮播索引确定循环this.bannerStyle.transition = 'left .3s';}this.bannerActiveIndex ++;this.bannerStyle.left = -this.bannerActiveIndex * this.bannerWidth + 'px';}, 1500)},handleTransitionEnd () {if(this.bannerActiveIndex === 3) {this.bannerActiveIndex = 0;this.bannerStyle.left = 0;this.bannerStyle.transition = 'none';}this.autoMove();},handleScroll (e) {const { scrollHeight, offsetHeight, scrollTop } = e.target;const toBottomHeight = scrollHeight - offsetHeight - scrollTop;//是否滑动到接近底部const videoLength = this.videoList.length;if(videoLength === this.videoCount) { return; } if(toBottomHeight < 200 && !this.videoGettingData) {//接近底部则再次请求数据this.videoGettingData = true;axios.get('video', {params: {start: this.videoList.length,offset: 12}}).then(res => {this.videoOldList.push(...res.data);//将多次视频数据拼接this.videoGettingData = false;})}},getData () {axios.all([axios.get('nav'),//对导航的处理axios.get('banner'),//对轮播的处理axios.get('video', {//对视频信息的处理params: {start: 0,offset: 12}})]).then(axios.spread((navRes, bannerRes, videoRes) => {this.initNavList(navRes);this.initBannerList(bannerRes);this.initVideo(videoRes);}));},initNavList (navRes) {this.navList = navRes;},initBannerList (bannerRes) {const bannerLaseEle = {...bannerRes[0]};bannerLaseEle.id = Math.floor(Math.random() * 10000000);this.bannerList = [...bannerRes, bannerLaseEle];},initVideo (videoRes) {this.videoCount = videoRes.count;this.videoOldList = videoRes.data;}},created () {this.getData();},mounted () {this.autoMove();}})</script>
</body></html>

//index.css
html{height: 100%;
}
body{height: 100%;
}
#app{height: 100%;overflow-y: scroll;
}
.header {position: fixed;top: 0;left: 0;right: 0;display: flex;align-items: center;justify-content: space-between;padding-top: 10px;padding-bottom: 15px;z-index: 3;background-color: #fff;
}.header .logo {margin-left: 18px;
}.header .search-input {width: 132px;height: 24px;margin-left: 5px;display: flex;align-items: center;font-size: 10px;color: #999;background-color: #f4f4f4;border-radius: 12px;
}.header .search-input svg {margin-left: 10px;
}.header .search-input span {width: 92px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;
}.header .avatar svg {border-radius: 50%;
}.header .download-app {-webkit-user-drag: 78px;height: 23px;padding-left: 10px;padding-right: 10px;margin-right: 12px;line-height: 23px;text-align: center;color: #fff;background-color: #fb7299;font-size: 12px;border-radius: 4px;
}.nav-box {position: fixed;top: 54px;left: 0;right: 0;z-index: 1;background-color: #fff;
}.nav-box .nav-list {width: 85%;white-space: nowrap;overflow-x: scroll;padding-left: 24px;/* display: none; */
}.nav-box .nav-list::-webkit-scrollbar {display: none;
}.nav-box .nav {display: inline-block;height: 30px;line-height: 30px;margin-right: 40px;color: #757575;font-size: 14px;border-bottom: 2px solid transparent;
}.nav-box .nav.active {border-color: #fb7299;color: #fb7299;
}.nav-box .down {position: absolute;top: -3px;right: 13px;
}.hide-nav-box {position: fixed;top: 54px;left: 0;right: 0;padding-bottom: 20px;z-index: 2;transition: top .3s;background-color: #fff;
}.hide-nav-box.hide {top: -117px;
}.hide-nav-box .nav {display: inline-block;width: 32px;text-align: center;margin-left: 14px;margin-right: 14px;margin-bottom: 10px;padding-top: 6px;padding-bottom: 6px;font-size: 14px;color: #757575;border-bottom: 2px solid transparent;
}.hide-nav-box .nav.big {width: 46px;margin-left: 7px;margin-right: 7px;
}.hide-nav-box .nav.active {border-color: #fb7299;color: #fb7299;
}.hide-nav-box .up {position: absolute;bottom: 0;left: 50%;transform: translateX(-50%);z-index: 1;
}.banner-box {position: relative;top: 90px;left: 50%;transform: translateX(-50%);width: 350px;height: 110px;border-radius: 6px;overflow: hidden;
}.banner-box .banner-list {position: absolute;left: 0;width: calc(350px * 4);transition: left .3s;
}.banner-box .banner {float: left;width: 350px;height: 110px;
}.banner-box .poster {width: 100%;height: 100%;
}.banner-box .index-list {position: absolute;bottom: 3px;left: 50%;transform: translateX(-50%);display: flex;align-items: center;height: 10px;padding-left: 3px;padding-right: 3px;background-color: rgba(0, 0, 0, .5);border-radius: 5px;
}.banner-box .index {width: 5px;height: 5px;border-radius: 50%;margin-left: 3px;margin-right: 3px;background-color: #fff;
}.banner-box .index.active {background-color: #fb7299;
}
/* 视频区 */
.video-box{margin-top: 100px;padding-left: 6px;padding-right: 6px;
}
.video-box .video-list::after{display: block;content: '';clear: both;
}
.video-box .video{width: 50%;float: left;
}
.video-box .poster{position: relative;height: 106px;margin-right: 6px;margin-left: 6px;border-radius: 6px;overflow: hidden;
}
.video-box .poster img{width: 100%;height: 100%;
}
.video-box .poster .info{position: absolute;bottom: 0;color: #fff;padding-top: 8px;padding-bottom: 2px;height: 18px;font-size: 12px;background-image: linear-gradient(rgba(33,33,33,0),rgba(33,33,33,0.8));
}
.video-box .info div{display: inline-flex;align-items: center;margin-left: 16px;
}
.video-box .info svg{margin-right: 4px;margin-top: 2px;width: 14px;height: 14px;fill: #fff;
}
.video-box .title{margin: 6px 6px 10px 6px;height: 38px;line-height: 20px;font-size: 13px;/* 单行文本溢出打点：设置文本不换行white-space: nowrap;设置文字溢出用省略号代替text-overflow: ellipsis; *//* 多行文本溢出打点： */overflow: hidden;/* 设置盒子为伸缩盒 */display: -webkit-box;/* 设置伸缩盒内子元素的排列方式为vertical */-webkit-box-orient: vertical;/* 限制一个块元素内显示的文本行数 */-webkit-line-clamp: 2;
}.footer {margin-top: 40px;
}.footer p {margin-bottom: 20px;text-align: center;font-size: 13px;color: #999;
}

//request.js
axios.defaults.baseURL = 'https://developer.duyiedu.com/vue/bz/';//默认配置请求地址公共部分
axios.interceptors.response.use((response) => {const { status } = response;const { baseURL, url } = response.config;if(status === 200) {if(url === baseURL + 'video') {return {count: response.data.count,data: response.data.data}}return response.data.data;}return response;
});

Vue基础实现bilibili移动端页面相关推荐

【Vue】Vue移动端页面自适应解决方案
移动端页面自适应解决方案该方案使用相当简单,把下面这段已压缩过的原生JS(仅1kb,源码已在文章底部更新,2017/5/3) 放到 HTML 的 head 标签中即可(注:不要手动设置viewpo ...
基于Vue.js制作的仿车轮驾考通APP端页面
背景:学习完Vue,老师要求期末作业以Vue技术做一个手机端或者PC端的前端小项目.期末临近,周围的同学有的仿微信APP端,有的仿QQAPP端.小萍去年考科目一用了车轮驾考通刷题,然后她最后决定基于V ...
vue基础实践1-胡子语法展现到页面
vue基础实践1-胡子语法展现到页面 <!DOCTYPE html> <html lang="en"> <head><meta chars ...
【移动端网页布局】移动端网页布局基础概念 ⑧ ( 移动端页面布局方案 | 单独制作的移动端页面 - 主流 | 响应式页面兼容移动端 - 开发难度较大 )
文章目录一.移动端页面布局方案 1.单独制作的移动端页面 2.响应式页面兼容移动端一.移动端页面布局方案移动端页面方案 : 单独制作的移动端页面 : 主流开发方案 , PC 端与移动端访问 ...
vue基础，加少量的webpack，以及脚手架搭建vue项目
这是我学习vue基础时候的笔记,在b站上跟着敲的,一开始是有道云笔记的形式,为了上传到博客整理了两个小时改成了markdown的形式,喜欢的点个赞,谢谢. 文章目录一. vue基本使用 1. 实例参 ...
python移动端web开发代码_移动web前端开发,前端开发工作总结,移动端页面开发-我主页-一个前端程序猿的博客...
热门推荐 html/css 一.escape和它们不是同一类简单来说,escape是对字符串(string)进行编码(而另外两种是对URL),作用是让它们在所有电脑上可读.编码之后的... 标签: 0 ...
基于vue技术栈制作自己的简历网站问题总结篇(入门vue基础项目)
前言目前在学习vue技术栈的同时接触到了很多以前没用过的各种工具(如webpack,npm,git等等),配合着vue全家桶里的一些东西做了一个基于vue的个人简历网站(虽然用vue框架搭简历网站优 ...
2022前端知识整理：十、vue基础
十.vue基础 2022前端知识整理:第十部分.vue基础,仅包含vue2.0相关知识,建议先完成html5.css3和JavaScript ES6之后再学习.部分图片未上传成功,稍后完善,请见谅. ...
前端 Vue 基础使用
前端 Vue 基础使用文章目录前端 Vue 基础使用 1.前端发展介绍 2.Vue的快速使用 2.1.vue快速使用实操 3.插值语法 4.指令系统之文本指令 5.指令系统之事件指令 6.指令系统 ...

Vue基础实现bilibili移动端页面

Vue基础实现bilibili移动端页面

一、Vue基础实现bilibili移动端页面

Vue基础实现bilibili移动端页面相关推荐

最新文章

热门文章