微信小程序-首页导航栏Ⅰ

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/ChibiMarukoChan/article/details/82884939

效果：

.wxml页面：

<view class="plate">
  <view class="plate-cell">
    <navigator  wx:for="{{ plateArray }}" url="{{ item.url }}"  hover-class="other-navigator-hover" class="plate-item">
      <view class="plate-img">
        <text class="{{ item.image }}"></text>
      </view>
      <text class="plate-info">{{ item.title }}</text>
    </navigator>
  </view>
</view>

.wxss样式：

.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: '微软雅黑';
  bottom: 60rpx;
  left: -10rpx;
}

.icon-huodong1, .icon-yuyuehuodong, .icon-renshu, .icon-lianxiwomen {
  font-size: 35px;
  color: rgb(228, 107, 80);
}

.js数据：在data{ }中赋值

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