您好,登錄后才能下訂單哦!
這篇文章給大家分享的是有關(guān)小程序中頁面用九宮格及item跳轉(zhuǎn)功能的實現(xiàn)方法的內(nèi)容。小編覺得挺實用的,因此分享給大家做個參考,一起跟隨小編過來看看吧。
效果圖:
實現(xiàn)效果圖紅色線包含部分的九宮格效果,并附帶item點擊時間。
具體實現(xiàn):
1、首先添加圖片資源文件
在項目根目錄新建一個目錄,取名為images , 用于存放圖片資源,然后添加進入幾張圖片
2、在home目錄下的home.js 文件中(參照前兩篇小程序?qū)嵺`文章) 進行數(shù)據(jù)源的配置
數(shù)據(jù)源為一個數(shù)組,每個數(shù)組元素為一個對象,該對象包含name(item文字),img(item示意圖),url(點擊該item跳轉(zhuǎn)目錄)
3、依據(jù)列表渲染的知識點進行home.wxml的編程
①、從效果圖上每個item都被細線包圍,這是構(gòu)建思路是,外部一個view,繪制頂部邊框線
最外層view樣式:
②、外部view里面每一個item繪制右側(cè)和下側(cè)的邊框線, 每個item的寬度設(shè)為33.33333% 意味著一行顯示均分顯示3個item。
③、每個item內(nèi)部包含一個圖片和一個文字,且item可以點擊跳轉(zhuǎn)到各自指定的頁面
這里使用navigation組件
navigation組件有一個屬性url:當前小程序內(nèi)的跳轉(zhuǎn)鏈接 ,指定點擊該組件跳轉(zhuǎn)的頁面路徑
完整代碼:
home.wxml文件 <view => <block wx:= wx:key=> <navigator url= => <image src= =></image> <view =>{{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; }
感謝各位的閱讀!關(guān)于“小程序中頁面用九宮格及item跳轉(zhuǎn)功能的實現(xiàn)方法”這篇文章就分享到這里了,希望以上內(nèi)容可以對大家有一定的幫助,讓大家可以學到更多知識,如果覺得文章不錯,可以把它分享出去讓更多的人看到吧!
免責聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。