学习 VUE 笔记 05 – 组件中使用 sass 和 swiper

cd 到项目根目录
npm install sass-loader node-sass style-loader sass-resources-loader --save-dev

打开组件文件 banner.vue

<style scoped="" lang="scss">
	@function torem($px) {
		@return $px * 1.6 / 100px * 1rem;
	}
	.swiper-container {
		width: 100%;
		height: torem(420px);
		background-color: #f8f8f8;
	}
</style>

torem(420px)是个人习惯,将 px 转成 rem。
为了方便,不用在每一个组件中都写 @function 那个函数,可以将这个函数单独提出来,放到一个 base.scss 文件中,然后需要的地方用 @import "base.scss的路径"; 来引入该文件。例如:

<style scoped="" lang="scss">
	@import "../../../assets/base.scss";
	.swiper-container {
		width: 100%;
		height: torem(420px);
		background-color: #f8f8f8;
	}
</style>

关于 swiper 在 vue 中的使用,引入文件要在 index.html 中进行,相关的 js 也要写在 index.html 中或者另外开个文件,如下

<script>
	$(document).ready(function() {
		var banner = new Swiper('.banner',{
			autoplay: true,
			loop: true,
			observer: true,
			observeParents: true,
		});
	});
</script>

其中observer: true,observeParents: true,是关键,否则会出现无法滑动的情况。具体看 swiper 官网示例

发表评论

电子邮件地址不会被公开。 必填项已用*标注