今回はToutiaoモバイル端末のホームページインターフェースを模倣したJSの注意事項を紹介します。実際の事例を見てみましょう。
前書き
しばらくの間、Vue を使ってモバイル端末を書きたいと思っていましたが、年末であまり忙しくないので、それに取り組み始めました。数日前の時点ではほとんど読めません
私も純粋にフロントエンドページを書いているので、実際のリクエストをシミュレートするために、API を自分で直接生成できます。 Easy Mock で
このプロジェクトの Easy Mock アカウントとパスワードに直接ログインすることもできます:
アカウント: vue-toutiao
パスワード: 123456
インターフェースを変更したい場合は、コピーを作成して変更してくださいそれ
バックエンドインターフェイスを自分で開発したい場合。私のブログを読むことができます Vue + Node + Mongodb 完全なブログプロセスを開発します
テクノロジースタック:
vue + webpack + vuex + axios
ビルド: webpack 構成
config: プロジェクト設定パラメータ
src
assets: 画像を保存する静的リソースファイル
components: 一般的に使用されるコンポーネント。たとえば、ポップアップ ウィンドウなどです。 。 。
ディレクティブ: 共通コマンドのカプセル化
router: ルーティングテーブル
store: 状態管理vuex
styles: スタイルファイル
utils: 共通ユーティリティクラス
ビュー:ページを表示します
static: 静的ファイル: favicon.ico などを保存します
このプロジェクトはパッケージ化に DllPlugin を使用します。プロジェクトを開始するときに、必ずスクリプト コマンドを 1 回実行して構成を生成してください
。デモ:
いくつかの共通知識のポイント
1. ルートの遅延読み込み
{ path: '/development', name: 'development', component: (resolve) => { require(['../views/development.vue'], resolve) } }
または
const _import_ = file => () => import('views/' + file + '.vue') { path: '/development', name: 'development', component: _import_('development') }
2. ログインインターセプト
に合格しましたbeforeログインが必要かどうかを決定するためにルートの各フック関数が使用されます
// 如:系统设置需要登陆 { 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. アニメーションの切り替え
ルーターに設定されている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 } }
4.再生
IOS ではビデオ コントロールを非表示にできないため、キャンバスを描画することでビデオを非表示にし、ビデオを再生する効果を実現できます
この記事の事例を読んだ後、あなたはその方法をマスターしたと思います。さらに興味深い情報については、PHP 中国語 Web サイトの記事にあるその他の関連トピックにご注目ください。
推奨読書:
5 レベルの領域で click-to-load 読み込みを実装する
以上がJinri Toutiao モバイル端末のホームページ インターフェイスを模倣した JSの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。