Jadual Kandungan
结构:
Rumah hujung hadapan web tutorial js JS仿今日头条手机端主页界面

JS仿今日头条手机端主页界面

Mar 23, 2018 pm 03:41 PM
javascript Laman utama antara muka

这次给大家带来JS仿今日头条手机端主页界面,JS仿今日头条手机端主页界面的注意事项有哪些,下面就是实战案例,一起来看一下。

前言

vue也弄了一段时间了, 前段时间一直想用vue写个移动端,加之年底也不是很忙,于是前几天便着手开始弄了,到今天为止也算是勉强能看了

因为也是纯粹的写写前端页面,所以数据方面用的是mock.js,为了真实的模拟请求,可以直接在 Easy Mock 自己生成API
也可直接登陆我这项目的Easy Mock账号密码:

账号: vue-toutiao
密码: 123456

如果你想修改接口,请copy一份在修改

如果你想后台接口也自己开发的话。可以阅读我这篇博客 Vue + Node + Mongodb 开发一个完整博客流程

技术栈:

vue + webpack + vuex + axios

结构:

  • build: webpack配置

  • config: 项目配置参数

  • src

  • assets: 静态资源文件,存放图片啥的

  • components: 常用组件。例如 弹窗 等等。。。

  • directive: 常用指令封装

  • router: 路由表

  • store: 状态管理 vuex

  • styles: 样式文件

  • utils: 常用工具类封装

  • views: 视图页面

  • static: 静态文件: 存放 favicon.ico 等等

  • 此项目用到了 DllPlugin 进行打包处理,所有启动该项目时记得,先执行一次该脚本命令生成配置

效果演示:

几个常用的知识点

1. 路由懒加载

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

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

2. 登陆拦截

通过路由的 beforeEach 钩子函数来判断是否需要登陆

// 如:系统设置需要登陆
{ 
  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() 
  }
  
})
Salin selepas log masuk

3. 动画切换

通过检测设置在 Router上的animate属性 来判断它做什么样的切换动画

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
  }
}
Salin selepas log masuk

4. 视频播放

因为在IOS上 无法隐藏video的controls ,所以我们可以隐藏video,通过绘制canvas来达到播放视频的效果

相信看了本文案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!

推荐阅读:

实现五级地区点击后加载

vue构建一个自动建站项目

在Vue.JS中怎样使用echarts

Atas ialah kandungan terperinci JS仿今日头条手机端主页界面. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Alat AI Hot

Undresser.AI Undress

Undresser.AI Undress

Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover

AI Clothes Remover

Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool

Undress AI Tool

Gambar buka pakaian secara percuma

Clothoff.io

Clothoff.io

Penyingkiran pakaian AI

AI Hentai Generator

AI Hentai Generator

Menjana ai hentai secara percuma.

Artikel Panas

R.E.P.O. Kristal tenaga dijelaskan dan apa yang mereka lakukan (kristal kuning)
2 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌
Repo: Cara menghidupkan semula rakan sepasukan
4 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: Cara mendapatkan biji gergasi
4 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌

Alat panas

Notepad++7.3.1

Notepad++7.3.1

Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina

SublimeText3 versi Cina

Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1

Hantar Studio 13.0.1

Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6

Dreamweaver CS6

Alat pembangunan web visual

SublimeText3 versi Mac

SublimeText3 versi Mac

Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Bagaimana untuk melaksanakan sistem pengecaman pertuturan dalam talian menggunakan WebSocket dan JavaScript Bagaimana untuk melaksanakan sistem pengecaman pertuturan dalam talian menggunakan WebSocket dan JavaScript Dec 17, 2023 pm 02:54 PM

Cara menggunakan WebSocket dan JavaScript untuk melaksanakan sistem pengecaman pertuturan dalam talian Pengenalan: Dengan perkembangan teknologi yang berterusan, teknologi pengecaman pertuturan telah menjadi bahagian penting dalam bidang kecerdasan buatan. Sistem pengecaman pertuturan dalam talian berdasarkan WebSocket dan JavaScript mempunyai ciri kependaman rendah, masa nyata dan platform merentas, dan telah menjadi penyelesaian yang digunakan secara meluas. Artikel ini akan memperkenalkan cara menggunakan WebSocket dan JavaScript untuk melaksanakan sistem pengecaman pertuturan dalam talian.

Bagaimana untuk memaparkan tetingkap paparan pada halaman utama Douyin Bagaimana untuk memaparkan tetingkap paparan pada halaman utama Douyin Mar 30, 2024 pm 08:36 PM

Bagaimana untuk memaparkan tetingkap paparan pada halaman utama Douyin? Dalam APP video pendek Douyin, anda boleh menambah tetingkap paparan ke halaman utama Kebanyakan pengguna tidak tahu cara memaparkan tetingkap paparan tentang cara memaparkan tetingkap paparan di halaman utama Douyin , pengguna yang berminat datang dan lihat! Tutorial tentang cara menggunakan Douyin: Cara memaparkan pameran di halaman utama Douyin 1. Mula-mula buka APP video pendek Douyin dan masukkan Kawasan Saya, klik pada tiga garisan mendatar di penjuru kanan sebelah atas dan pilih [Pusat Pencipta] 2. Kemudian pada halaman Pusat Perkhidmatan Pencipta, pilih fungsi [Semua kategori] 3. Kemudian cari perkhidmatan [Pameran Produk] dalam senarai fungsi 4. Kemudian lompat ke halaman yang ditunjukkan dalam gambar di bawah, klik [Jadilah pakar penghantaran barang ]; 5. Akhir sekali, menjadi antara muka pakar penghantaran barangan, klik pada [Permohonan untuk Kebenaran Penghantaran] di bahagian bawah untuk memaparkan

WebSocket dan JavaScript: teknologi utama untuk melaksanakan sistem pemantauan masa nyata WebSocket dan JavaScript: teknologi utama untuk melaksanakan sistem pemantauan masa nyata Dec 17, 2023 pm 05:30 PM

WebSocket dan JavaScript: Teknologi utama untuk merealisasikan sistem pemantauan masa nyata Pengenalan: Dengan perkembangan pesat teknologi Internet, sistem pemantauan masa nyata telah digunakan secara meluas dalam pelbagai bidang. Salah satu teknologi utama untuk mencapai pemantauan masa nyata ialah gabungan WebSocket dan JavaScript. Artikel ini akan memperkenalkan aplikasi WebSocket dan JavaScript dalam sistem pemantauan masa nyata, memberikan contoh kod dan menerangkan prinsip pelaksanaannya secara terperinci. 1. Teknologi WebSocket

Bagaimana untuk melaksanakan sistem tempahan dalam talian menggunakan WebSocket dan JavaScript Bagaimana untuk melaksanakan sistem tempahan dalam talian menggunakan WebSocket dan JavaScript Dec 17, 2023 am 09:39 AM

Cara menggunakan WebSocket dan JavaScript untuk melaksanakan sistem tempahan dalam talian Dalam era digital hari ini, semakin banyak perniagaan dan perkhidmatan perlu menyediakan fungsi tempahan dalam talian. Adalah penting untuk melaksanakan sistem tempahan dalam talian yang cekap dan masa nyata. Artikel ini akan memperkenalkan cara menggunakan WebSocket dan JavaScript untuk melaksanakan sistem tempahan dalam talian dan memberikan contoh kod khusus. 1. Apakah itu WebSocket? WebSocket ialah kaedah dupleks penuh pada sambungan TCP tunggal.

Apakah yang perlu saya lakukan jika antara muka perkataan menjadi lebih kecil? Apakah yang perlu saya lakukan jika antara muka perkataan menjadi lebih kecil? Mar 20, 2024 pm 09:30 PM

Apabila kita menggunakan komputer untuk mengendalikan dan mengedit dokumen perkataan, kita sering tidak tahu di mana kita menyentuh, dan antara muka tiba-tiba menjadi sangat kecil Kadang-kadang teks dalam dokumen perkataan tidak dapat dilihat dengan jelas. Sesetengah orang mungkin panik apabila menghadapi masalah sedemikian, memikirkan bahawa komputer tidak berfungsi Sebenarnya, ia hanya kerana anda telah menghadapi tetapan tertentu dan melaraskan paparan. Jadi, jika anda menukar saiz paparan antara muka secara tidak sengaja, bagaimanakah anda harus memulihkan dan melaraskannya? Apakah yang perlu saya lakukan jika antara muka perkataan menjadi lebih kecil? Di bawah, kami akan berkongsi beberapa cara untuk menyelesaikannya. Saya harap anda dapat menanganinya dengan mudah apabila anda menghadapi masalah seperti itu. Mula-mula, kami mencipta dan membuka dokumen Word dan melaksanakan operasi penyuntingan mudah untuk menunjukkan langkah-langkah. Dalam gambar di bawah

Cara Membalikkan Halaman Utama Google Chrome kepada Carian Google Cara Membalikkan Halaman Utama Google Chrome kepada Carian Google Jan 30, 2024 pm 03:42 PM

Bagaimana untuk menukar halaman utama Google Chrome kembali kepada Google? ke dalam jenis halaman utama yang lain , ramai pengguna tidak tahu cara untuk menukar kembali ke halaman utama Google sendiri pada masa ini. Di bawah, editor akan menunjukkan kepada anda cara menukar halaman utama Google Chrome kembali kepada Google. Kaedah untuk menukar halaman utama Google Chrome kembali kepada Google 1. Buka Google Chrome dan klik butang menu di penjuru kanan sebelah atas. 2. Klik pilihan "Tetapan". 3. Pilih pilihan "Pelayar Lalai" dalam halaman tetapan. 4. Tetapkan Google Chrome sebagai penyemak imbas lalai anda!

Bagaimana untuk menukar halaman utama Google Chrome kembali ke enjin carian Google Bagaimana untuk menukar halaman utama Google Chrome kembali ke enjin carian Google Mar 28, 2024 am 08:36 AM

Bagaimana untuk menukar halaman utama Google Chrome kembali ke enjin carian Google? Google Chrome dibina secara rasmi oleh Google Penyemak imbas ini dilengkapi dengan carian Google dan fungsi terjemahan Google Halaman utama lalai Google Chrome yang kami muat turun dan pasang ialah carian Google cari di halaman utama ke enjin carian lain, jadi bagaimana untuk menukar enjin carian di halaman utama kembali? Artikel ini membawakan anda proses operasi menukar halaman utama Google Chrome kembali kepada carian Google Rakan yang memerlukan tidak boleh ketinggalan. Prosedur operasi untuk menukar halaman utama Google Chrome kembali ke Carian Google 1. Buka Google Chrome dan klik butang menu di sudut kanan atas (seperti yang ditunjukkan dalam gambar). 2. Klik pilihan "Tetapan" (seperti yang ditunjukkan dalam gambar). 3

Cara menggunakan JavaScript dan WebSocket untuk melaksanakan sistem pesanan dalam talian masa nyata Cara menggunakan JavaScript dan WebSocket untuk melaksanakan sistem pesanan dalam talian masa nyata Dec 17, 2023 pm 12:09 PM

Pengenalan kepada cara menggunakan JavaScript dan WebSocket untuk melaksanakan sistem pesanan dalam talian masa nyata: Dengan populariti Internet dan kemajuan teknologi, semakin banyak restoran telah mula menyediakan perkhidmatan pesanan dalam talian. Untuk melaksanakan sistem pesanan dalam talian masa nyata, kami boleh menggunakan teknologi JavaScript dan WebSocket. WebSocket ialah protokol komunikasi dupleks penuh berdasarkan protokol TCP, yang boleh merealisasikan komunikasi dua hala masa nyata antara pelanggan dan pelayan. Dalam sistem pesanan dalam talian masa nyata, apabila pengguna memilih hidangan dan membuat pesanan

See all articles