您好,登錄后才能下訂單哦!
效果圖:
實(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è)對(duì)象,該對(duì)象包含name(item文字),img(item示意圖),url(點(diǎn)擊該item跳轉(zhuǎn)目錄)
3、依據(jù)列表渲染的知識(shí)點(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)到各自指定的頁(yè)面
這里使用navigation組件
navigation組件有一個(gè)屬性u(píng)rl:當(dāng)前小程序內(nèi)的跳轉(zhuǎn)鏈接 ,指定點(diǎn)擊該組件跳轉(zhuǎn)的頁(yè)面路徑
完整代碼:
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)功能,希望對(duì)大家有所幫助,如果大家有任何疑問請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)億速云網(wǎng)站的支持!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。