本期主要是在今日推荐的Div下实现对应的九宫格栏目分类导航。

期望效果

image.png

关于九宫格的布局，再实现的过程中遇到的问题点主要是<img src 属性的动态的绑定的问题，静态写死图片路径没问题：

  <img src="../../static/icon/icon_1.png"/>

上述的可以正常的显示出图片的地址
但是到动态的绑定的时候：

 badge2: {
                    icon: ['../../static/icon/icon_1.png', '../assets/icon/icon_2.png', '../assets/icon/icon_3.png',
                        '../assets/icon/icon_4.png', '../assets/icon/icon_5.png','../assets/icon/icon_6.png',
                        '../assets/icon/icon_7.png', '../assets/icon/icon_10.png'],
                    title: ['鞋包馆', '运动馆', '母婴馆', '超市', '女装馆', '美妆馆', '男装馆', '更多'],
                },

执行绑定的时候：

  <!--九宫格栏目图-->
                                <van-row class="col-2">
                                    <van-col class="row-2" span="6" v-for="(v,index) in badge.icon" :key='v.id'>
                                        <a href="#">
                                            <img :src="badge.icon[index]"/>
                                            <span>{{badge.title[index]}}</span>
                                        </a>
                                    </van-col>
                                </van-row>

效果是：

image.png

这里直接的图片无法显示出来，但是看请求是请求成功的，返会了200.

image.png

后来百度之后，才记起来关于require的说法，最终需要修改对应的图片来源为：

  badge: {
                    icon: [require('../../static/icon/icon_1.png'), require('../assets/icon/icon_2.png'), require('../assets/icon/icon_3.png'),
                        require('../assets/icon/icon_4.png'), require('../assets/icon/icon_5.png'), require('../assets/icon/icon_6.png'),
                        require('../assets/icon/icon_7.png'), require('../assets/icon/icon_10.png')],
                    title: ['鞋包馆', '运动馆', '母婴馆', '超市', '女装馆', '美妆馆', '男装馆', '更多'],
                },

最终才正常的显示：

image.png

最终实现的流程为：

1：添加数据来源，动态绑定的图片来源

  badge: {
                    icon: [require('../../static/icon/icon_1.png'), require('../assets/icon/icon_2.png'), require('../assets/icon/icon_3.png'),
                        require('../assets/icon/icon_4.png'), require('../assets/icon/icon_5.png'), require('../assets/icon/icon_6.png'),
                        require('../assets/icon/icon_7.png'), require('../assets/icon/icon_10.png')],
                    title: ['鞋包馆', '运动馆', '母婴馆', '超市', '女装馆', '美妆馆', '男装馆', '更多'],
                },

2：增加相关布局，按24栅格布局，每个栅格占6.

  <!--九宫格栏目图-->
                                <van-row class="col-2">
                                    <van-col class="row-2" span="6" v-for="(v,index) in badge.icon" :key='v.id'>
                                        <a href="#">
                                            <img :src="badge.icon[index]"/>
                                            <span>{{badge.title[index]}}</span>
                                        </a>
                                    </van-col>
                                </van-row>

3：增加对应的样式 (其中需要注意关于元素居中显示的问题，需要注意 .row-2的 text-align: center;

)

  .col-2 {
    background-color: white;

    h4 {
      font-size: @fonts;
      margin-top: 30px;
      color: black;
      font-weight: normal;
    }
  }

  .row-2 {
    margin-top: 20px;
    height: 70px;
    text-align: center;

    span {
      display: block;
      color: #555;
      font-size: 12px;
      margin-bottom: 10px;
    }
  }

扩展5个选项：

image.png

   <!--九宫格栏目图2-->
                                <van-row class="col-2">
                                    <van-col class="row-3" span="4" v-for="(v,index) in badge.icon" :key='v.id'>
                                        <a href="#">
                                            <img :src="badge.icon[index]"/>
                                            <span>{{badge.title[index]}}</span>
                                        </a>
                                    </van-col>
                                </van-row>

对应的样式row-3为：

  .row-3 {
    margin-top: 20px;
    margin-left: 5px;
    height: 70px;
    width: 70px;
    text-align: center;

    span {
      display: block;
      color: #555;
      font-size: 12px;
      margin-bottom: 10px;
    }
  }