vue+remi 사용자 정의 라운드 맵 효과
단 위 는 remi 를 사용 하여 페이지 레이아웃 을 진행 합 니 다.윤 방도 의 전체 폭 을 동적 으로 계산 할 때 px 를 remi 로 변환 해 야 하기 때문에 매우 번 거 롭 습 니 다.
효 과 는 다음 과 같 습 니 다.현재 그림 이 첫 번 째 와 마지막 이 아니라면 현재 그림 의 윗 장과 다음 장의 일부분 을 볼 수 있 습 니 다.
구체 적 인 코드 는 다음 과 같다.
<template>
<div class="constructionUp">
<div class="pub-hd">
<h2> </h2>
<h3> </h3>
</div>
<div id="activityDiv">
<ul num="0" id="activityUl">
<li class="activityLi" v-for="(v,i) in listData" :key="i" @touchstart.capture="touchStart" @touchend.capture="touchEnd">
<img src="static/imgs/package/bitmap.jpg">
<div class="liText">
<p class="liTtitle">{{v.lititle}}</p>
<p class="liDes">1、 ， 、 、 ， ， （ ： ）；</p>
<p class="liDes">2、 ， ， ， / 。</p>
<p class="liPrice">
<span class="title1"> :￥</span>
<span class="title2">4500</span>
<span class="title3"> </span>
</p>
</div>
</li>
</ul>
<div class="pointerDiv">
<span :class="[currantIndex ===0 ? 'active' : '', 'pointer']"></span>
<span :class="[currantIndex ===1 ? 'active' : '', 'pointer']"></span>
<span :class="[currantIndex ===2 ? 'active' : '', 'pointer']"></span>
</div>
</div>
</div>
</template>
<script>
export default {
data () {
return {
listData: [{lititle: ' '}, {lititle: ' 2'}, {lititle: ' 3'}],
liWidth: 0,
liNum: 0,
startX: 0,
endX: 0,
currantIndex: 0,
test: false
}
},
mounted () {
this.initUlWidth()
},
methods: {
initUlWidth () { // ul
let pit = document.documentElement.clientWidth / 750 // 750
let oldWidth = document.getElementsByClassName('activityLi')[0].offsetWidth // li
let marginR = getComputedStyle(document.getElementsByClassName('activityLi')[0], null)['marginRight'] // marginRight, px
let marginNum = parseInt(marginR.replace('px', ''))
this.liWidth = oldWidth + marginNum // +maringRight
let liCount = parseInt(document.getElementsByClassName('activityLi').length)// li
this.liNum = liCount
let ULpx = oldWidth * liCount + (liCount - 1) * marginNum // margin
document.getElementById('activityUl').style.width = ULpx / pit + 'px'// ， div 2 ， ul margin
},
touchStart (e) {
//
e.preventDefault() // ，
this.startX = e.touches[0].clientX //
},
touchEnd (e) {
e.preventDefault() //
//
this.endX = e.changedTouches[0].clientX
//
if (this.startX - this.endX > 30) {
console.log(' ')
if (this.currantIndex >= this.liNum - 1) {
//
} else {
this.currantIndex++
document.getElementById('activityUl').style.left = -this.currantIndex * this.liWidth + 'px'
}
}
//
if (this.startX - this.endX < -30) {
if (this.currantIndex === 0) {
//
} else {
this.currantIndex--
document.getElementById('activityUl').style.left = -this.currantIndex * this.liWidth + 'px'
}
}
this.startX = 0
this.endX = 0
}
}
}
</script>
<style lang="less" scoped>
@import "~less/base.less";
.constructionUp{
width: 100%;
.pub-hd{
padding: 0.8rem 0 0.6rem 0;
text-align: center;
background-color: #ffffff;
h2{
font-size: 0.32rem;
color: #606771;
}
h3{
margin-top: 0.26rem;
font-size: 0.24rem;
color: #b9bec4;
}
}
#activityDiv{
padding-left: 0.4rem;
background-color: #ffffff;
overflow: hidden;
#activityUl{
position: relative;
left: 0;
height: 8.06rem;
transition:all .35s ease-in-out;
background-color: #ffffff;
.activityLi{
float: left;
width: 6.7rem;
height: 8.06rem;
&:not(:last-child){
margin-right: 0.3rem;
}
box-shadow: 0 5px 25px 0 rgba(0,0,0,.4);
img{
width: 100%;
height: 3.6rem;
}
.liText{
padding: 0 0.4rem;
text-align: left;
.liTtitle{
padding: 0.48rem 0 0.36rem 0;
font-size: 0.34rem;
color: #000000;
}
.liDes{
font-size: 0.2rem;
color:#b5b5b5;
}
}
.liPrice{
height: 0.28rem;
line-height: 0.28rem;
color: @c-main; //
vertical-align: bottom;
margin-top: 0.8rem;
.title1{
display: inline-block;
font-size: 0.22rem;
}
.title2{
display: inline-block;
font-size: 0.35rem;
}
.title3{
display: inline-block;
font-size: 0.22rem;
}
}
}
}
.pointerDiv{
width: 100%;
height: 1.54rem;
background-color: #ffffff;
display: flex;
align-items: center;
justify-content: center;
.pointer{
display: inline-block;
width: 0.16rem;
height: 0.16rem;
background-color: #cccccc;
border-radius: 100%;
&:nth-child(2){
margin:0 0.4rem;
}
&.active{
background-color: @c-main;
}
}
}
}
}
</style>더 많은 vue 학습 튜 토리 얼 은 주 제 를 읽 으 세 요《vue 실전 교정》.
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
Fastapi websocket 및 vue 3(Composition API)1부: FastAPI virtualenv 만들기(선택 사항) FastAPI 및 필요한 모든 것을 다음과 같이 설치하십시오. 생성main.py 파일 및 실행 - 브라우저에서 이 링크 열기http://127.0.0.1:...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
