Home >Web Front-end >JS Tutorial >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
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
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!