微信小程序怎么实现九宫格

这篇文章主要介绍“微信小程序怎么实现九宫格”，在日常操作中，相信很多人在微信小程序怎么实现九宫格问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”微信小程序怎么实现九宫格”的疑惑有所帮助！接下来，请跟着小编一起来学习吧！

下面是实现步骤：

.js中添加数据

Page({

  /**

   * 页面的初始数据

   */

  data: {

    routers :[

      {

        text: '我的账户',

        icon: '../../images/mine/mine_account.png',

        url: '../myAccount/myAccount',

      },

      {

        text: '我的合同',

        icon: '../../images/mine/mine_contract.png',

        url: '../myAccount/myAccount',

      },

      {

        text: '浏览记录',

        icon: '../../images/mine/mine_browing.png',

        url: '../myAccount/myAccount',

      },

      {

        text: '我要出租',

        icon: '../../images/mine/mine_lease.png',

        url: '../myAccount/myAccount',

      },

      {

        text: '客服',

        icon: '../../images/mine/mine_customService.png',

        url: '../myAccount/myAccount',

      },

      {

        text: '我的收藏',

        icon: '../../images/mine/mine_collect.png',

        url: '../myAccount/myAccount',

      }

    ] 

  },

})

.wxml中，添加weui-grids

<view class="weui-grids">  

    <view class="weui-grid" wx:for="{{routers}}" wx:key="name">  

      <navigator url="{{item.url}}">  

        <view class="weui-grid__icon">  

          <image src=" {{item.icon}}" mode="scaleToFill" />  

        </view>  

        <text class="weui-grid__label">{{item.text}}</text>  

      </navigator>  

    </view>  

  </view>  

wxss中设置样式

.weui-grids {  

  position: relative;  

  overflow: hidden;  

   margin-top: 10rpx; 

}  

.weui-grids:before {  

  content: " ";  

  position: absolute;  

  left: 0;  

  top: 0;  

  right: 0;  

  height: 1px;  

  border-top: 1px solid #D9D9D9;  

  color: #D9D9D9;  

  -webkit-transform-origin: 0 0;  

          transform-origin: 0 0;  

  -webkit-transform: scaleY(0.5);  

          transform: scaleY(0.5);  

}  

.weui-grids:after {  

  content: " ";  

  position: absolute;  

  left: 0;  

  top: 0;  

  width: 1px;  

  bottom: 0;  

  border-left: 1px solid #D9D9D9;  

  color: #D9D9D9;  

  -webkit-transform-origin: 0 0;  

          transform-origin: 0 0;  

  -webkit-transform: scaleX(0.5);  

          transform: scaleX(0.5);  

}  

.weui-grid {  

  position: relative;  

  float: left;  

  padding: 20px 10px;  

  width: 33.33333333%;  

  box-sizing: border-box;  

  background-color: white;

}  

.weui-grid:before {  

  content:  

到此，关于“微信小程序怎么实现九宫格”的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注亿速云网站，小编会继续努力为大家带来更多实用的文章！