# celery-shop-frontend

**Repository Path**: llqcai/celery-shop-frontend

## Basic Information

- **Project Name**: celery-shop-frontend
- **Description**: description：独立站移动端
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 2
- **Created**: 2022-04-02
- **Last Updated**: 2024-11-02

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# EXPLAIN-MALL

[explain](https://ext.dcloud.net.cn/plugin?id=3312) 前端模板，电商项目商城模板。

加入QQ群：[970799055](https://jq.qq.com/?_wv=1027&k=KFkDL5gp)。

## 特点
* 较完美的自定义tabBar底部导航示例；
* tab切换不闪屏；
* tab切换返回后还将保留原页面数据，保持原滚动位置，而不是重新加载组件;
* tab已实现`load`页面加载、`show`页面显示、`hide`页面隐藏、`scroll`页面滚动等生命周期与事件；
* tab上拉加载示例；
* `H5`tab切换后自动改变地址栏，刷新浏览器还将停留在当前页面而不是回到第一个tab页面；
* 主题样式切换，换肤功能，可自由扩展；
* 已导入uView；
* 已导入Remix Icon图标库。

## tabBar配置
根目录下找到config.js，配置以下属性

|属性名称|类型|说明|
|-- |- -|-- |
|tabPath|String|tab基础页面路径|
|tabList|Array|tab页面集合|

### tabList属性说明
|属性名称|类型|说明|
|-- |- -|-- |
|name|String|tab的名称，切换tab时会用到它|
|text|String|在底部导航中显示的文本|
|icon|String|在底部导航中显示的图标|

#### 示例
```javascript
let config = {
	clientId: 'explain_mall',
	tabPath: 'pages/tab/tab',
	tabList: [{
		name: 'index',
		text: '首页',
		icon: 'ri-home-line'
	}, {
		name: 'search',
		text: '搜索',
		icon: 'ri-search-line'
	}, {
		name: 'shoppingcart',
		text: '购物车',
		icon: 'ri-shopping-cart-line'
	}, {
		name: 'my',
		text: '我的',
		icon: 'ri-user-3-line'
	}]
}
```

## 全局方法
### $switchTab(tabName)
切换tab页面

### $switchTheme(themeName)
切换主题样式

## 主题扩展
先制作主题样式，在common目录下的css目录中复制一份`theme-dark.scss`。修改`$ex-mall-theme-name`为任意主题名称，改变样式中的值即可。

然后在`App.vue`中引入主题样式文件，调用全局方法`$switchTheme`，传入先前制作的主题样式文件中`$ex-mall-theme-name`对应的名称即可完成主题切换。