本期主要是在今日推荐的Div下实现对应的九宫格栏目分类导航。
期望效果
关于九宫格的布局,再实现的过程中遇到的问题点主要是<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>
效果是:
这里直接的图片无法显示出来,但是看请求是请求成功的,返会了200.
后来百度之后,才记起来关于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: ['鞋包馆', '运动馆', '母婴馆', '超市', '女装馆', '美妆馆', '男装馆', '更多'],
},
最终才正常的显示:
最终实现的流程为:
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个选项:
<!--九宫格栏目图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;
}
}