当前位置:   article > 正文

微信小程序实现美团goods商品列表页开发_微信小程序美团外卖商品列表页面

微信小程序美团外卖商品列表页面

1.使用的组件

scroll-view和wx.createSelectorQuery()方法

2.代码图

js代码

  1. Page({
  2. /**
  3. * 页面的初始数据
  4. */
  5. data: {
  6. currentIndex:0,//左边菜单的当前显示值
  7. toView: 'menu-0', //滚动到某个菜单元素
  8. foodListHeights:[],//菜单对应右边商品的元素高度列表
  9. scrollTop:0,//右边商品滚动条滚动到哪
  10. goods: [
  11. {
  12. "name": "热销榜",
  13. "type": -1,
  14. "foods": [
  15. {
  16. "name": "皮蛋瘦肉粥",
  17. "price": 10,
  18. "oldPrice": "",
  19. "description": "咸粥",
  20. "sellCount": 229,
  21. "rating": 100,
  22. "info": "一碗皮蛋瘦肉粥,总是我到粥店时的不二之选。香浓软滑,饱腹暖心,皮蛋的Q弹与瘦肉的滑嫩伴着粥香溢于满口,让人喝这样的一碗粥也觉得心满意足",
  23. "ratings": [
  24. {
  25. "username": "3******c",
  26. "rateTime": 1469281964000,
  27. "rateType": 0,
  28. "text": "很喜欢的粥",
  29. "avatar": "http://static.galileo.xiaojukeji.com/static/tms/default_header.png"
  30. },
  31. {
  32. "username": "2******3",
  33. "rateTime": 1469271264000,
  34. "rateType": 0,
  35. "text": "",
  36. "avatar": "http://static.galileo.xiaojukeji.com/static/tms/default_header.png"
  37. },
  38. {
  39. "username": "3******b",
  40. "rateTime": 1469261964000,
  41. "rateType": 1,
  42. "text": "",
  43. "avatar": "http://static.galileo.xiaojukeji.com/static/tms/default_header.png"
  44. }
  45. ],
  46. "icon": "http://fuss10.elemecdn.com/c/cd/c12745ed8a5171e13b427dbc39401jpeg.jpeg?imageView2/1/w/114/h/114",
  47. "image": "http://fuss10.elemecdn.com/c/cd/c12745ed8a5171e13b427dbc39401jpeg.jpeg?imageView2/1/w/750/h/750"
  48. },
  49. {
  50. "name": "扁豆焖面",
  51. "price": 14,
  52. "oldPrice": "",
  53. "description": "",
  54. "sellCount": 188,
  55. "rating": 96,
  56. "ratings": [
  57. {
  58. "username": "3******c",
  59. "rateTime": 1469281964000,
  60. "rateType": 0,
  61. "text": "",
  62. "avatar": "http://static.galileo.xiaojukeji.com/static/tms/default_header.png"
  63. },
  64. {
  65. "username": "2******3",
  66. "rateTime": 1469271264000,
  67. "rateType": 0,
  68. "text": "",
  69. "avatar": "http://static.galileo.xiaojukeji.com/static/tms/default_header.png"
  70. },
  71. {
  72. "username": "3******b",
  73. "rateTime": 1469261964000,
  74. "rateType": 1,
  75. "text": "",
  76. "avatar": "http://static.galileo.xiaojukeji.com/static/tms/default_header.png"
  77. }
  78. ],
  79. "info": "",
  80. "icon": "http://fuss10.elemecdn.com/c/6b/29e3d29b0db63d36f7c500bca31d8jpeg.jpeg?imageView2/1/w/114/h/114",
  81. "image": "http://fuss10.elemecdn.com/c/6b/29e3d29b0db63d36f7c500bca31d8jpeg.jpeg?imageView2/1/w/750/h/750"
  82. },
  83. {
  84. "name": "葱花饼",
  85. "price": 10,
  86. "oldPrice": "",
  87. "description": "",
  88. "sellCount": 124,
  89. "rating": 85,
  90. "info": "",
  91. "ratings": [
  92. {
  93. "username": "3******c",
  94. "rateTime": 1469281964000,
  95. "rateType": 1,
  96. "text": "没啥味道",
  97. "avatar": "http://static.galileo.xiaojukeji.com/static/tms/default_header.png"
  98. },
  99. {
  100. "username": "2******3",
  101. "rateTime": 1469271264000,
  102. "rateType": 1,
  103. "text": "很一般啊",
  104. "avatar": "http://static.galileo.xiaojukeji.com/static/tms/default_header.png"
  105. },
  106. {
  107. "username": "3******b",
  108. "rateTime": 1469261964000,
  109. "rateType": 0,
  110. "text": "",
  111. "avatar": "http://static.galileo.xiaojukeji.com/static/tms/default_header.png"
  112. }
  113. ],
  114. "icon": "http://fuss10.elemecdn.com/f/28/a51e7b18751bcdf871648a23fd3b4jpeg.jpeg?imageView2/1/w/114/h/114",
  115. "image": "http://fuss10.elemecdn.com/f/28/a51e7b18751bcdf871648a23fd3b4jpeg.jpeg?imageView2/1/w/750/h/750"
  116. },
  117. {
  118. "name": "牛肉馅饼",
  119. "price": 14,
  120. "oldPrice": "",
  121. "description": "",
  122. "sellCount": 114,
  123. "rating": 91,
  124. "info": "",
  125. "ratings": [
  126. {
  127. "username": "3******c",
  128. "rateTime": 1469281964000,
  129. "rateType": 1,
  130. "text": "难吃不推荐",
  131. "avatar": "http://static.galileo.xiaojukeji.com/static/tms/default_header.png"
  132. },
  133. {
  134. "username": "2******3",
  135. "rateTime": 1469271264000,
  136. "rateType": 0,
  137. "text": "",
  138. "avatar": "http://static.galileo.xiaojukeji.com/static/tms/default_header.png"
  139. },
  140. {
  141. "username": "3******b",
  142. "rateTime": 1469261964000,
  143. "rateType": 0,
  144. "text": "",
  145. "avatar": "http://static.galileo.xiaojukeji.com/static/tms/default_header.png"
  146. }
  147. ],
  148. "icon": "http://fuss10.elemecdn.com/d/b9/bcab0e8ad97758e65ae5a62b2664ejpeg.jpeg?imageView2/1/w/114/h/114",
  149. "image": "http://fuss10.elemecdn.com/d/b9/bcab0e8ad97758e65ae5a62b2664ejpeg.jpeg?imageView2/1/w/750/h/750"
  150. },
  151. {
  152. "name": "招牌猪肉白菜锅贴/10个",
  153. "price": 17,
  154. "oldPrice": "",
  155. "description": "",
  156. "sellCount": 101,
  157. "rating": 78,
  158. "info": "",
  159. "ratings": [
  160. {
  161. "username": "3******c",
  162. "rateTime": 1469281964000,
  163. "rateType": 1,
  164. "text": "不脆,不好吃",
  165. "avatar": "http://static.galileo.xiaojukeji.com/static/tms/default_header.png"
  166. },
  167. {
  168. "username": "2******3",
  169. "rateTime": 1469271264000,
  170. "rateType": 0,
  171. "text": "",
  172. "avatar": "http://static.galileo.xiaojukeji.com/static/tms/default_header.png"
  173. },
  174. {
  175. "username": "3******b",
  176. "rateTime": 1469261964000,
  177. "rateType": 0,
  178. "text": "",
  179. "avatar": "http://static.galileo.xiaojukeji.com/static/tms/default_header.png"
  180. }
  181. ],
  182. "icon": "http://fuss10.elemecdn.com/7/72/9a580c1462ca1e4d3c07e112bc035jpeg.jpeg?imageView2/1/w/114/h/114",
  183. "image": "http://fuss10.elemecdn.com/7/72/9a580c1462ca1e4d3c07e112bc035jpeg.jpeg?imageView2/1/w/750/h/750"
  184. },
  185. {
  186. "name": "南瓜粥",
  187. "price": 9,
  188. "oldPrice": "",
  189. "description": "甜粥",
  190. "sellCount": 91,
  191. "rating": 100,
  192. "ratings": [
  193. {
  194. "username": "3******c",
  195. "rateTime": 1469281964000,
  196. "rateType": 0,
  197. "text": "",
  198. "avatar": "http://static.galileo.xiaojukeji.com/static/tms/default_header.png"
  199. },
  200. {
  201. "username": "2******3",
  202. "rateTime": 1469271264000,
  203. "rateType": 0,
  204. "text": "",
  205. "avatar": "http://static.galileo.xiaojukeji.com/static/tms/default_header.png"
  206. },
  207. {
  208. "username": "3******b",
  209. "rateTime": 1469261964000,
  210. "rateType": 0,
  211. "text": "",
  212. "avatar": "http://static.galileo.xiaojukeji.com/static/tms/default_header.png"
  213. }
  214. ],
  215. "icon": "http://fuss10.elemecdn.com/8/a6/453f65f16b1391942af11511b7a90jpeg.jpeg?imageView2/1/w/114/h/114",
  216. "image": "http://fuss10.elemecdn.com/8/a6/453f65f16b1391942af11511b7a90jpeg.jpeg?imageView2/1/w/750/h/750"
  217. },
  218. {
  219. "name": "红豆薏米美肤粥",
  220. "price": 12,
  221. "oldPrice": "",
  222. "description": "甜粥",
  223. "sellCount": 86,
  224. "rating": 100,
  225. "info": "",
  226. "ratings": [
  227. {
  228. "username": "3******c",
  229. "rateTime": 1469281964000,
  230. "rateType": 0,
  231. "text": "",
  232. "avatar": "http://static.galileo.xiaojukeji.com/static/tms/default_header.png"
  233. },
  234. {
  235. "username": "2******3",
  236. "rateTime": 1469271264000,
  237. "rateType": 0,
  238. "text": "",
  239. "avatar": "http://static.galileo.xiaojukeji.com/static/tms/default_header.png"
  240. },
  241. {
  242. "username": "3******b",
  243. "rateTime": 1469261964000,
  244. "rateType": 0,
  245. "text": "",
  246. "avatar": "http://static.galileo.xiaojukeji.com/static/tms/default_header.png"
  247. }
  248. ],
  249. "icon": "http://fuss10.elemecdn.com/d/22/260bd78ee6ac6051136c5447fe307jpeg.jpeg?imageView2/1/w/114/h/114",
  250. "image": "http://fuss10.elemecdn.com/d/22/260bd78ee6ac6051136c5447fe307jpeg.jpeg?imageView2/1/w/750/h/750"
  251. },
  252. {
  253. "name": "八宝酱菜",
  254. "price": 4,
  255. "oldPrice": "",
  256. "description": "",
  257. "sellCount": 84,
  258. "rating": 100,
  259. "info": "",
  260. "ratings": [
  261. {
  262. "username": "3******c",
  263. "rateTime": 1469281964000,
  264. "rateType": 0,
  265. "text": "",
  266. "avatar": "http://static.galileo.xiaojukeji.com/static/tms/default_header.png"
  267. },
  268. {
  269. "username": "2******3",
  270. "rateTime": 1469271264000,
  271. "rateType": 0,
  272. "text": "",
  273. "avatar": "http://static.galileo.xiaojukeji.com/static/tms/default_header.png"
  274. },
  275. {
  276. "username": "3******b",
  277. "rateTime": 1469261964000,
  278. "rateType": 0,
  279. "text": "",
  280. "avatar": "http://static.galileo.xiaojukeji.com/static/tms/default_header.png"
  281. }
  282. ],
  283. "icon": "http://fuss10.elemecdn.com/9/b5/469d8854f9a3a03797933fd01398bjpeg.jpeg?imageView2/1/w/114/h/114",
  284. "image": "http://fuss10.elemecdn.com/9/b5/469d8854f9a3a03797933fd01398bjpeg.jpeg?imageView2/1/w/750/h/750"
  285. },
  286. {
  287. "name": "红枣山药糙米粥",
  288. "price": 10,
  289. "oldPrice": "",
  290. "description": "",
  291. "sellCount": 81,
  292. "rating": 91,
  293. "info": "",
  294. "ratings": [
  295. {
  296. "username": "3******c",
  297. "rateTime": 1469281964000,
  298. "rateType": 0,
  299. "text": "",
  300. "avatar": "http://static.galileo.xiaojukeji.com/static/tms/default_header.png"
  301. },
  302. {
  303. "username": "2******3",
  304. "rateTime": 1469271264000,
  305. "rateType": 0,
  306. "text": "",
  307. "avatar": "http://static.galileo.xiaojukeji.com/static/tms/default_header.png"
  308. },
  309. {
  310. "username": "3******b",
  311. "rateTime": 1469261964000,
  312. "rateType": 0,
  313. "text": "",
  314. "avatar": "http://static.galileo.xiaojukeji.com/static/tms/default_header.png"
  315. }
  316. ],
  317. "icon": "http://fuss10.elemecdn.com/9/b5/469d8854f9a3a03797933fd01398bjpeg.jpeg?imageView2/1/w/114/h/114",
  318. "image": "http://fuss10.elemecdn.com/9/b5/469d8854f9a3a03797933fd01398bjpeg.jpeg?imageView2/1/w/750/h/750"
  319. },
  320. {
  321. "name": "糊塌子",
  322. "price": 10,
  323. "oldPrice": "",
  324. "description": "",
  325. "sellCount": 80,
  326. "rating": 93,
  327. "info": "",
  328. "ratings": [
  329. {
  330. "username": "3******c",
  331. "rateTime": 1469281964000,
  332. "rateType": 0,
  333. "text": "",
  334. "avatar": "http://static.galileo.xiaojukeji.com/static/tms/default_header.png"
  335. },
  336. {
  337. "username": "2******3",
  338. "rateTime": 1469271264000,
  339. "rateType": 0,
  340. "text": "",
  341. "avatar": "http://static.galileo.xiaojukeji.com/static/tms/default_header.png"
  342. },
  343. {
  344. "username": "3******b",
  345. "rateTime": 1469261964000,
  346. "rateType": 0,
  347. "text": "",
  348. "avatar": "http://static.galileo.xiaojukeji.com/static/tms/default_header.png"
  349. }
  350. ],
  351. "icon": "http://fuss10.elemecdn.com/0/05/097a2a59fd2a2292d08067e16380cjpeg.jpeg?imageView2/1/w/114/h/114",
  352. "image": "http://fuss10.elemecdn.com/0/05/097a2a59fd2a2292d08067e16380cjpeg.jpeg?imageView2/1/w/750/h/750"
  353. }
  354. ]
  355. },
  356. {
  357. "name": "单人精彩套餐",
  358. "type": 2,
  359. "foods": [
  360. {
  361. "name": "红枣山药粥套餐",
  362. "price": 29,
  363. "oldPrice": 36,
  364. "description": "红枣山药糙米粥,素材包,爽口莴笋丝,四川泡菜或八宝酱菜,配菜可备注",
  365. "sellCount": 17,
  366. "rating": 100,
  367. "info": "",
  368. "ratings": [
  369. {
  370. "username": "2******3",
  371. "rateTime": 1469271264000,
  372. "rateType": 0,
  373. "text": "",
  374. "avatar": "http://static.galileo.xiaojukeji.com/static/tms/default_header.png"
  375. }
  376. ],
  377. "icon": "http://fuss10.elemecdn.com/6/72/cb844f0bb60c502c6d5c05e0bddf5jpeg.jpeg?imageView2/1/w/114/h/114",
  378. "image": "http://fuss10.elemecdn.com/6/72/cb844f0bb60c502c6d5c05e0bddf5jpeg.jpeg?imageView2/1/w/750/h/750"
  379. },
  380. {
  381. "name": "红枣山药粥套餐",
  382. "price": 29,
  383. "oldPrice": 36,
  384. "description": "红枣山药糙米粥,素材包,爽口莴笋丝,四川泡菜或八宝酱菜,配菜可备注",
  385. "sellCount": 17,
  386. "rating": 100,
  387. "info": "",
  388. "ratings": [
  389. {
  390. "username": "2******3",
  391. "rateTime": 1469271264000,
  392. "rateType": 0,
  393. "text": "",
  394. "avatar": "http://static.galileo.xiaojukeji.com/static/tms/default_header.png"
  395. }
  396. ],
  397. "icon": "http://fuss10.elemecdn.com/6/72/cb844f0bb60c502c6d5c05e0bddf5jpeg.jpeg?imageView2/1/w/114/h/114",
  398. "image": "http://fuss10.elemecdn.com/6/72/cb844f0bb60c502c6d5c05e0bddf5jpeg.jpeg?imageView2/1/w/750/h/750"
  399. },
  400. {
  401. "name": "红枣山药粥套餐",
  402. "price": 29,
  403. "oldPrice": 36,
  404. "description": "红枣山药糙米粥,素材包,爽口莴笋丝,四川泡菜或八宝酱菜,配菜可备注",
  405. "sellCount": 17,
  406. "rating": 100,
  407. "info": "",
  408. "ratings": [
  409. {
  410. "username": "2******3",
  411. "rateTime": 1469271264000,
  412. "rateType": 0,
  413. "text": "",
  414. "avatar": "http://static.galileo.xiaojukeji.com/static/tms/default_header.png"
  415. }
  416. ],
  417. "icon": "http://fuss10.elemecdn.com/6/72/cb844f0bb60c502c6d5c05e0bddf5jpeg.jpeg?imageView2/1/w/114/h/114",
  418. "image": "http://fuss10.elemecdn.com/6/72/cb844f0bb60c502c6d5c05e0bddf5jpeg.jpeg?imageView2/1/w/750/h/750"
  419. },
  420. {
  421. "name": "红枣山药粥套餐",
  422. "price": 29,
  423. "oldPrice": 36,
  424. "description": "红枣山药糙米粥,素材包,爽口莴笋丝,四川泡菜或八宝酱菜,配菜可备注",
  425. "sellCount": 17,
  426. "rating": 100,
  427. "info": "",
  428. "ratings": [
  429. {
  430. "username": "2******3",
  431. "rateTime": 1469271264000,
  432. "rateType": 0,
  433. "text": "",
  434. "avatar": "http://static.galileo.xiaojukeji.com/static/tms/default_header.png"
  435. }
  436. ],
  437. "icon": "http://fuss10.elemecdn.com/6/72/cb844f0bb60c502c6d5c05e0bddf5jpeg.jpeg?imageView2/1/w/114/h/114",
  438. "image": "http://fuss10.elemecdn.com/6/72/cb844f0bb60c502c6d5c05e0bddf5jpeg.jpeg?imageView2/1/w/750/h/750"
  439. },
  440. {
  441. "name": "红枣山药粥套餐",
  442. "price": 29,
  443. "oldPrice": 36,
  444. "description": "红枣山药糙米粥,素材包,爽口莴笋丝,四川泡菜或八宝酱菜,配菜可备注",
  445. "sellCount": 17,
  446. "rating": 100,
  447. "info": "",
  448. "ratings": [
  449. {
  450. "username": "2******3",
  451. "rateTime": 1469271264000,
  452. "rateType": 0,
  453. "text": "",
  454. "avatar": "http://static.galileo.xiaojukeji.com/static/tms/default_header.png"
  455. }
  456. ],
  457. "icon": "http://fuss10.elemecdn.com/6/72/cb844f0bb60c502c6d5c05e0bddf5jpeg.jpeg?imageView2/1/w/114/h/114",
  458. "image": "http://fuss10.elemecdn.com/6/72/cb844f0bb60c502c6d5c05e0bddf5jpeg.jpeg?imageView2/1/w/750/h/750"
  459. },
  460. ]
  461. },
  462. {
  463. "name": "冰爽饮品限时特惠",
  464. "type": 1,
  465. "foods": [
  466. {
  467. "name": "VC无限橙果汁",
  468. "price": 8,
  469. "oldPrice": 10,
  470. "description": "",
  471. "sellCount": 15,
  472. "rating": 100,
  473. "info": "",
  474. "ratings": [
  475. {
  476. "username": "3******c",
  477. "rateTime": 1469281964000,
  478. "rateType": 0,
  479. "text": "还可以",
  480. "avatar": "http://static.galileo.xiaojukeji.com/static/tms/default_header.png"
  481. },
  482. {
  483. "username": "2******3",
  484. "rateTime": 1469271264000,
  485. "rateType": 0,
  486. "text": "",
  487. "avatar": "http://static.galileo.xiaojukeji.com/static/tms/default_header.png"
  488. }
  489. ],
  490. "icon": "http://fuss10.elemecdn.com/e/c6/f348e811772016ae24e968238bcbfjpeg.jpeg?imageView2/1/w/114/h/114",
  491. "image": "http://fuss10.elemecdn.com/e/c6/f348e811772016ae24e968238bcbfjpeg.jpeg?imageView2/1/w/750/h/750"
  492. },
  493. {
  494. "name": "VC无限橙果汁",
  495. "price": 8,
  496. "oldPrice": 10,
  497. "description": "",
  498. "sellCount": 15,
  499. "rating": 100,
  500. "info": "",
  501. "ratings": [
  502. {
  503. "username": "3******c",
  504. "rateTime": 1469281964000,
  505. "rateType": 0,
  506. "text": "还可以",
  507. "avatar": "http://static.galileo.xiaojukeji.com/static/tms/default_header.png"
  508. },
  509. {
  510. "username": "2******3",
  511. "rateTime": 1469271264000,
  512. "rateType": 0,
  513. "text": "",
  514. "avatar": "http://static.galileo.xiaojukeji.com/static/tms/default_header.png"
  515. }
  516. ],
  517. "icon": "http://fuss10.elemecdn.com/e/c6/f348e811772016ae24e968238bcbfjpeg.jpeg?imageView2/1/w/114/h/114",
  518. "image": "http://fuss10.elemecdn.com/e/c6/f348e811772016ae24e968238bcbfjpeg.jpeg?imageView2/1/w/750/h/750"
  519. },
  520. {
  521. "name": "VC无限橙果汁",
  522. "price": 8,
  523. "oldPrice": 10,
  524. "description": "",
  525. "sellCount": 15,
  526. "rating": 100,
  527. "info": "",
  528. "ratings": [
  529. {
  530. "username": "3******c",
  531. "rateTime": 1469281964000,
  532. "rateType": 0,
  533. "text": "还可以",
  534. "avatar": "http://static.galileo.xiaojukeji.com/static/tms/default_header.png"
  535. },
  536. {
  537. "username": "2******3",
  538. "rateTime": 1469271264000,
  539. "rateType": 0,
  540. "text": "",
  541. "avatar": "http://static.galileo.xiaojukeji.com/static/tms/default_header.png"
  542. }
  543. ],
  544. "icon": "http://fuss10.elemecdn.com/e/c6/f348e811772016ae24e968238bcbfjpeg.jpeg?imageView2/1/w/114/h/114",
  545. "image": "http://fuss10.elemecdn.com/e/c6/f348e811772016ae24e968238bcbfjpeg.jpeg?imageView2/1/w/750/h/750"
  546. },
  547. {
  548. "name": "VC无限橙果汁",
  549. "price": 8,
  550. "oldPrice": 10,
  551. "description": "",
  552. "sellCount": 15,
  553. "rating": 100,
  554. "info": "",
  555. "ratings": [
  556. {
  557. "username": "3******c",
  558. "rateTime": 1469281964000,
  559. "rateType": 0,
  560. "text": "还可以",
  561. "avatar": "http://static.galileo.xiaojukeji.com/static/tms/default_header.png"
  562. },
  563. {
  564. "username": "2******3",
  565. "rateTime": 1469271264000,
  566. "rateType": 0,
  567. "text": "",
  568. "avatar": "http://static.galileo.xiaojukeji.com/static/tms/default_header.png"
  569. }
  570. ],
  571. "icon": "http://fuss10.elemecdn.com/e/c6/f348e811772016ae24e968238bcbfjpeg.jpeg?imageView2/1/w/114/h/114",
  572. "image": "http://fuss10.elemecdn.com/e/c6/f348e811772016ae24e968238bcbfjpeg.jpeg?imageView2/1/w/750/h/750"
  573. },
  574. {
声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/繁依Fanyi0/article/detail/247374
推荐阅读
相关标签
  

闽ICP备14008679号