DAY08 微信小程序电商项目页面外观实现

今天做了美团外卖的首页。首先，我们编写了位置定位的地址栏。下拉功能需要自己编写，微信公众平台的官方文档未提供。然后我们要实现页面跳转，编写搜索商品的页面 ，完善搜索功能，并让综合排序这一栏也固定到顶部且紧跟着搜索框。

 

1.美团外卖首页

1.1实现方法

swiper控件应用：

首先是两页标签的滑动切换,这里使用的是swiper，它是一款小程序自带的滑块组件。swiper标签就是滑块组件的主体，表示可以滑动的区域，其中indicator-dots属性是设置设置点是否显示。接下来swiper-item标签在swiper之中表示的是每一个用来作为滑动的页面。这里用包裹着swiper-item表示的是使用categoryList对象数组中数据来循环渲染swiper-item，swiper-item的数量取决于categoryList中有多少组数据。之后在swiper-item中的block标签表示的是在一个页面中用categoryList.item中的数据循环渲染多个类似的标签，这些标签就是效果图中的类别项，总共两页，每页八个。这就是swiper和循环渲染的一些基本用法。

1.2程序代码

index.wxml

  <swiper class="categoryList" i