前端仿京东、天猫底部购物工具栏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>

```

 

posted @ 2023-05-26 21:21  前端组件开发  阅读(80)  评论(0编辑  收藏  举报