格美家具网站项目总结

最新推荐文章于 2023-04-03 20:36:21 发布

置二

最新推荐文章于 2023-04-03 20:36:21 发布

阅读量854

点赞数

CC 4.0 BY-SA版权

分类专栏：【项目总结】文章标签：项目总结 web

本文链接：https://blog.youkuaiyun.com/weixin_42675488/article/details/83052442

【项目总结】专栏收录该内容

3 篇文章

订阅专栏

在927-1013格美家具网站项目中，解决了Swiper缩略图控制问题，优化了bootstrap栅格系统，提高了pc端与手机端的兼容性，使用AOS插件增强用户体验，改进了class命名规范，并通过jq实现导航栏显隐控制。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在这次 927-1013 格美网站项目中：

1、html结构、cass类的用法、基础不够扎实，还需要多看 bootstrap 文档、swiper文档！
2、不够细心，检查时有漏掉的地方! 还需要仔仔细细的。

网站项目遇到的问题：

1、在Swiper文档中用到的【缩略图控制 / Swiper互相控制(300)】，遇到了一些问题，其310是有bug存在的，在项目中耗了些时间。

2、bootstrap 的栅格系统嵌套得过多，尽量要简洁结构。

3、pc端与手机端的兼容性也是个重点。虽然bootstrap的栅格系统已经处理得很好，但在细节上还是可以处理得更好些。

4、用 jq 做按钮返回顶部，用js写距离控制导航栏的显隐。地址：js控制元素的显示/隐藏

5、项目中用到AOS插件，用来控制元素在鼠标滚轮时的滑动效果，挺好用的。但最好是用js控制，地址：AOS插件

aos.init({
   disable: 'mobile',
   easing: 'ease-out-back',   // 动画的过度效果
   initClassName: 'aos-init', // class applied after initialization
   animatedClassName: 'aos-animate', // class applied on animation
   delay: 1300,  //延时时间，毫秒计算
   once: false,
   mirror: false,
});


<h2 class="font-wg font-yellow" data-aos="fade-left" data-aos-duration="700">材质 · 分类</h2>
<img src="/assets/img/gemei/icon-rock-hd02.png" class="img"
	  data-aos="fade-right" data-aos-duration="600" data-aos-delay="500" >

6、class的命名方式要更加严谨，可参考站酷的命名方式；

7、通过jq控制添加类名的方法进行样式改变；地址：jq两栏切换添加类名

swiper 300用法：

    var galleryTop = new Swiper('#g-swiper-news .gallery-top', {
        spaceBetween: 10,  //间距
    });
    var galleryThumbs = new Swiper('#g-swiper-news .gallery-thumbs', {
        spaceBetween: 0,
        centeredSlides: true,
        slidesPerView: 2,  //几栏显示，文档里有一个在手机屏时显示几栏的方法
        touchRatio: 0.2,
        slideToClickedSlide: true
    });
    /* 与文档的不同点 */
    galleryTop.params.control = galleryThumbs;
    galleryThumbs.params.control = galleryTop;