头部导航栏
先加载页面初始化数据,再写页面
1.安装axios
-
项目目录hnpro执行安装
cnpm install axios
安装成功[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-9jKA0u54-1654715263305)(C:\Users\lyf12\AppData\Roaming\Typora\typora-user-images\image-20220609010030679.png)]
-
在main.js中导入组件
import axios from 'axios'
-
在当前的vue对象当中添加axios属性
Vue.prototype.$axios = axios
后续使用直接使用$axios
2.加载初始化数据
-
在goodsView的js中添的methods添加获取数据方法getGoods(){}
-
参数1:methods:请求的方式为拿数据:GET
-
参数2:请求的地址:data.json(模拟的json数据)
- 将我们的data.json数据文件复制到public文件夹中
-
请求数据后
- 如果请求成功,进入.then(res => {}),(json数据会被完全封装在res这里)
- 打印console.log(res)
- 如果请求错误,进入catch(error => {})
getGoods() { //通过axios发送请求 this.$axios({ methods: 'GET', url: '../../data.json' }).then(res => { // 如果请求成功,走这里(json数据会被完全封装在res这里) console.log(res) }).catch(error => { // 如果请求错误,走这里 }) }
- 如果请求成功,进入.then(res => {}),(json数据会被完全封装在res这里)
-
在methods前面创建生命周期函数created(){}
- 调用getGoods()方法,访问相关内容
created() { //声明周期函数 this.getGoods() }, methods: {}
-
数据请求成功,并且在控制台打印
-
3.拿取数据
-
在data的return中声明要拿取得数据的名字及类型
export default { data() { return { goods: [], seller: {} } } }
-
返回数据goods和seller
getGoods() { //通过axios发送请求 this.$axios({ methods: 'GET', url: '../../data.json' }).then(res => { // 如果请求成功,走这里(json数据会被完全封装在res这里) console.log(res) this.goods = res.data.goods this.seller = res.data.seller }).catch(error => { // // 如果请求错误,走这里 }) }
3.将子组件所需要的数据seller传递到子组件中
-
绑定一个seller,将seller数据传递到子组件HeadView中
<HeaderView :seller="seller"></HeaderView>
-
在子组件中JS中用props方法,拿到全局数据的属性名和类型
- (props:父组件向子组件传参 通过属性传参)
export default { props: { seller: Object } }
-
在需要数据的模块,绑定相关数据 seller.avatar
<img class="avatar" :src="seller.avatar" alt="">
-
获取其他所需数据,方法同上一致
-
头部菜单栏
1.头部子组件跳转到父组件
-
to=“/”:为主页面
<router-link to="/">商品</router-link> <router-link to="/rating">评价</router-link>
-
为新组件进行路由注册(例如:rating)
-
在router的index.js中添加引入
import GoodsView from '../views/GoodsView.vue' import RatingView from '../views/RatingView.vue'
-
组件注册
{ path: '/rating', name: '/rating', component: RatingView }
-
2.点击改变字体颜色
-
不常见CSS样式
-
每个元素中间距离相等,两边各为一半
justify-content: space-around;
-
-
绑定属性值,当满足点击条件,则执行对应样式
-
给每个页面添加唯一的标识符 (比如GoodsView页面为1,RatingView为2)
return { goods: [], seller: {}, tabIndex: 1 }
-
在组件GoodsView中将唯一标识tabIndex传给组件,通过绑定属性:tabIndex=“tabIndex”
<HeaderView :seller="seller" :tabIndex="tabIndex"></HeaderView>
-
在接收的组件中接收其属性名和类型:tabIndex:Number
props:{ seller: Object, tabIndex:Number }
-
执行绑定属性,并加上相关样式
<div class="tab-item" :class="tabIndex == 1 ? 'active' : '' "> <router-link to="/">商品</router-link> </div> .active a{ color: rgb(240,20,20); text-decoration: none; }
-
左侧菜单栏
1.页面布局分析,拿取数据
-
目录结构
- 菜单导航:menu-wrapper
- 菜单:menu
- 菜单的每个按钮:menu-item
- 每个菜单的文本:menu-text
- 菜单的每个按钮:menu-item
- 菜单:menu
<div class="menu-wrapper" ref="menuWrapper"> <div class="menu"> <div class="menu-item" v-for="(item,index) in goods" :key="index" :class="currentIndex == index? 'current':''"> <span class="menu-text">{{item.name}}</span> </div> </div> </div>
- 菜单导航:menu-wrapper
-
拿到每个menu-item值,需要循环从data.json拿取
-
在ment-item中用v-for循环拿取item,同时设置唯一一个key值index
- key值作用:优化循环遍历过程中dom渲染的效率
<div class="menu-item" v-for="(item,index) in goods" :key="index" >
-
拿取name值
<span class="menu-text">{{item.name}}</span>
-
2.滑动插件
-
分析
- 条件:子盒子比父盒子高
- menu-wrapper:父盒子(设置属性值:overflow: hidden; //超出父盒子的部分隐藏)
- menu-item:子盒子
- 条件:子盒子比父盒子高
-
在项目目录下安装插件
-
cnpm install better-scroll --save
-
-
在对应的地方声明插件
-
在GoodsView的JS中导入
import MenuScroll from 'better-scroll'
-
-
使用插件
-
// 参数一:代表滚动的dom结点 document.geteLement
// 通过$refs来获取dom结点
-
给要滚动的div添加 ref 属性
<div class="menu-wrapper" ref="menuWrapper">
-
// 参数二:滚动的基础配置项(此处暂时不做)
initScroll(){ this.menuScroll =new MenuScroll(this.$refs.menuWrapper,{}); }
4.等页面的dom全部渲染完成以后执行以下代码
-
在axios获取数据后,写以下代码
this.$nextTick(() => { this.initScroll() })
-
-