您好,登錄后才能下訂單哦!
這篇文章主要介紹微信小程序?qū)崿F(xiàn)九宮格跳轉(zhuǎn)的方法,文中介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們一定要看完!
微信小程序怎么實現(xiàn)九宮格跳轉(zhuǎn)?
效果圖:
實現(xiàn)效果圖紅色線包含部分的九宮格效果,并附帶item點擊時間。
具體實現(xiàn):
1、首先添加圖片資源文件
在項目根目錄新建一個目錄,取名為images , 用于存放圖片資源,然后添加進入幾張圖片
2、在home目錄下的home.js 文件中 進行數(shù)據(jù)源的配置
數(shù)據(jù)源為一個數(shù)組,每個數(shù)組元素為一個對象,該對象包含name(item文字),img(item示意圖),url(點擊該item跳轉(zhuǎn)目錄)
3、依據(jù)列表渲染的知識點進行home.wxml的編程
①、從效果圖上每個item都被細線包圍,這是構建思路是,外部一個view,繪制頂部邊框線
最外層view樣式:
②、外部view里面每一個item繪制右側(cè)和下側(cè)的邊框線, 每個item的寬度設為33.33333% 意味著一行顯示均分顯示3個item。
③、每個item內(nèi)部包含一個圖片和一個文字,且item可以點擊跳轉(zhuǎn)到各自指定的頁面
這里使用navigation組件
navigation組件有一個屬性url:當前小程序內(nèi)的跳轉(zhuǎ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; }
以上是“微信小程序?qū)崿F(xiàn)九宮格跳轉(zhuǎn)的方法”這篇文章的所有內(nèi)容,感謝各位的閱讀!希望分享的內(nèi)容對大家有幫助,更多相關知識,歡迎關注億速云行業(yè)資訊頻道!
免責聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權內(nèi)容。