微信小程式怎麼實現九宮格跳轉

微信小程式怎麼實作九宮格跳轉?

效果圖：

實現效果圖紅色線包含部分的九宮格效果，並附帶item點擊時間。

相關推薦：《小程式開發教學》

 具體實作：

 1、先加入圖片資源檔案

　   在專案根目錄新建一個目錄，取名為images , 用於存放圖片資源，然後新增進入幾張圖片

 

2、在home目錄下的home.js 文件中進行資料來源的設定

      資料來源為一個數組，每個陣列元素為一個對象，該物件包含name(item文字)，img(item示意圖)， url(點選該item跳轉目錄)

 3、依據列表渲染的知識點進行home.wxml的程式設計

　   ①、從效果圖上每個item都被細線包圍，這是建構想法是，外部一個view，繪製頂部邊框線

##       最外層view樣式：

       

      ②、外部繪圖右側和下側的邊框線，  每個item的寬度設為33.33333% 表示一行顯示均分顯示3個item。

     

       ③、每個item內部包含一個圖片和一個文字，且item可以點選跳到各自指定的頁面

              這裡使用navigation元件

       　　navigation元件有一個屬性url：目前小程式內的跳轉連結，指定點選該元件跳轉的頁面路徑

o" ##　　home.wxss檔

home.wxml文件
 <view class="home_grids">
  <block wx:for="{{griddata}}" wx:key="item.name">
   <navigator url="../{{item.url}}/{{item.url}}" class=&#39;home_grid&#39;>
    <image src="{{item.img}}" class="home_icon"></image>
    <view class="home_grid_text">{{item.name}}</view>
   </navigator>
  </block>
 </view>

以上是微信小程式怎麼實現九宮格跳轉的詳細內容。更多資訊請關注PHP中文網其他相關文章！