微信小程序首页导航栏Ⅰ

效果&＃xff1a;

.wxml页面&＃xff1a;

{{ item.title }}


.wxss样式&＃xff1a;


.plate-item {display: flex;float: left;position: relative;width: 140rpx;height: 180rpx;margin-top: 38rpx;margin-left: 42rpx;
}.plate-img image {width: 100rpx;height: 100rpx;
}.plate-info {position: absolute;height: 40rpx;font-size: 30rpx;font-family: &＃39;微软雅黑&＃39;;bottom: 60rpx;left: -10rpx;
}.icon-huodong1, .icon-yuyuehuodong, .icon-renshu, .icon-lianxiwomen {font-size: 35px;color: rgb(228, 107, 80);
}


.js数据&＃xff1a;在data{ }中赋值

plateArray: [{url: &＃39;/pages/news/news&＃39;,image: &＃39;iconfont icon-huodong1&＃39;,title: &＃39;活动优惠&＃39;},{url: &＃39;&＃39;,image: &＃39;iconfont icon-yuyuehuodong&＃39;,title: &＃39;预约球场&＃39;},{url: &＃39;/pages/coach/coach&＃39;,image: &＃39;iconfont icon-renshu&＃39;,title: &＃39;教练团队&＃39;},{url: &＃39;/pages/advice/advice&＃39;,image: &＃39;iconfont icon-lianxiwomen&＃39;,title: &＃39;联系我们&＃39;}],