【前端】Angular的布局（响应式布局）笔记2

最新推荐文章于 2024-10-21 11:35:05 发布

不加糖的理想型

最新推荐文章于 2024-10-21 11:35:05 发布

阅读量1.1k

点赞数 1

文章标签： angular

本文链接：https://blog.youkuaiyun.com/weixin_43938259/article/details/105890174

版权

实现具体功能：

一、实现图片轮播+响应式布局功能

1.响应式网站参考：
https://wcccny.org/home
2. 图片轮播例子参考：
https://www.sitepoint.com/community/t/clipping-thumbnail-images-for-responsive-layout/11167
https://stackblitz.com/edit/angular-gallery-carousel-slider-dvh17w?file=src%2Fapp%2Fcarousel%2Fcarousel.component.css
https://stackoverflow.com/questions/57817112/is-it-possible-to-build-an-image-carousel-using-angular-material
https://zcts.s3.amazonaws.com/Materialize+Carousel+Mobile+with+Angular+6.mp4
3. 代码参考（最简单的一个例子）：

	.videoWrapper {
	  position: relative;
	  padding-bottom: 56.25%; /* 16:9 */
	  padding-top: 25px;
	  height: 0;
	}
	.videoWrapper iframe {
	  position: absolute;
	  top: 0;
	  left: 0;
	  width: 100%;
	  height: 100%;
	}

4.师兄给的样板项目（供参考）：
https://github.com/cli3d/my-material

使用上述代码的指令：
参考网站：

https://ng-bootstrap.github.io/#/components/carousel/examples#navigation

5. Angular 2实现轮播图：
https://blog.youkuaiyun.com/baidu_26646129/article/details/78669817?depth_1-utm_source=distribute.pc_relevant.none-task&utm_source=distribute.pc_relevant.none-task

二、实现产品栏滚动+响应式布局功能

1. 代码参考：https://github.com/cli3d/my-material
2. 参考网站：
（1）https://material.angular.io/cdk/scrolling/overview
（2）https://stackblitz.com/edit/angular-cdk-programatically-scroll?file=app%2Fcdk-virtual-scroll-fixed-buffer-example.ts
（3）https://stackoverflow.com/questions/54551205/how-to-programmatically-scroll-to-item-with-angulars-material-virtual-scroll
3. ViewChild的学习：
（1）https://blog.angular-university.io/angular-viewchild/
（2）https://www.jianshu.com/p/ac5366abfa74
（3）ViewChild出现参数问题的解决：
https://stackoverflow.com/questions/56704164/angular-viewchild-error-expected-2-arguments-but-got-1
4. Angular cdk 学习之 Scrolling：
https://blog.youkuaiyun.com/wuyuxing24/article/details/85015750?utm_medium=distribute.pc_relevant.none-task-blog-BlogCommendFromBaidu-4&depth_1-utm_source=distribute.pc_relevant.none-task-blog-BlogCommendFromBaidu-4
5. angular怎么控制滚动条：
https://www.html.cn/qa/angular-js/10644.html

三、实现弹窗的资料

主要参考：

主页导航条popup窗，购物车接口部分：
https://blog.youkuaiyun.com/weixin_43938259/article/details/105033763

其余资料：

1.如何实现一个悬浮在页面的登录注册框
https://zhidao.baidu.com/question/502412084320795044.html
2.用JS制作9种弹出小窗口(HTML)
https://blog.youkuaiyun.com/dodott/article/details/42113579?depth_1-utm_source=distribute.pc_relevant.none-task&utm_source=distribute.pc_relevant.none-task
3.弹出式登录界面
https://blog.youkuaiyun.com/weixin_42266757/article/details/80417976?depth_1-utm_source=distribute.pc_relevant.none-task&utm_source=distribute.pc_relevant.none-task
4.CSS JS点击弹出网页窗口(可用于注册账号等场景)
https://blog.youkuaiyun.com/linqunbin/article/details/92066260
5.jQuery boxy弹出层插件中文演示及讲解
https://www.zhangxinxu.com/study/200911/jQuery-plugin-boxy.html
6.jQuery实现弹出窗口中切换登录与注册表单
https://www.jb51.net/article/67282.htm
7.Angular弹出模态框的两种方式
https://www.jb51.net/article/126174.htm
8.Angular material 之 dialog 弹框实战
https://blog.youkuaiyun.com/luodong1501/article/details/100663027
9.从源码看 angular/material2 中 dialog模块的实现
https://www.jianshu.com/p/ddbf43c44805
10.动态创建angular组件实现popup弹窗
https://www.cnblogs.com/yitim/p/7525188.html

项目开发过程中参考的网站