更新记录

1.0.0.p8.1（2020-12-24）

1.0.0.p8.1 更新说明：

• 解决order/create页面在APP端，map组件层级过高遮挡header的问题（使用subNVue）。

1.0.0.p8（2020-12-23）

1.0.0.p8 更新说明：

• 新增页面：order/create、order/payresult。

1.0.0.p6.1（2020-12-21）

1.0.0.p6.1 更新说明：

• 修复：shoppingcart页面在iOS上，右上角图标消失的问题；
• 修复：tab在可左右滑动的情况时，底部tabbar未随着左右滑动切换而改变的问题；
• 新增：goods页加入购物车的小球飞入动画。

平台兼容性

EXPLAIN-MALL

explain 前端模板，电商项目商城模板。

加入QQ群：970799055，欢迎来催更咯。

特点

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

已完成页面

• 首页 /pages/tab/index.vue
• 搜索&分类 /pages/tab/search.vue
• 购物车 /pages/tab/shoppingcart.vue
• 我的 /pages/tab/my.vue
• 商品详情 /pages/goods/goods.vue
• 收藏 /pages/favorite/favorite.vue
• 创建订单 /pages/order/create.vue
• 支付结果 /pages/order/payresult.vue

tabBar配置

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

tabList属性说明

示例

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对应的名称即可完成主题切换。