vue uni-app 仿京东、天猫底部购物工具栏、购物车栏、底部悬浮栏

随着技术的发展，开发的复杂度也越来越高，传统开发方式将一个系统做成了整块应用，经常出现的情况就是一个小小的改动或者一个小功能的增加可能会引起整体逻辑的修改，造成牵一发而动全身。通过组件化开发，可以有效实现单独开发，单独维护，而且他们之间可以随意的进行组合。大大提升开发效率低，降低维护成本。

 

组件化对于任何一个业务场景复杂的前端应用以及经过多次迭代之后的产品来说都是必经之路。组件化要做的不仅仅是表面上看到的模块拆分解耦，其背后还有很多工作来支撑组件化的进行，例如结合业务特性的模块拆分策略、模块间的交互方式和构建系统等等 。

 

本文给大家介绍的一款组件是：

前端Vue和uni-app快速实现一个仿京东、天猫底部购物工具栏、购物车栏、底部悬浮栏的效果。

 效果图如下：

 

## HTML代码部分

首先，我们需要在HTML模板中引入组件并进行布局。在`<template>`标签中添加以下代码：

```html
<template>
  <view class="content">
    <!-- isCollect:是否收储  @collectClick:收藏事件 @leftClick:左按钮事件 @rigClick:右按钮事件-->
    <bottomToolBar :isCollect="collectStatus" @collectClick="goCollect" @leftClick="leftClick" @rigClick="rigClick"></bottomToolBar>
  </view>
</template>
```

接下来，在页面的逻辑部分(如methods),可以定义点击事件的处理函数。例如：

```javascript
methods: {
  goCollect() { // 点击收藏按钮的处理函数
    console.log('点击收藏按钮'); // 在控制台输出日志信息，可以根据实际需求进行修改
  },
  leftClick() { // 点击左侧按钮的处理函数
    console.log('点击左侧按钮'); // 在控制台输出日志信息，可以根据实际需求进行修改
  },
  rigClick() { // 点击右侧按钮的处理函数
    console.log('点击右侧按钮'); // 在控制台输出日志信息，可以根据实际需求进行修改
}
}
```

然后，在CSS部分，可以对页面进行样式设置。在`<style>`标签中添加以下代码：

```css
<style>
.content {
 display: flex;
 flex-direction: column;
 align-items: center;
 justify-content: center;
}
</style>
```

以上就是根据给定内容生成的博客文章。通过使用Vue和Uni-app,我们可以快速实现一个仿京东、天猫底部购物工具栏、购物车栏、底部悬浮栏的效果。希望这篇文章对你有所帮助！

 

代码如下：

# 底部工具栏toolsBar、购物车栏、底部悬浮栏

#### HTML代码部分

```html

<template>

<view class="content">

<!-- isCollect：是否收储  @collectClick：收藏事件 @leftClick：左按钮事件 @rigClick：右按钮事件-->

<bottomToolBar :isCollect="collectStatus" @collectClick="goCollect" @leftClick="leftClick" @rigClick="rigClick">

</bottomToolBar>

</view>

</template>

```

#### JS代码 （引入组件 填充数据）

<script>

import bottomToolBar from '../../components/bottomToolBar/bottomToolBar.vue'

export default {

components: {

bottomToolBar

},

data() {

return {

title: 'Hello',

collectStatus: false

}

},

onLoad() {

},

methods: {

goCollect() {

this.collectStatus = !this.collectStatus;

console.log('collectStatus = ' + this.collectStatus);

console.log('点击收藏按钮')

},

leftClick() {

console.log('点击左侧按钮')

},

rigClick() {

console.log('点击右侧按钮')

},

}

}

</script>

```

#### CSS

<style>

.content {

display: flex;

flex-direction: column;

align-items: center;

justify-content: center;

}

</style>

```

阅读全文下载完整代码请关注微信公众号： 前端组件开发