Imitation JS de l'interface de la page d'accueil du téléphone portable Jinri Toutiao

Cette fois, je vais vous proposer JS pour imiter l'interface de la page d'accueil du terminal mobile Toutiao. Quelles sont les précautions pour imiter l'interface de la page d'accueil du terminal mobile Toutiao à l'aide de JS. jetez-y un œil ensemble.

Avant-propos

Je travaille sur vue depuis un moment. J'avais envie d'utiliser vue pour écrire un terminal mobile il y a quelque temps. De plus, je ne suis pas très occupé à la fin. de l'année, j'ai donc commencé à travailler dessus il y a quelques jours. Jusqu'à présent, je peux à peine le lire

Parce que j'écris uniquement des pages frontales, j'utilise donc mock.js pour les données. afin de simuler des requêtes réelles, vous pouvez directement générer vous-même l'API dans Easy Mock
Vous pouvez également vous connecter directement au compte Easy Mock de mon projet Mot de passe :

Compte : vue-toutiao
Mot de passe : 123456

Si vous souhaitez modifier l'interface, merci de copier Une copie est en cours de modification

Si vous souhaitez développer vous-même l'interface backend. Vous pouvez lire mon blog Vue + Node + Mongodb Développer un processus de blog complet

Pile technologique :

vue + webpack + vuex + axios

Structure :

• build : configuration du webpack

• config : paramètres de configuration du projet

• src

• actifs : fichiers de ressources statiques, stockage de imagesetc.

• composants : composants couramment utilisés. Par exemple, des fenêtres pop-up, etc. . .

• directive : encapsulation d'instructions communes

• routeur : table de routage

• magasin : gestion d'état vuex

• styles : fichier de style

• utils : package de classe d'outils communs

• vues : afficher la page

• statique : fichiers statiques : store favicon.ico, etc.

• Ce projet utilise DllPlugin pour l'empaquetage, alors n'oubliez pas lorsque vous démarrez ce projet, exécutez d'abord la commande de script une fois pour générer la configuration

Démonstration de l'effet :

Quelques points de connaissances communs

1. Chargement paresseux des itinéraires

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

ou

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

2. L'interception de connexion

détermine si la connexion est requise via la fonction de hook beforeEach de l'itinéraire

// 如：系统设置需要登陆
{ 
  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. Commutation d'animation

Déterminez le type d'animation de commutation qu'il effectue en détectant l'attribut d'animation défini sur le routeur

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 . Lecture vidéo

Étant donné que les commandes vidéo ne peuvent pas être masquées sur IOS, nous pouvons masquer la vidéo et obtenir l'effet de lecture de la vidéo en dessinant une toile

Croyez-le Après avoir lu le cas dans cet article, vous maîtrisez la méthode. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web PHP chinois !

Lecture recommandée :

Réaliser un chargement post-clic dans des zones à cinq niveaux

vue construit un projet de création automatique de sites Web

Comment utiliser les graphiques électroniques dans Vue.JS

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!