2023年11月25日发(作者：iphone13mini尺寸)

vue实现⼩⽶官⽹

Vue实现⼩⽶官⽹

作为⼀名⽶粉，前段⼦突然想到我们能不能⽤Vue实现⼩⽶官⽹。好，有了想法，说⼲就⼲！在花了⼀个星期左右的时间，终于完⼯了。刚

开始设计整体的时候，⽤的时间⽐较少，但是后⾯不停地抠细节，耗费了将近3天的时间。

⾃⼰在查看了⼩⽶官⽹的布局以后，对于⼩⽶官⽹我们可以分为这⼏个部分进⾏设计。

中间的⼀整块商品区域，我们也单独的作为⼀部分。

最后的页⾯，分为三个部分

接下来，我们说明⼀下每个部分的实现。

第⼀部分：TopBar

我们在设计第⼀部分的时候，使⽤浮动的⽅式。左边左浮，右边右浮，因此在浮动的过程中，我们应当把购物侧的结构放在登录和注册栏的

前⾯，这样才能达到我们想要的效果。

另外，就是⼀些简单的逻辑功能了，当我们把⿏标放到"下载app"，⼆维码显⽰，离开则消失。购物车也是如此做法。当然，我们还要加⼀

个过渡效果，否则显⽰和隐藏会很快，体验很不好！

第⼆部分：TopHeader

第⼆部分，我们⼜分为两个区域。第⼀个区域就是头部，第⼆个区域就是左侧商品栏。我们把左侧商品栏设计为⼀个单独的⼦组件，在头部

使⽤li列表的时候，我们的第⼀个li放⼊的就是这个单独的⼦组件。

⼦组件中，⿏标放到相应的类型产品时，会显⽰对应的详细商品，显⽰出来的盒⼦采⽤绝对定位。由于需要的数据太多，获取太⿇烦，我们

只复制粘贴了⼏个商品的数据。

当我们把⿏标放到头部区域的时候，显⽰相应的产品，显⽰出来的盒⼦同样采⽤绝对定位。"服务"、"社区"这两个地⽅不显⽰产品。

点击搜索框，会出现相应的搜索词，点击别处，搜索词消失。但是呢？这⾥有个⼩bug，功能还未完善，后⾯我们会讲。

第三部分：Banner

这⼀部分就是轮播图区域。

这⾥，我们把轮播图封装起来，需要的时候我们再把轮播图组件引⼊到Banner组件中。

这设计轮播图组件时，我们设计了三种轮播图组件。这三种轮播图组件只要传递相应的信息，即可使⽤，⽆须修改。

第⼀种轮播图

这个轮播图实现的功能是最完善的，具有左右按钮功能、下⽅⼩点功能（配备相应颜⾊变化）、定时器功能、定时器暂时和开启功能等等。

它的主要实现是依靠原⽣js的动画函数实现，我们把轮播图区域设计为⼀个ul，运动的实际就是平移ul，因此达到轮播功能。具体实现可以

查看源码，这⾥不便陈述。

但是呢，这⾥还有⼀个⼩⼩的bug。原先我使⽤js写这个轮播图的时候是没有的，现在把这个轮播图通过vue实现就产⽣了，因为时间原因，

懒得去修改了，后⾯有时间再去搞⼀下。这个bug后⾯会讲。

// 动画函数

animate(obj,target,callback){

clearInterval();

= setInterval(function (){

var step = (target - Left)/10;

step = step >0?(step):(step);

if (Left === target){

clearInterval()

callback && callback();

}

= Left +step +"px";

},15);

},

第⼆种轮播图

第⼆种轮播图⽬前仅仅只有左右播放功能，它的设计思想和逻辑都很简单，就是直接切换数据内的数据，和第⼀种轮播图的设计思想和结构

完全不同。

第三种轮播图

第三种轮播图使⽤的技术最简单，仅仅是HTML+CSS。它没有左右按钮功能，只有⼩圆点跳转轮播功能，但相⽐第⼆种轮播图，它有⼀个

动画过渡的过程，体验更好。

相⽐较与第⼀种轮播图，其设计思想也是依靠平移。但它的平移对象是某⼀张图，指定某⼀幅图平移，那么另外其他图也会跟着平移。

平移核⼼CSS代码

#r0:checked ~ .s1{

margin-left: 0;

}

#r1:checked ~ .s1{

margin-left: -20%;

}

#r2:checked ~ .s1{

margin-left: -40%;

}

#r3:checked ~ .s1{

margin-left: -60%;

}

#r4:checked ~ .s1{

margin-left: -80%;

}

第四部分：TopSub

第四部分的设计和⼩⽶官⽹⼀样，通过浮动左右两个盒⼦实现

第五部分：ToolBar

在设置⼯具栏的时候，我们采⽤的是fixed定位。

当下拉到⼀定距离，我们让“回到顶部”显⽰出来，否则隐藏起来。在这⾥，我们在钩⼦函数中需要对“scroll”进⾏监听。

// 对scroll进⾏监听

在⼩⽶官⽹有很多这种结构，因此我们要在这⾥设计⼀种结构，它们都是由三个部分组成。

在中间盒⼦部分，我们⼜可以看到⾥⾯有很多种类型的盒⼦。因此，我们⼜可以创建相应的⼦组件实现我们的功能。

我们创建五个不同类型的⼦组件盒⼦实现我们的功能。

⼩⽶官⽹上很多都是这种结构，到后⾯我们直接引⼊组件即可使⽤。因此，我也做很多这个结构。下图是⼩⽶官⽹的截图：

……

第七部分：Video

视频部分，我们将每个视频设计成⼦组件盒⼦。

当点击视频时，会出现相应视频播放。这⾥我们在视频⼦组件中⼜定义⼀个⼦组件，通过点击这个⼦组件播放相应的视频。那么问题来了，

我们得把数据从Video传到VideoBox，再冲VideoBox传到VideoPlay。设计这⾥的时候，真的有点被这个数据传递绕晕了。

还有最坑的⼀点是，也许是使⽤版本问题引发的。我之前从来没有在vue中适⽤过video，因此我去百度，百度上很多⼈给的是这段

代码

也许是版本问题，autoplay: "muted",这⼀句语句是不能⽤的。我把这句语句删了才得以实现视频播放。

这⾥耗费了我将近⼀个半⼩时的时间，实现视频播放功能的时候，忍不住⼝吐芬芳，卧槽，去你⼤爷的！。真的是，这⾥太坑了！

第⼋部分：FooterBox

这⼀部分，我们由分为上下两个部分。

下半部份的数据中，我们使⽤双重v-for循环实现遍历，即在数组⾥⾯我们⼜嵌套数组。

下半部分，我们⽤到了浮动的布局，因此在清除浮动的时候我们使⽤双伪元素清除浮动的办法。⼩⽶官⽹也是如此实现的。

第九部分：SiteInfoBox

最后⼀部分很常规。

但是呢，我发现⼩⽶官⽹的安全验证图⽚根据⽹络环境是实时变化的，这⼀点需要的技术⾼级了，我不配（捂脸），因此也就没有理会这部

分。

存在Bug和不⾜

最后呢？我们再说说我们做出来的⽹页存在的不⾜和bug。

第⼀

当我们⿏标移动到某些字体上时，字体图标和⽂字颜⾊使⽤伪类应当是⼀起变颜⾊。但是我们没有办法实现这个功能，这个功能应该和sass

⾥⾯的选择器嵌套选择器相关的语法有关，但是我没有学习和了解过sass，因此没有实现。

第⼆

我第⼀次在vue⾥⾯使⽤动画和过渡，在过渡的过程中，⾥⾯的数据不会随过渡元素⼀样有个渐变的过程，⽽是⽴即消失和⽴即出现，这⼀

点体验不是很好。下图是等过渡元素完全消失，数据才会消失，现在过渡元素还没有消失完全，因此数据还没有消失。

第三

轮播图功能中，我们把⿏标移动到相应的⼩点上时，其应该有⼀个伪类，颜⾊会变红。但是呢，我们使⽤vue以后，也许是轮播图设计的不

合理，vue⾥⾯的⽅法和钩⼦函数会把伪类元素的影响覆盖掉。即轮播图⼀旦开始运转，伪类会失效，我们⿏标移动到相应的⼩点上，⼩点

不变⾊。

第四

在搜索框内，当出现搜索词列表的时候，点击搜索词应该是可以跳转到相应链接的。但是由于我们对搜索框使⽤了blur事件，所以在⿏标再

次点击以后，搜索词列表消失，没有实现链接跳转功能。

另外，⼩⽶官⽹上的搜索框的搜索词是会变换的，这个功能我们没有实现。