网站开发要求描述,深圳华宫建设集团网站,网页设计素材网站推荐,app开发公司图片目录
vue-infinite-scroll
引入工程
全局配置
按需引入
使用方式
属性说明
常见问题及解决方案
CSS中的的用法
vue中#xff0c;import 后面的波浪号~ scss中的混合宏
直接看使用 今天来点实际的#xff0c;看起来简单但是给我们代码带来更好的效果#x…目录
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-scrollloadMore infinite-scroll-disabledbusy infinite-scroll-distance10...
/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-scrollload :infinite-scroll-disabledbusy styleheight: 640px; overflow: auto;.../div控制加载方法使用:infinite-scroll-disabledbusy属性来控制是否执行加载方法避免在不需要的时候自动调用加载方法。
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串烧在实际开发过程中很有用相信大家也都有用过。
大家还有什么不懂得或者没见过的语法形式或是看起来奇怪的用法也可以与我留言我会一一答复大家的
如果觉得有收获麻烦给个赞和关注。你的鼓励是我写作的动力大家一起学习一起进步。
