分布式电商项目（2）

2023-03-16 01:53| 来源: 网络整理| 查看: 265

文章目录vue中组件不显示问题通用组件封装的技巧代码管理技巧布局技巧betterScroll的一个小bugvue的ref和$ref的区别vue如何调试参考文章

vue中组件不显示问题

我的代码如下：在这里插入图片描述然后在首页展示，却发现图片不显示细细观察发现，原来图片是包裹在a标签里面，而标签我用的是 :href,而不是href，这样里面的链接是错误的，所以整个a标签的判断就是错的，vue里面标签的属性是错的，整个组件就不会显示。所以这里把：href 改成正确的href就可以了

通用组件封装的技巧

如果组件里面的元素比较复杂多样，那么通用的组件就选择插槽来实现如果组件里面的元素只有单个元素不一样，如文字，那么通用的组件就不需要用插槽了，反而复杂

代码管理技巧

在这里插入图片描述

布局技巧

选项卡滑动到某个位置实现悬停效果可以在首页中使用 .tab-control{position:sticky; top:44px}实现选项卡的悬停效果，sticky达到某个值时浏览器会根据top:44px决定改组件的position是sticky还是fix

/* 可以在首页中使用 .tab-control{position:sticky; top:44px}实现选项卡的悬停效果，sticky达到某个值时浏览器会根据top:44px决定改组件的position是sticky还是fix*/.tab-control {display: flex;text-align: center;line-height: 40px;font-size: 15px;/*让状态条不被覆盖*/background-color: #fff;z-index: 9;}

在这里插入图片描述

父组件向子组件传数据用prop，子组件向父组件发消息或数据用emit@click是语法糖，相当于v-on: 它是起监听作用的 {{item}}

使用原生实现滚动：(浏览器中可以流畅运行，在移动端就会出现卡顿现象)

/* hi*/.content{height: 150px;background-color: red;overflow: hidden;overflow-y: scroll;}

使用better-scroll解决丝滑滚动： cnpm install better-scroll --save

created还没有绑定组件，因此拿不到组件里面的任何东西就this是null或者undefined。所以我们只能在mounted挂载好之后才能取到this的值。mounted(){console.log(this)---------这里打印是有内容的。} created（）{console.log(this)---------这里打印是null或者undefined。}

better-scroll的使用小案例

import BScroll from "better-scroll" export default{name:"test",data(){return {scroll:null}},mounted(){//这里因为后面还需要用到该滚动对象，所以需要用一个引用指向它，避免函数运行完后它被垃圾回收//允许上拉刷新和时刻都监听滚动this.scroll=new BScroll(document.querySelector('.wrapper'),{ probeType:3,click:true,pullUpLoad:true})}//监听滚动的位置this.scroll.on('scroll',(position)=>{console.log(position)}) }.wrapper{height: 150px;background-color: red;overflow: hidden;overflow-y: scroll;}

【本文地址】

公司简介

联系我们