中级前端面试题，微信小程序实战（仿小米商城，面试前端系统架构

line-height: 40rpx;

content: “立减”;

font-size: 9pt;

color: #fff;

text-align: center;

background: #ec6055;

}

逻辑分析：

首页只是些商品，所以逻辑层只要根据每个商品的id来跳到对应商品的详情页即可，很显然这个方法在多个页面都要使用的，所以使用模块化思想，创建一个modules文件夹，把方法写在单独的js文件里，并向外输出

const showDetail=(e)=>{

const id=e.currentTarget.dataset.pid; //获取每个商品的id

wx.navigateTo({

url: /pages/goods/show?id=${id}

})

};

export default showDetail;

哪里要使用，就用import引入

import showDetail from “…/…/modules/showDetail”;

二、商品分类页

页面结构分析：

商品分类页分为左侧的商品分类菜单和右边的商品分类展示区，

用两个scroll-view就可以了，左右两边都设置scroll-y让它们垂直方向滚动，此外，scroll-view还有一个scroll-into-view属性能让我们实现类似a标签的锚点功能，scroll-into-view的值是某个子元素的id，但是此处有一个小坑，这个id不能以数字开头

当时查了一下文档就开做了，于是乎给左侧菜单取了些数字id，现在想起来当时我太自以为然了 ，此外如果内容太多，是会产生滚动条的，如图：

这样看起来也太丑了。。

**解决办法：给全局样式加入下面的样式

//隐藏滚动条

::-webkit-scrollbar{

height: 0;

width: 0;

color: transparent;

}

嗯，beautiful ！！

商品分类功能

逻辑分析：给页面注册个curIndex(当前选中菜单的下标)，如果当前下标和选中的菜单下标相同，则处于激活状态

部分代码：

wxml：

<view class=“cate-nav-list” wx:for=“{ {cate_nav_list}}” wx:key=“{ {item.id}}” data-id=“{ {item.id}}” data-index=“{ {index}}”

bindtap=“switchCategory”>

{ {item.name}}

{ {item.cate_name}}

{ {cateList.item_name}}

js:

const app=getApp();

Page({

/**

• 页面的初始数据

*/

data: {

cate_nav_list:[

{name:“新品”,id:“new”},

{name:“手机”,id:“phone”},

{name:“电视”,id:“tv”},

{name:“电脑”,id:“laptop”},

{name:“家电”,id:“appliance”},

{name:“路由”,id:“router”},

{name:“智能”,id:“smart”},

{name:“儿童”,id:“kids”},

{name:“灯具