vue 에 닻 점 을 추가 하여 페이지 를 굴 릴 때 닻 점 에 해당 하 는 class 작업 을 추가 합 니 다.
.orange{
color: #f97910;
}
<template>
<div class="productDetail" ref="content">
<div class="tabbar">
<div @click.prevent="tabclick(index)" v-for="(item,index) in productTile" :key="index" :class="{orange:index==current}">{{item}}</div>
</div>
<div id="0">...</div>
<div id="1">...</div>
<div id="2">...</div>
</div>
<template>
tabclick(index){
this.current=index;
let anchorElement = document.getElementById(index);
if(anchorElement) { anchorElement.scrollIntoView(); }
},
두 번 째 단계:class 가 produtDetail 의부분 에 height:100%를 추가 합 니 다.overflow-y: scroll;
추가 지식:Vuepress 를 사용 하여 markdown 디 렉 터 리 를 자동 으로 생 성 할 때 제목 에 숫자 가 있 으 면 점프 할 수 없 는 문제 해결
문제 설명
최근 vuepress 로 웹 문 서 를 쓸 때 문 제 를 발 견 했 습 니 다.바로 제 가 markdown 으로 쓴 제목 에 1.2 XXX 와 같은 제목 이 있 을 때 공식 문 서 를 사용 하여 제 시 했 습 니 다.
문제 분석
공식 개발 문 서 를 보면 vuepress 의 기본 설정 과 관련 이 있 습 니 다.그림 1 에서 보 듯 이 markdown.slugify 함수 에서 볼 수 있 듯 이 설정 을 수정 해 야 합 니 다.
markdown.slugify 함수
그림 1 markdown.slugify 함수
그림 의 source 를 클릭 하여 GitHub 프로젝트 페이지 로 이동 하면 다음 코드 세그먼트 를 볼 수 있 습 니 다.
// ensure it doesn't start with a number (#121)
.replace(/^(\d)/, '_$1')
우리 의 제목 숫자 가 이 코드 에 의 해 교체 되 어 최종 링크 가 제목 을 가리 키 지 않 아 뛰 지 못 합 니 다.
문제 해결
GitHub 페이지 의 설정 경로 에 따라 자신 이 설치 한 vuepress 모듈 의 설정 경 로 를 찾 습 니 다.제 경 로 는:
D:\my_programodejsode_globalode_modules\vuepressode_modules\@vuepress\shared-utils\lib\slugify.js
slugify.js 파일 을 열 고 상기 코드 세그먼트 를 주석 하면 문 제 를 해결 할 수 있 습 니 다.
이상 의 vue 에 닻 점 을 추가 하여 스크롤 페이지 를 실현 할 때 닻 점 에 해당 하 는 class 작업 을 추가 하 는 것 은 바로 작은 편집 이 여러분 에 게 공유 하 는 모든 내용 입 니 다.여러분 께 참고 가 되 고 저 희 를 많이 사랑 해 주 셨 으 면 좋 겠 습 니 다.
.productDetail {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
overflow-y: scroll;
}
세 번 째,감청 이벤트 추가
document.getElementsByClassName('productDetail')[0]; vue :this.$refs.content
methods:{
handleScroll(el) {
this.scrollTop = this.$refs.content.scrollTop;
if (this.scrollTop >= 460) {
this.current = 2
} else if (this.scrollTop < 460 && this.scrollTop >= 360) {
this.current = 1
} else {
this.current = 0
}
},
},
mounted() {
//scoll
var pro_detail_page = document.getElementsByClassName('productDetail')[0];
pro_detail_page.addEventListener('scroll', this.handleScroll);
},
주:가장 바깥쪽 div 에 height:100%를 추가 하면 mint-ui 의 윤 방 도 는 보 여 주지 않 습 니 다.mint-ui 의 기본 overflow 속성 을 변경 할 수 있 습 니 다.overflow:visible 로 변경 할 수 있 습 니 다.추가 지식:Vuepress 를 사용 하여 markdown 디 렉 터 리 를 자동 으로 생 성 할 때 제목 에 숫자 가 있 으 면 점프 할 수 없 는 문제 해결
문제 설명
최근 vuepress 로 웹 문 서 를 쓸 때 문 제 를 발 견 했 습 니 다.바로 제 가 markdown 으로 쓴 제목 에 1.2 XXX 와 같은 제목 이 있 을 때 공식 문 서 를 사용 하여 제 시 했 습 니 다.
[[toc]]
디 렉 터 리 를 자동 으로 생 성 할 때 최종 적 으로 생 성 된 웹 페이지 는 숫자 를 포함 한 제목 이 해당 위치 로 이동 할 수 없습니다.문제 분석
공식 개발 문 서 를 보면 vuepress 의 기본 설정 과 관련 이 있 습 니 다.그림 1 에서 보 듯 이 markdown.slugify 함수 에서 볼 수 있 듯 이 설정 을 수정 해 야 합 니 다.
markdown.slugify 함수
그림 1 markdown.slugify 함수
그림 의 source 를 클릭 하여 GitHub 프로젝트 페이지 로 이동 하면 다음 코드 세그먼트 를 볼 수 있 습 니 다.
// string.js slugify drops non ascii chars so we have to
// use a custom implementation here
// @ts-ignore
import { remove as removeDiacritics } from 'diacritics'
// eslint-disable-next-line no-control-regex
const rControl = /[\u0000-\u001f]/g
const rSpecial = /[\s~`!@#$%^&*()\-_+=[\]{}|\\;:"'<>,.?/]+/g
export = function slugify (str: string): string {
return removeDiacritics(str)
// Remove control characters
.replace(rControl, '')
// Replace special characters
.replace(rSpecial, '-')
// Remove continous separators
.replace(/\-{2,}/g, '-')
// Remove prefixing and trailing separtors
.replace(/^\-+|\-+$/g, '')
// ensure it doesn't start with a number (#121)
.replace(/^(\d)/, '_$1')
// lowercase
.toLowerCase()
}
그 중 에 ensure it doesn't start with a number(\#121)가 있 는데 이것 이 문제 라 는 것 을 알 수 있 습 니 다.// ensure it doesn't start with a number (#121)
.replace(/^(\d)/, '_$1')
우리 의 제목 숫자 가 이 코드 에 의 해 교체 되 어 최종 링크 가 제목 을 가리 키 지 않 아 뛰 지 못 합 니 다.
문제 해결
GitHub 페이지 의 설정 경로 에 따라 자신 이 설치 한 vuepress 모듈 의 설정 경 로 를 찾 습 니 다.제 경 로 는:
D:\my_programodejsode_globalode_modules\vuepressode_modules\@vuepress\shared-utils\lib\slugify.js
slugify.js 파일 을 열 고 상기 코드 세그먼트 를 주석 하면 문 제 를 해결 할 수 있 습 니 다.
이상 의 vue 에 닻 점 을 추가 하여 스크롤 페이지 를 실현 할 때 닻 점 에 해당 하 는 class 작업 을 추가 하 는 것 은 바로 작은 편집 이 여러분 에 게 공유 하 는 모든 내용 입 니 다.여러분 께 참고 가 되 고 저 희 를 많이 사랑 해 주 셨 으 면 좋 겠 습 니 다.
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 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에 따라 라이센스가 부여됩니다.