小米商城uni-app第二天


1、主要内容

搭建分类页主要内容,在后端书写接口时,使用数组方法整理数据

2、在服务器上整理数据

 #### 问题1:数据深层内部使用map映射不全

解决:可以map后,对新数组重新遍历forEach,再分别拿到里面的数组再次进行map映射,其中category_list数组里面有需要的数组,以及对象,是需要在遍历过程内部进行map的,map方法一定要有返回值,因为第一个参数是一个callback, return 的表达式表示原数组每一项 映射到新数组需要执行的操作

3、静态页面遇到问题及解决方案

3.1 页面结构分布

头部搜索框占一个单独区域,下面分为左侧导航栏区域和右侧导航栏对应商品列表展示区域,可以作为一整个区域分为左右两侧,左侧,右侧注意分别一个scroll-view 。

问题1:scroll-view 滚动条的隐藏

属于scroll-view的子项!!

             ::-webkit-scrollbar {
   
  }

或者查看小程序官网scroll-view 的配置项使用,须搭配show-scrollbar="false" enhanced="true"使用

问题2 :scroll-view底部留白

由于内容结构样式不一样,所以将右侧数据分为两个组件,当数据展示后,底部会留白,虽然给了高,这是因为作为组件引进去之后,主页面中右侧高度也是需要给的

解决:给主页面高度

问题3:右边头部navlist选择性显示

由于左侧导航栏有的商品数据是没有右边头部title的,所以得选择性显示

解决:给左侧导航栏添加点击事件,并拿到当前项,将id拿到,再根据id计算出当前项的title数组,使用v-show,展示条件是title数组的length,不成立代表不存在title信息

4、总进度

剩下详情页、购物车、个人中心

相关