前端仿京东、天猫底部购物工具栏toolsBar、购物车栏、底部悬浮栏

快速实现 前端仿京东、天猫底部购物工具栏toolsBar、购物车栏、底部悬浮栏， 详情请访问uni-app插件市场地址：https://ext.dcloud.net.cn/plugin?id=12554

效果图如下：

 

代码如下：

# 底部工具栏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>

```