移动端活动页总结记录

149 阅读1分钟

rem布局

宽度大于750px的时候
1.留白max-width:750px;margin 0 auto 2.背景平铺拉宽
postcss 将px转化成rem
autoProfix 自动加上浏览器前缀
结合vh和vm 打造横屏适用

toast提醒

单独组件,传值message

dialog提示框

提示框内容自动居中

当前运行环境判断

根据手机不同做不同的逻辑判断

srcoll组件

制作导航栏

swiper组件

制作banner

store 全局变量

埋点上报

关于图片加载失败

接口中图片的某些地址是http开头,而线上环境是https的域名,会访问失败,因此需要将http全部转化成https。
对此的做法是添加的一个vue过滤器,完成替换。
1.在index.ts中初始化。

initGlobalFilters()
function initGlobalFilters () {
  Vue.filter('http', (value: string) => {
    return value.replace(/^http:+/, 'https:')
  })
}

2.具体使用

img.image(:src="item.face | http")