微信小程序怎么實現九宮格

這篇文章主要介紹“微信小程序怎么實現九宮格”，在日常操作中，相信很多人在微信小程序怎么實現九宮格問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”微信小程序怎么實現九宮格”的疑惑有所幫助！接下來，請跟著小編一起來學習吧！

下面是實現步驟：

.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:  

到此，關于“微信小程序怎么實現九宮格”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續學習更多相關知識，請繼續關注億速云網站，小編會繼續努力為大家帶來更多實用的文章！