前言:
公司最近有一個H5頁面的功能,比較簡單的一個調查表功能,嵌套在我們微信公眾號里面。選用的技術棧是Vue。同時用到了微信的登錄和分享接口。ps:本人小白,如果有問題希望大家能指出來,寫文章不止是為了記錄,還是為了發現自己的問題。謝謝大噶!!!
主要功能以及遇到的問題:
1.左右切換動畫
--首先我考慮到用vue的移動端動畫庫,看了好久,但是項目非常小,就放棄了這個選擇自己開始手寫。首先我考慮到的是過渡效果。并且找到了相關的文章參考。代碼如下:
`<template> <div id="app"> <transition :name="'fade-'+(direction==='forward'?'last':'next')"> <router-view></router-view> </transition> </div></template><script>export default { name: "app", data: () => { return { direction: "" }; }, watch: { $route(to, from) { let toName = to.name; const toIndex = to.meta.index; const fromIndex = from.meta.index; this.direction = toIndex < fromIndex ? "forward" : ""; } }}</script><style scoped>.fade-last-enter-active { animation: bounce-in 0.6s;}.fade-next-enter-active { animation: bounce-out 0.6s;}@keyframes bounce-in { 0% { transform: translateX(-100%); } 100% { transform: translateX(0rem); }}@keyframes bounce-out { 0% { transform: translateX(100%); } 100% { transform: translateX(0rem); }}</style>2.路由帶參數跳轉
這個就是記錄一下,有三種方法。
1.直接在route-link:to 中帶參數:
<router-link :to="{name:'home', query: {id:1}}">2.在this.$router.push中帶參數:
使用query帶參數: 類似于get傳參 參數會拼接到url上面
this.$router.push({name:'home',query: {id:'1'}})this.$router.push({path:'/home',query: {id:'1'}})使用params帶參數: 只能用name 類似于post 參數不會拼接
this.$router.push({name:'home',params: {id:'1'}})參考鏈接:http://m.survivalescaperooms.com/article/160401.htm
3.移動端引入外部字體樣式
移動端引入外部樣式,我用的是直接把字體庫的字體下載下來,一般后綴為 .ttf/.otf等。在asset文件下創建 fonts文件,將字體文件全部放入。
再新建一個.css文件,相當于注冊你下載的字體,可以自定義給字體們命名,不過一般還是按照以前的名字。src是文件所在的路徑。
新聞熱點
疑難解答