[解读小程序]菜谱查询+手机号吉凶查询Demo(二)

maxwell0401

于 2016-09-28 00:48:07 发布

阅读量1k

点赞数

分类专栏：微信小程序

本文链接：https://blog.csdn.net/maxwell0401/article/details/52686728

版权

本文介绍了小程序中如何实现菜谱查询功能，通过分析test.wxml、test.wxss和test.js文件，展示了利用wx:for进行列表渲染的方法。讨论了scroll-view的使用，navigator组件的导航功能，并解释了页面间参数传递的过程。在newDetail页面，讲解了如何获取跳转时传递的值并请求详细数据。

摘要由CSDN通过智能技术生成

[解读小程序]菜谱查询+手机号吉凶查询Demo(二)

分析的程序来源:
http://blog.csdn.net/y1258429182/article/details/52666290
还是该作者的demo, 再次感谢.
github地址: https://github.com/StudyLifeTime/Eater-APP

因为是同一个作者的demo,有部分相同或者类似的功能将不再讲解.

菜谱Tab

在app.json中定义多个tab. 其中菜谱是第二个tab.

  "tabBar": {
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首页",
        "iconPath": "pages/img/tab_icon.png",
        "selectedIconPath": "pages/img/tab_select_icon.png"
      },
      {
        "pagePath": "pages/test/test", 
        "text": "菜谱",
        "iconPath": "pages/img/tab_icon.png",
        "selectedIconPath": "pages/img/tab_select_icon.png"
      },
      {
        "pagePath": "pages/mine/mine",
        "text": "我的",
        "iconPath": "pages/img/tab_icon.png",
        "selectedIconPath": "pages/img/tab_select_icon.png"
      }
    ]
  },

可以看到菜谱的入口页面是pages/test/test.js

test.wxml

<view class="container">
<view class="main_content" redirect="false" wx:for="{
   {
   caiItems}}">
  <scroll-view scroll-y="true">
    <navigator url="../newDetail/newDetail?id={
   {
   item.menuId}}&#