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
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!