微信小程序开发--网格布局

 

 

 实现上图元素布局两种实现方法：

1.微信小程序原生组件。

.wxml

<view class="plate">
    <navigator url="/pages/program/program" hover-class="navigator-hover" class="plate-item">
      <view class="plate-img">
        <image src="{{a1src}}"></image>
         <text class="plate-info">
        编程开发
       </text>
      </view>
     
    </navigator>
    <navigator url="/pages/english/english" hover-class="navigator-hover" class="plate-item">
      <view class="plate-img">
        <image src="{{a2src}}"></image>
        <text class="plate-info">
        英语学习
       </text>
      </view>
      
    </navigator>
    <navigator url="/pages/ideology/ideology" hover-class="navigator-hover" class="plate-item">
      <view class="plate-img">
        <image src="{{a3src}}"></image>
        <text class="plate-info">
        思政课堂
       </text>
      </view>
      
    </navigator>
    <navigator url="/pages/interest/interest" class="plate-item">
      <view class="plate-img">
        <image src="{{a4src}}"></image>
         <text class="plate-info">
        生活兴趣
       </text>
      </view>
    </navigator>
  </view>

.wxss

.plate{
 display: flex;
margin: 10rpx 0 10rpx 0;
background-color: #f4f;
}
.plate-item{
  width: 25vw;
  display: flex;
  align-items: center;
  flex-direction: column;
}

.plate-img{
padding-top: 40rpx;
padding-bottom: 40rpx;
}

.plate-img image{
 width: 100rpx;
height: 100rpx;
}
.plate-info{
 font-size: 27rpx;
}

.js

a1src: '../../images/image/a1.png',
a2src: '../../images/image/a2.png',
a3src: '../../images/image/a3.png',
a4src: '../../images/image/a4.png',

效果图：

 

 

 2.引入vant组件。vant组件的引入方式参见官方文档：https://youzan.github.io/vant-weapp/#/quickstart

.wxml

<van-grid clickable="true" column-num="4" border="{{ false }}">
    <van-grid-item use-slot wx:for="{{navItem}}" wx:for-item="a" wx:key="a"  link-type="navigateTo" url="{{a.imgto}}" >
      <image style="width: 100rpx; height: 100rpx;" src="{{a.imgsrc}}"></image>
    <text class="imginfo">{{a.imginfo}}</text>
    </van-grid-item>
</van-grid>

.js,主要是数据绑定

navItem: [
      {
        imgsrc: '../../images/image/a1.png',
        imginfo:'编程开发',
        imgto:'/pages/program/program' 
      },
      {
        imgsrc: '../../images/image/a2.png',
        imginfo: '英语学习',
        imgto: '/pages/english/english'
      },
      {
        imgsrc: '../../images/image/a3.png',
        imginfo: '思政课堂',
        imgto: '/pages/ideology/ideology'
      },
      {
        imgsrc: '../../images/image/a4.png',
        imginfo: '生活兴趣',
        imgto: '/pages/interest/interest'
      }
    ]

.json,引入vant组件

"usingComponents": {
  "van-grid": "@vant/weapp/grid/index",
  "van-grid-item": "@vant/weapp/grid-item/index"
}

效果图