微信小程序項(xiàng)目實(shí)踐之九宮格實(shí)現(xiàn)及item跳轉(zhuǎn)功能
效果圖：
實(shí)現(xiàn)效果圖紅色線包含部分的九宮格效果，并附帶item點(diǎn)擊時(shí)間。
具體實(shí)現(xiàn)：
1、首先添加圖片資源文件
在項(xiàng)目根目錄新建一個(gè)目錄，取名為images , 用于存放圖片資源，然后添加進(jìn)入幾張圖片
2、在home目錄下的home.js 文件中(參照前兩篇小程序?qū)嵺`文章) 進(jìn)行數(shù)據(jù)源的配置
數(shù)據(jù)源為一個(gè)數(shù)組，每個(gè)數(shù)組元素為一個(gè)對象，該對象包含name(item文字)，img(item示意圖)，url(點(diǎn)擊該item跳轉(zhuǎn)目錄)
3、依據(jù)列表渲染的知識點(diǎn)進(jìn)行home.wxml的編程
①、從效果圖上每個(gè)item都被細(xì)線包圍，這是構(gòu)建思路是，外部一個(gè)view，繪制頂部邊框線
最外層view樣式：
②、外部view里面每一個(gè)item繪制右側(cè)和下側(cè)的邊框線， 每個(gè)item的寬度設(shè)為33.33333% 意味著一行顯示均分顯示3個(gè)item。
③、每個(gè)item內(nèi)部包含一個(gè)圖片和一個(gè)文字，且item可以點(diǎn)擊跳轉(zhuǎn)到各自指定的頁面
這里使用navigation組件
navigation組件有一個(gè)屬性url：當(dāng)前小程序內(nèi)的跳轉(zhuǎn)鏈接 ，指定點(diǎn)擊該組件跳轉(zhuǎn)的頁面路徑
完整代碼：
home.wxml文件
<view class="home_grids">
<block wx:for="{{griddata}}" wx:key="item.name">
<navigator url="../{{item.url}}/{{item.url}}" class='home_grid'>
<image src="{{item.img}}" class="home_icon"></image>
<view class="home_grid_text">{{item.name}}</view>
</navigator>
</block>
</view>
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;
}
總結(jié)
以上所述是小編給大家介紹的微信小程序項(xiàng)目實(shí)踐之九宮格實(shí)現(xiàn)及item跳轉(zhuǎn)功能，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時(shí)回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
相關(guān)文章
web-view是小程序提供的一個(gè)可以直連h5頁面的組件,只要傳遞一個(gè)h5頁面的地址,就可以在小程序里直接打開預(yù)覽該h5頁面,這篇文章主要給大家介紹了微信小程序webView嵌入H5的相關(guān)資料,需要的朋友可以參考下2021-07-07
最近要做一個(gè)大屏幕展示上下滾動的列表，而IE自帶的Marquee，無法滿足需要，隨自己寫了一個(gè)滾動機(jī)制，代碼在附件中2009-12-12
一文詳解JavaScript的事件監(jiān)聽(最新整理)
Web頁面需要經(jīng)常和用戶之間進(jìn)行交互,而交互的過程中我們可能想要捕捉這個(gè)交互的過程,比如用戶點(diǎn)擊了某個(gè)按鈕、用戶在輸入框里面輸入了某個(gè)文本、用戶鼠標(biāo)經(jīng)過了某個(gè)位置,下面介紹下JavaScript的事件監(jiān)聽,感興趣的朋友一起看看吧2024-01-01
利用JavaScript實(shí)現(xiàn)3D可旋轉(zhuǎn)粒子矩陣效果
dat.gui.js是一個(gè)一個(gè)輕量級的圖形用戶界面庫，或者說GUI組件，只有幾十KB，可以用于創(chuàng)建操作控制三維場景的菜單欄等。本文將利用dat.gui.min.js實(shí)現(xiàn)3D可旋轉(zhuǎn)粒子矩陣效果，感興趣的可以了解一下2022-06-06
在實(shí)際開發(fā)中我們經(jīng)常需要獲取其他域的資源，本篇文章主要介紹了詳解Javascript幾種跨域方式總結(jié)，有興趣的可以了解一下。2017-02-02
JavaScript使用ZeroClipboard操作剪切板
這篇文章主要為大家詳細(xì)介紹了JavaScript使用ZeroClipboard操作剪切板的相關(guān)資料，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-05-05
這篇文章主要介紹了微信小程序錄音與播放錄音功能,小程序中提供了兩種錄音的API，舊版本錄音功能和新版錄音功能，需要的朋友可以參考下2017-12-12
js實(shí)現(xiàn)html滑動圖片拼圖驗(yàn)證
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)html滑動圖片拼圖驗(yàn)證，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-06-06
JS獲取子、父、兄節(jié)點(diǎn)方法小結(jié)
這篇文章主要介紹了JS獲取子、父、兄節(jié)點(diǎn)方法總結(jié)及JS獲取兄弟節(jié)點(diǎn)的兩種方法,需要的朋友可以參考下2017-08-08
純css+js寫的一個(gè)簡單的tab標(biāo)簽頁帶樣式
最近經(jīng)常要用tab標(biāo)簽頁，于是就寫了一個(gè)簡單的tab標(biāo)簽頁，純css+js寫的，帶樣式。大家可以參考下2014-01-01