微信小程序雲開發-數據庫-列表頁攜帶id跳轉到詳情頁


一、新建頁面

新建列表頁"pages/goodslist/goodslist",新建列表詳情頁"pages/gooddetail/gooddetail"

 

 

 二、列表頁顯示商品列表

1.js文件,查詢商品信息,並將查詢到的商品信息存放到自定義數組goodslist[]中

 

 

 2.wxml文件。for循環遍歷數組goodslist[],將數組中所有字段的信息展示在頁面上

三、列表頁綁定跳轉事件

 

 

 1.wxml文件。想要攜帶id跳轉頁面,需要在需要跳轉的頁面wxml文件中添加bindtap綁定跳轉事件(自定義函數goDetail()函數實現),一定要添加data-id="{{item._id}}",data-id名稱中的id是自己定義的,也可以改為其他名字。

 

 

 2.js文件。攜帶id跳轉頁面的事件。

 

 

 四、商品詳情頁展示

1.wxml文件商品詳情信息

 

 

 2.js文件,頁面加載的時候,獲取列表頁傳遞過來的id值,拿到id后(options.id),將拿到的id付給自定義的id(var id = options.id)。將自定義的id賦值給查詢條件.doc(id)

 

 

、大功告成。

點擊列表頁中的任何一條數據,詳情頁顯示對應的數據。

 

注意:

【注意事項1】goodlist.js中的id是獲取當前點擊的商品的id值。gooddetail.js中的option.id中的id是頁面加載時獲取goodlist頁面的id。兩個id名稱可以換成別的,但是一定要保持一致!

 

 

 

 

 【注意事項2】gooddetail中傳輸的id就是自定義的id,可以是其他名字。

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM