小程序开发之小米商城Lite

刚接触小程序不久，感觉相对来说比较简单，就自己花了五六天做了一个项目，因为本身也是米粉，就看中了小米的微信小程序(可怜国庆撸了几天的代码，哈哈)，话不多说，先上效果图吧。
算了算了。本来还打算上gif图，但是太难搞了，说明一下吧。要看效果的等下我贴出项目github地址来，自己去看吧

1. 项目模块

整个项目大致分为首页，分类，发现，购物车，我的五个模块，其实就是底部导航条的五块，

1）首页

首页的重点也就是一个轮播图，然后一个全局的底部导航条，其实微信小程序都给我们提供的组件。像轮播图组件 swiper-item,然后底部导航条在app.json中设置tabBar都可以实现，前面我还在纠结自己如何实现一个底部导航条，然后后面各种纠结，其实就简简单单的配置就行，所以说文档很重要。贴一张首页图吧
在这里插入图片描述

2）分类

分类这一个模块，其实是挺让我难下手的，先给张图你就明白了
在这里插入图片描述
看上面图就知道，第一个是数据的问题，对于一个学前端的人来讲，数据是非常重要的，因为前端人员就是要对后台提供的数据，以各种形式，各种界面来显示，让用户更好的去使用，去体验，所以摆在我前面的第一个问题就是我没有数据，然后第二个问题，布局问题，我侧导航条可以自己移动，右边也可以自己移动，互不干扰，然后我琢磨了一段时间，将左边侧导航栏设置为positoin:absolute；脱离文档流，再加上overflow:scroll；就可以了，然后::-webkit-scrollbar{display:none;}把滚动条样式去除，就都实现了，做出来之后满足感爆棚，然后第一个问题我新建了一个js文件，在里面造json数据，这个json数据挺复杂了，太多括号，就不贴出来了，然后再使用小程序提供的模板template组件循坏放入，这个时候，难点又出现了，因为小程序对于循坏渲染的例子太单一而且简单，就只有对单一josn的渲染，什么是单一的json，就比如：

[
    {
       name:'张三'，
       age:24
    },
    {
      name:’李四'，
       age:23
    }
]

这种就是单一的json，就一层

[
    {
       name:'张三'，
       age:24,
       interest:
       [
               { sports:'足球'},
               { sports:'篮球'}
      ]
    },
    {
      name:’李四'，
       age:23，
        interest:
       [
               { sports:'足球'},
               { sports:'篮球'}
      ]
    }
]

差不多就这个意思，多层的在文档中是没有说明的。

<view style='padding-top:10rpx;' wx:for='{
   {list}}' wx:key='{
   {index}}' id='nav-{
   {index}}'  wx:for-item="itemName">
    <view  wx:for='{
   {itemName.content}}'  wx:key='{
   {index}}'>
        <template is='categoryItem'  data='{
   {...item}}'></template>
    </view>
</view>

纠结了好久，传入了模版，我这里循坏了两次，去获得里面的值，详细看json数据结果，反正意思就是不断去调试，循坏一次，只能获得第一层的数据，循环了两次，获得第二层的，加入你说我只循环一次，然后通过点（.）去吧数据点出来，这是不可能的，我试过了。
然后布局都出来了，又碰到了怎么锚点滑动，然后搞了好久，发现小程序有这个东西，通过scroll-view组件里面的scroll-into-view的属性，然后通过设置id，绑定

<scroll-view scroll-y="true" style='height:100%' scroll-with-animation="true" scroll-into-view='{
   {toview}}' >
    <view style='padding-top:10rpx;' wx:for='{
   {list}}' wx:key='{
   {index}}' id='nav-{
   {index}}'  wx:for-item="itemName">
        <view  wx:for='{
   {itemName.content}}'  wx:key='{
   {index}}'>
            <template is='categoryItem'  data='{
   {...item}}'></template>
        </view>
    </view>
</scroll-view >