項目實戰 02（搜索框 輪播圖）這是最後一個！ 跳級真的不好...還是按部就班！

1.搜索框（自定義組件：在components下新建一個Searchinput，後右鍵新建四個文件，哪個文件要用就在哪個文件中聲明，個人在index的.json下的usingComponents，然後將Searchinput下的相對路徑進行復制，路徑的.js不要，做完一切之後在index.wxml下測試，再回到Searchinput.wxml寫下“搜索”，最後在visual studio code（搜索微信小程序將所有組件安裝）下將wxss改爲less代碼敲完後會自動編譯出另外的wxcss，將裏面的內容複製粘貼到Searchinput.wxss(沒有的話要自己新建）即可！可愛的搜索框就出來了， 點擊還會跳轉喔。。。。。。搞了三個多鍾，我凌亂了…記下這踩亢之旅，希望對朋友們有幫助）
2.輪播圖(1.把不校驗勾上；2.找到域名（先使用，後期上線要去到註冊開發的也頁面搞域名；3.做完這些到控制檯查看）
index.js

wx-Page({
  data: {
    /*輪播圖數組*/
    swiperList:[]
  },
  onLoad: function(options){
    /*發送異步請求獲取輪播圖數據*/
      wx.request({
        url: 'https://api.zbztb.cn/api/public/v1/home/swiperdata',
        success: (result) => {
          this.setData({
            swiperList:result.data.message
          })
        }
      });
  },
})

index.wsml

<view class="pyg_index">
<Searchinput></Searchinput>
<view class="index_swiper">
<swiper autoplay indicator-dots circular>
<swiper-item
wx:for="{{swiperList}}"
wx:key="goods_id">
<navigator>
<image mode="widthFix" src="{{item.image_src}}"></image>
</navigator>
</swiper-item>
</swiper>
</view>
</view>

index.wxss

.index_swiper swiper image {
  width: 750rpx;
  height: 340rpx;
}
.index_swiper swiper image image {
  width: 100%;
}

index.less

.index_swiper{
  swiper{
    image{
      width: 750rpx;
      height: 340rpx;
      image{
        width: 100%;
      }
    }
  }
}