小程序實踐（三）：九宮格實現及item跳轉

番茄西紅柿發布于2019-04-23 13:34 / 684人閱讀

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

效果圖：

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

------------------------------------------------------------------------------------------------------

具體實現：

1、首先添加圖片資源文件

　在項目根目錄新建一個目錄，取名為images , 用于存放圖片資源，然后添加進入幾張圖片

2、在home目錄下的home.js 文件中(參照前兩篇小程序實踐文章) 進行數據源的配置

數據源為一個數組，每個數組元素為一個對象，該對象包含name(item文字)，img(item示意圖)，url(點擊該item跳轉目錄)

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

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

最外層view樣式：

②、外部view里面每一個item繪制右側和下側的邊框線，每個item的寬度設為33.33333% 意味著一行顯示均分顯示3個item。

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

這里使用navigation組件

　　navigation組件有一個屬性url：當前小程序內的跳轉鏈接，指定點擊該組件跳轉的頁面路徑

完整代碼：

   home.wxml文件
   class="home_grids">
      for="{{griddata}}" wx:key="item.name">
        "../{{item.url}}/{{item.url}}" class=home_grid>
          "{{item.img}}" class="home_icon">
          class="home_grid_text">{{item.name}}

　　home.wxss文件

　　.home_grids {
　　  border-top: 1rpx solid #D9D9D9;
　　  overflow: hidden;
　　  margin-top: 10px
　　}

　　.home_grid{
　　  position: relative;
 　　 float: left;
 　　 padding: 20px 10px;
 　　 width: 33.33333333%;
　　  box-sizing: border-box;
　　  border-right: 1rpx solid #D9D9D9;
　　  border-bottom: 1rpx solid #D9D9D9;
　　}

--------------------------------------------------------------------------------------

小程序實踐（一）：主頁tab選項實現

小程序實踐（二）：swiper組件實現輪播圖效果

小程序實踐（三）：九宮格實現及item跳轉

小程序實踐（四）：動態控制組件的顯示/隱藏

小程序實踐（五）：for循環綁定item的點擊事件

小程序實踐（六）：view內部組件排版

小程序實踐（七）：頁面間傳值

小程序實踐（八）：驗證碼倒計時功能

小程序實踐（九）：返回到上一個界面并傳值回去

小程序實踐（十）：textarea實現簡單的編輯文本界面

小程序實踐（十一）：showModal的使用

小程序實踐（十二）：七牛云上傳圖片

GPU云服務器云服務器九宮格九宮格圖九宮格源碼支付寶九宮格

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/2052.html

如意小程序開發實戰：實現九宮格界面的導航

摘要：將數據呈現到界面之后，我們需要相當的樣式來配合，代碼如下。效果如下圖我們模板中使用元素來呈現格子，所以每個格子自然就可以導航了。作者：如意來自：授權地址轉自：微信小程序聯盟? 小程序是長在微信上的，是移動端的界面，為了能夠更方便的使用，我們常常希望使用九宮格界面的方式作為導航，那要如何實現呢？基于一個簡單的思考，九宮格就是三行三列，如果把行作為一個單位，再將每一行分成三列，那是不...

mindwind 2019-08-20 13:50 評論0 收藏0
如意小程序開發實戰：實現九宮格界面的導航

摘要：將數據呈現到界面之后，我們需要相當的樣式來配合，代碼如下。效果如下圖我們模板中使用元素來呈現格子，所以每個格子自然就可以導航了。作者：如意來自：授權地址轉自：微信小程序聯盟? 小程序是長在微信上的，是移動端的界面，為了能夠更方便的使用，我們常常希望使用九宮格界面的方式作為導航，那要如何實現呢？基于一個簡單的思考，九宮格就是三行三列，如果把行作為一個單位，再將每一行分成三列，那是不...

xingqiba 2019-08-14 17:16 評論0 收藏0
小程序實踐（二）：swiper組件實現輪播圖效果

摘要：組件類似于中的，實現類似輪播圖的效果，相對于的實現起來更加方便，快捷。swiper組件類似于Android中的ViewPager，實現類似輪播圖的效果，相對于Android的Viewpager,swiper實現起來更加方便，快捷。效果圖：首先看下swiper支持的屬性： --------------------------------------------------------...

番茄西紅柿 2019-04-23 13:34 評論0 收藏0
小程序實踐（一）：主頁tab選項實現

摘要：這里不再多具體介紹，只添加一個小需求，點擊切換相關頁面，該頁面標題要和一致，頁面內容也和一致，用于說明效果正確實現。官方文檔效果圖：實現底部Tab選項，只需要在項目根目錄下的app.json下修改如圖： --------------------------------------------------------------------------------------...

番茄西紅柿 2019-04-23 13:34 評論0 收藏0