一、新建頁面
新建列表頁"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,可以是其他名字。