JS imitation of Jinri Toutiao mobile terminal homepage interface-JS Tutorial-php.cn

This time I will bring you JS to imitate the homepage interface of Toutiao mobile terminal. What are theprecautionsfor imitating the homepage interface of Toutiao mobile terminal using JS. Here is a practical case, let’s take a look at it together.

Preface

I have been working on vue for a while. I have always wanted to use vue to write a mobile terminal. In addition, I am not very busy at the end of the year, so I started working on it a few days ago. So far today, I can barely read it

Because I am purely writing front-end pages, I use mock.js for data. In order to simulate real requests, you can directly generate the API yourself in Easy Mock
You can also directly log in to the Easy Mock account of my project Password:

Account: vue-toutiao
Password: 123456

If you want to modify the interface, please copy One copy is being modified

If you want to develop the backend interface yourself. You can read my blog Vue + Node +MongodbDevelop a complete blog process

Technology stack:

vue + webpack + vuex + axios

Structure:

build: webpack configuration
config: project configuration parameters
src
assets: Static resource files, storingpictures
components: Commonly used components. For example, pop-up windows, etc. . .
directive: Common instruction encapsulation
router: routing table
store: state management vuex
styles: style file
utils: common tool class package
views: view page
static: Static file: store favicon.ico, etc.
This project uses DllPlugin for packaging, so remember it when starting the project , first execute the script command once to generate the configuration

Effect demonstration:

Several common knowledge points

1. Lazy loading of routes

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

Copy after login

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

Copy after login

2. Login interception

Determine whether login is required through the beforeEach hook function of the route

// 如：系统设置需要登陆 { 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() } })

Copy after login

3. Animation switching

Determine what kind of switching animation it does by detecting the animate attribute set on the Router

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

Copy after login

4. Video playback

Because the video controls cannot be hidden on IOS, we can hide the video and achieve the effect of playing the video by drawing canvas

I believe you have mastered it after reading the case in this article Method, for more exciting information, please pay attention to other related articles on the php Chinese website!