目录
1.使用 (lib-flexible )动态设置 REM 基准值(html 标签的字体大小)
2.使用 postcss-pxtorem (opens new window)将 px 转为 rem
⑦ 删除索引不关闭弹框,并且处理删除索引导致的频道高亮变化问题
接口:黑马头条移动端
一、全局引入vant组件
二、移动适配
1.使用 (lib-flexible )动态设置 REM 基准值(html 标签的字体大小)
①安装
yarn add amfe-flexible
②在 main.js
中加载执行该模块
import "amfe-flexible";
2.使用 postcss-pxtorem (opens new window)将 px
转为 rem
①安装
yarn add yarn add postcss-pxtorem -D
②设置设计稿尺寸
// postcss.config.js
module.exports = {
plugins: {
// postcss-pxtorem 插件的版本需要 >= 5.0.0
'postcss-pxtorem': {
rootValue({ file }) {
return file.indexOf('vant') !== -1 ? 37.5 : 75;
},
propList: ['*'],
},
},
};
三、路由配置
四、底部导航栏-tabbar
1.在tabbar中添加自定义字体图标
五、登录页
1.头部-navbar
<template>
<div class="login-container">
<van-nav-bar title="登录" left-arrow @click-left="$router.go(-1)" />
</div>
</template>
给头部添加样式
添加scoped后,没有哈希值的类,配置的样式无效,:deep()可以渗透样式
<style lang="less" scoped>
.login-container {
.van-nav-bar {
background-color: #3296fa;
:deep(.van-icon) {
color: #fff;
}
}
:deep(.van-nav-bar__title) {
color: #fff;
}
}
</style>
2.登录表单
3.连接登录接口
4.登录成功、失败提示
5.登录表单验证
6.发送验证码
①样式铺设
②发送验证码倒计时
③验证码按钮和倒计时按钮切换逻辑
④连接接口发送验证码
⑤存储用户token
六、封装存储和取数据的方法
1.封装存储数据方法
2.封装取数据方法
七、我的页面
1、头部铺设
2.收藏、历史、消息通知
3.获取个人信息并渲染
4.将请求头token写入请求拦截器中
5.token过期处理
6.退出登录
① 底部导航状态
②退出登录确认弹框
③退出登录按钮
八、首页
1.tab栏
2.文章列表组件复用
3.单个文章组件复用
4.渲染文章列表
①渲染列表框架
②渲染列表数据
计算指定事件与当前事件的间隔年
5.tab栏粘性布局(将tab栏固定在页上)
6.文章列表数据上拉加载
上拉加载所有文章数据情况处理
7.文章列表数据下拉刷新
①上拉加载框架
②上拉加载数据
8.频道编辑按钮
9.弹出层
10.频道编辑
①获取用户频道
②选中的频道高亮
③获取所有频道数据
④推荐频道数据
方法一:
方法二:
⑤点击频道,首页显示对应频道内容
⑥我的频道删除,推荐频道自动增加
⑦ 删除索引不关闭弹框,并且处理删除索引导致的频道高亮变化问题
⑧频道添加
⑨未登录状态,删除频道数据缓存
⑩处理首页tab栏频道数据---数据删除(登录/未登录)
⑩添加频道数据
⑩登录状态下,新增频道
九.搜索页面
1.搜索路由
2.头部搜索布局
3.搜索结果、搜索历史、搜索建议组件展示
4.搜索建议接口
5.关键词高亮
6.处理接口异常返回null的情况
7.输入关键词监听,添加防抖
自定义防抖
8.搜索结果
①输入关键词传值
②引入搜索结果列表组件——>van-list
③搜索结果数据接口请求
④处理请求搜索结果失败的提示
⑤获取搜索历史数据
十、文章详情
1.配置路由
2.请求数据
3.请求数据异常情况处理
4.富文本编辑器
5.文章图片预览
①图片预览组件
②获取所有图片
③图片预览
6.关注作者
①页面渲染
②添加多次点击的节流阀
③组件复用
④子父组件传参
利用v-model简写
7.收藏功能
①页面渲染
8.点赞文章
①页面渲染
9.文章评论
①评论接口
②获取评论数据
③处理评论列表数据
④处理评论总数打开显示
关闭v-list位置监听 、初始化时调用获取评论列表数据
10.渲染评论数据
11.评论点赞
①接口获取
②数据渲染
12.发布文章评论
①评论回复组件
②发布文章评论
③关闭弹框、增加评论总数
④评论内容置顶--兄弟组件传值
子--父
通过this.$refs.组件 获取兄弟组件实例
13.评论回复
①组件使用
②打开评论回复组件弹框
③获取当前要回复的评论数据
④评论条数
⑤设置写评论弹框
⑥回复评论置顶
十一.编辑用户资料
1.配置路由
2.渲染用户资料数据
3.设置昵称
①昵称弹框
②修改昵称
4.设置性别
①弹框设置
②设置初始性别
③设置性别--使用.sync修饰符
5.修改生日
①准备弹框
②修改生日
6.修改头像
①点击选择头像文件
②获取选择的文件信息
③文件信息弹框
④导入裁剪框---cropperjs
⑤更新头像
十二、优化需要登录才可进入的界面
1.绘制界面
2.优化思路
①思路一
②思路二
3.我的历史返回上一页
使用push跳转会有历史记录,返回到登录界面
使用replace没有历史记录问题