Jinri Toutiao 휴대폰 홈페이지 인터페이스의 JS 모방

이번에는 터우탸오 모바일 단말기의 홈페이지 인터페이스를 흉내낸 JS의 주의사항을 소개해드리겠습니다.

머리말

Vue는 한동안 Vue를 사용하여 모바일 단말기를 작성하고 싶었는데, 연말에 별로 바쁘지 않아서 작업을 시작했습니다. 며칠전부터 거의 읽을 수가 없네요.

저도 순수하게 프론트엔드 페이지를 작성하고 있기 때문에 실제 요청을 시뮬레이션하기 위해 mock.js를 직접 생성할 수 있습니다. Easy Mock에서
이 프로젝트에 대한 내 Easy Mock 계정과 비밀번호에 직접 로그인할 수도 있습니다:

계정: vue-toutiao
비밀번호: 123456

인터페이스를 수정하려면 복사본을 만들어 수정하세요. it

백엔드 인터페이스를 직접 개발하고 싶다면. 내 블로그를 읽을 수 있습니다. Vue + Node + Mongodb 완전한 블로그 프로세스 개발

기술 스택:

vue + webpack + vuex + axios

구조:

• build: webpack 구성

• config: 프로젝트 구성 매개변수

• src

• assets: 정적 리소스 파일, imageswhatnot

• 저장 구성 요소: 일반적으로 사용되는 구성 요소입니다. 예를 들어 팝업창 등이 있습니다. . .

• 지시어: 공통 명령 캡슐화

• router: 라우팅 테이블

• store: 상태 관리 vuex

• styles: 스타일 파일

• utils: 공통 유틸리티 클래스 캡슐화

• 조회수: 페이지 보기

• 정적: 정적 파일: favicon.ico 등 저장

• 이 프로젝트는 패키징을 위해 DllPlugin을 사용합니다. 프로젝트 시작 시 스크립트 명령을 한 번 실행하여 구성

효과를 생성해야 합니다. 데모:

몇 가지 공통 지식 사항

1 경로 지연 로딩

{
  path: '/development',
  name: 'development',
  component: (resolve) => {
    require(['../views/development.vue'], resolve)
  }
}

또는

const _import_ = file => () => import('views/' + file + '.vue')
{
  path: '/development',
  name: 'development',
  component: _import_('development')
}

2. 로그인 차단

통과 before경로의 각 후크 기능을 사용하여 로그인이 필요한지 확인합니다

// 如：系统设置需要登陆
{ 
  path: '/system', 
  name: '系统设置', 
  meta: { 
    login: true
  },
  component: _import_('System/index')
}
router.beforeEach((to, from, next) => {
  if (to.meta.login) { //判断前往的界面是否需要登陆
    if (store.state.user.user.name) { // 是否已经登陆
      next()
    }else{
      Vue.prototype.$alert('请先登录!')
        .then( () => {
          store.state.user.isLogin = true
        })
    }
  }else{
    if (to.meta.page) store.state.app.pageLoading = true
    next() 
  }
  
})

3. 애니메이션 전환

라우터에 설정된 애니메이션 속성을 감지하여 어떤 종류의 전환 애니메이션을 수행하는지 확인합니다

Router.prototype.animate = 0
// 获取每个路由meta上面的slide 来判断它做什么动画
{ 
  path: '/system', 
  name: '系统设置', 
  meta: { 
    slide: 1 
  },
  component: _import_('System/index')
}
watch: {
  $route (to, from) {
    /*
    0: 不做动画
    1: 左切换
    2: 右切换
    3: 上切换
    4: 下切换
    ...
     */
    let animate = this.$router.animate || to.meta.slide
    if (!animate) {
      this.animate = '' 
    }else{
      this.animate = animate === 1 ? 'slide-left' :
        animate === 2 ? 'slide-right' :
        animate === 3 ? 'slide-top' :
        animate === 4 ? 'slide-bottom' : ''
    }
    this.$router.animate = 0
  }
}

4. 재생

IOS에서는 동영상 컨트롤을 숨길 수 없기 때문에 캔버스를 그려서 동영상을 숨기고 동영상을 재생하는 효과를 얻을 수 있습니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트 기사에서 다른 관련 주제에 주목하세요!

추천 자료:

5개 레벨 영역에서 클릭-로드 로딩 구현

vue는 자동 웹 사이트 구축 프로젝트를 구축합니다

Vue.JS에서 echarts를 사용하는 방법

위 내용은 Jinri Toutiao 휴대폰 홈페이지 인터페이스의 JS 모방의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!