JS imitation of Jinri Toutiao mobile terminal homepage interface

This time I will bring you JS to imitate the homepage interface of Toutiao mobile terminal. What are the precautions for 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 + Mongodb Develop a complete blog process

Technology stack:

vue + webpack + vuex + axios

Structure:

• build: webpack configuration

• config: project configuration parameters

• src

• assets: Static resource files, storing pictures

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

or

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

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

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

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!

Recommended reading:

Implement click-to-load loading in five-level areas

vue builds an automatic website building project

How to use echarts in Vue.JS

The above is the detailed content of JS imitation of Jinri Toutiao mobile terminal homepage interface. For more information, please follow other related articles on the PHP Chinese website!