Vue实际应用之无限滚动、css之、混合宏和~

目录

vue-infinite-scroll

引入工程

全局配置 

按需引入

使用方式 

属性说明

常见问题及解决方案

CSS中的&的用法

vue中，@import 后面的波浪号~ 

 scss中的混合宏

直接看使用

---

今天来点实际的，看起来简单但是给我们代码带来更好的效果，一起来看看吧！

先来介绍一个三方库

vue-infinite-scroll

‌v-infinite-scroll是Vue.js中用于实现无限滚动的指令，主要用于在页面滚动到底部时自动加载更多内容。

引入工程

npm install vue-infinite-scroll

全局配置 

import infiniteScroll from 'vue-infinite-scroll';
Vue.use(infiniteScroll);

按需引入

import infiniteScroll from 'vue-infinite-scroll';
export default {directives: {infiniteScroll}
}

使用方式 

<div v-infinite-scroll="loadMore" infinite-scroll-disabled="busy" infinite-scroll-distance="10">...
</div>

属性说明

• v-infinite-scroll：滚动到底部时加载更多数据的方法。
• infinite-scroll-disabled：是否禁用无限滚动加载，默认为false。
• infinite-scroll-delay：节流时延，单位为ms，默认值为200。
• infinite-scroll-distance：触发加载的距离阈值，单位为px，默认值为0。
• infinite-scroll-immediate：是否立即执行加载方法，以防初始状态下内容无法撑满容器，默认为true。

常见问题及解决方案

• ‌设置滚动容器的高度‌：在使用无限滚动的div中设置高度和overflow属性，以确保滚动效果正常：

<div v-infinite-scroll="load" :infinite-scroll-disabled="busy" style="height: 640px; overflow: auto;">...</div>

• ‌控制加载方法‌：使用:infinite-scroll-disabled="busy"属性来控制是否执行加载方法，避免在不需要的时候自动调用加载方法。

CSS中的&的用法

‌CSS中的&符号主要用于SCSS或Sass中，表示父选择器。‌

在SCSS或Sass中，&符号用于嵌套规则，表示当前选择器的父元素。这种用法使得代码更加简洁和易于管理。这里有篇文章写得比较全，大家可以参考

详见css样式中&的用法

vue中，@import 后面的波浪号~ 

我们常常会在vue项目中看到这样的情形：

@import '../../../../assets/css/varibles.scss'

其实可以简写为以下形式：

@import '~@/assets/css/varibles.scss'

这里的~符号。表示后面的值为 alias。

至于webpack || vite中alias的配置，大家可以查阅下相关资料。这里不是我的重点，我就不讲了~

 scss中的混合宏

@mixin和@include混合使用

直接看使用

@mixin box-shadow($x, $y, $blur, $color) {-webkit-box-shadow: $x $y $blur $color;-moz-box-shadow: $x $y $blur $color;box-shadow: $x $y $blur $color;
}

.box {@include box-shadow(0, 4px, 10px, rgba(0, 0, 0, 0.5));padding: 20px;background-color: white;
}

---

---

今天带来的是Vue串烧，在实际开发过程中很有用，相信大家也都有用过。

大家还有什么不懂得或者没见过的语法形式或是看起来奇怪的用法也可以与我留言，我会一一答复大家的！

如果觉得有收获，麻烦给个赞和关注。你的鼓励是我写作的动力，大家一起学习一起进步。