【微信小程序】基础篇 -- 案例 - 本地生活（列表页面）（三十）

前言

  大家好，又见面了，我是夜阑的狗🐶，本文是专栏【微信小程序开发教程】专栏的第30篇文章;

  今天开始学习微信小程序的第15天💖💖💖，开启新的征程，记录最美好的时刻🎉，每天进步一点点。

  专栏地址：【微信小程序开发教程】， 此专栏是我是夜阑的狗微信小程序开发过程的总结，希望能够加深自己的印象，以及帮助到其他的小伙伴😉😉。

  如果文章有什么需要改进的地方还请大佬不吝赐教👏👏，【源代码下载地址】。

一、案例 - 本地生活（列表页面）

  前面已经学习了WXS 脚本的概念和基本语法，通过栗子了解到WXS的怎么创建和调用。接下来就来根据前面学的知识，在案例-本地生活上进行实践。话不多说，让我们原文再续，书接上回吧。

1、演示页面效果以及主要功能

  首先来看一下页面演示效果，页面中有列表数据，其中还要具备下拉和上拉刷新功能：

  接下来实现主要功能有三个：

• 页面导航并传参
• 上拉触底时加载下一页数据
• 下拉刷新列表数据

  二、页面导航并传参

    首先创建列表页面，可以通过 app.json 文件进行快速创建。

  app.json

  {
    "pages":[
      "pages/home/home",
      "pages/message/message",
      "pages/contact/contact",
      "pages/shoplist/shoplist"
    ],
  }
  

    可以来看一下实际结果：

  

    从 view 组件改造成 navigator 组件，从而支持跳转行为，并且在跳转过程中还要传递参数（id + 名称），为了后续页面标题和查询数据做准备。

  home.wxml