2018轉眼即將逝去了，由于近期在弄一個小程序的項目的原因，今天在這里記錄一下小程序之九宮格布局方案，以備后期需要和相關知識溫習。

　　對于整個小程序項目，原生開發小程序的方式這里就不多說了，官方有確切的說明文檔以及詳細的Api.近期公司做的小程序項目是采用wepy框架實現的，個人覺得這個框架還是很不錯的，類似于vue的風格。總之，從構建到最后微信web開發者工具調試和預覽，效果還是可以的。

　　至于具體的小程序wepy框架開發過程，安裝工具等這里不做多講(不是今天這篇文章的重點)，本次想借著寫這篇博文來記錄小程序頁面展示的九宮格布局方案和思路。

大體效果圖:

　　

?

第一步：整理應用功能點，明確小程序需求功能點（這里一般為小程序各主功能或子模塊功能入口點也或稱之為主頁面導航模塊，點擊模塊或單元格跳轉到對應功能頁面）；

第二步：根據實際功能需要，考量好該導航模塊數據后端處理邏輯，為本地靜態數據或服務器端動態數據。如：

?

或請求服務端獲取動態數據(這里暫用的是nodejs express搭建的后端服務)

?

?

?第三步：繪制UI

這里作個簡單的例子，

具體的Class樣式，這里也不做贅述了，相信很多前端大牛們都能做的出好看的效果。這里貼出部分代碼如下

.weui-grids { position: relative; overflow: hidden; width:99%; margin-top: 5rpx; } .weui-grids:before { content:" "; position: absolute; left: 0; top: 0; right: 0; height: 1rpx; border-top:1rpx 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; right: 0; width: 1rpx; bottom: 0; border-left:1rpx 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: 20rpx 10rpx; width: 33.333333333%; box-sizing: border-box; }
.weui-grid:before { content: " "; position: absolute; right: 0; top: 0; width: 1rpx; bottom: 0; border-right: 1rpx solid #d9d9d9; color: #d9d9d9; -webkit-transform-origin: 100% 0; transform-origin: 100% 0; -webkit-transform: scaleX(0.5); transform: scaleX(0.5); } .weui-grid:after { content: " "; position: absolute; left: 0; bottom: 0; right: 0; height: 1rpx; border-bottom: 1rpx solid #d9d9d9; color: #d9d9d9; -webkit-transform-origin: 0 100%; transform-origin: 0 100%; -webkit-transform: scaleY(0.5); transform: scaleY(0.5); }
.weui-grid:active { background-color: #ececec; }
.weui-grid__bg { position: relative; float: left; padding: 0rpx 0rpx; width: 100%; box-sizing: border-box; }
.weui-grid__icon { width: 70%; height: 80rpx; margin: 0 auto; }
.weui-grid__icon image { display: block; width: 100%; height: 100%; }
.weui-grid__icon + .weui-grid__label { margin-top: 5rpx; }
.weui-grid__label { display: block; text-align: center; font-weight: bold; color: #000; font-size: 28rpx; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; } OK,大功告成? 寫的比較粗糙，僅以此來豐富成長歷程，歡迎路過拍磚！

?

轉載于:https://www.cnblogs.com/lmssong/p/10169861.html

總結

以上是生活随笔為你收集整理的微信小程序之九宫格布局方案的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。