黑马优购商城首页的实现

1.1效果图

1.2搜索框

1.2.1新建组件

搜索框因为很多页面都用到我们可以直接封装，在components目录下新建SearchInput文件夹，并通过小程序开发工具，新建组件SearchInput。

1.2.2编写组件

在SearchInput.wxml中编写页面，此处点击跳转搜索页面，代码如下：

<!--components/SearchInput/SearchInput.wxml-->
<view class="search_input">
    <navigator url="/pages/search/index" open-type="navigate">
        搜索
    </navigator>
</view>

1.2.3引用组件

在index/index.json中，配置引入组件，代码如下：

{
   
  "usingComponents": {
   
  // 引用封装的组件
    "SearchInput":"../../components/SearchInput/SearchInput"
  },
  "navigationBarTitleText": "优购首页"
}

1.2.4使用组件

在index/index.wxml中使用声明的组件，代码如下：

<!--index.wxml-->
<SearchInput></SearchInput>

1.2.5效果

1.3轮播图

在写轮播图的时候我们可以使用到下程序提供的swiper和swiper-item组件。

1.3.1获取网络接口

onLoad: function (options) {
   
        // 轮播
        app.http.swiper().then(res=>{
   
            // console.log(res.data.message)
            this.setData({
   
                list:res.data.message
            }