3.6.1 首頁輪播圖介面

• 目錄結構
  

• index資料夾
  
  • index.js index的js檔案
  • index.wxml index的頁面檔案
  • index.wxss index的樣式檔案

頁面 index.wxml

<swiper indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration
 
}}" 
indicator-color="{{indicatorColor}}" indicator-active-color="{{indicatorActiveColor}}">
  <block wx:for="{{imgUrls}}">
    <swiper-item>
    <navigator url="/pages/detail/detail?id={{item.goodsid}}">

      <image src="{{item.img_path}}" class="slide-image"/>
    </navigator
 
>
    </swiper-item>
  </block>
</swiper>

• 樣式 index.wxss

swiper{ height: 750rpx;}
.slide-image{  
    width: 100%;  
}
swiper-item image {
    width: 100%;
    display: inline-block;
    overflow: hidden;
    height: 100%;
}
swiper-item navigator { display: inline; }

• js index.js

• 步驟：
  1.先在Page裡面的data 做好配置假資料，先在檢視頁面，顯示輪播圖

  //index.js
  //獲取應用例項
  const app = getApp()
  
  Page({
    data: {
      indicatorDots: true,//是否顯示面板指示點
      autoplay: true,
      interval: 2000,//自動切換時間間隔
      duration: 1000,//滑動動畫時長
      indicatorColor: "#eee",//普通輪播點背景色
      indicatorActiveColor: "#f10215",//選中輪播點背景色
      imgUrls: [
        {
          goodsid: 1, img_path: 'http://html.001php.com/Public/Home/img/H5.png'
        },
        {
          goodsid: 2, img_path: 'http://html.001php.com/Public/Home/img/H5.png'
        },
        {
          goodsid: 3, img_path: 'http://html.001php.com/Public/Home/img/H5.png'
        },
      ]
    },
  });

  2.寫介面，在 xcx 專案新建控制器 index 新建方法 get_banner ,然後通過 http://localhost/xcx/public/index/get_banner.html 訪問介面，看看可不可以獲取資料

  以下介面使用TP5開發

  <?php
  namespace app\index\controller;
  
  class Index {
      public function get_banner()
      {
          $data['status'] = 1;
          $data['msg'] = '查詢成功';
          $data['info'] = db('banner')->order('create_time desc')->select();
          // var_dump($banner);
          return json_encode($data);
      }
  
  }
  

  3.在 onLoad 呼叫介面，獲取輪播資料，然後存入 data ,頁面即可更新輪播圖

   //頁面一載入的時候執行
    onLoad: function () {
  
      var that = this;
      //網路請求
      wx.request({
        url: 'http://localhost/xcx/public/index/get_banner.html',
        method: 'POST',
        data: { openid: 1 },
        dataType: 'json',
        header: {
          "Content-Type": "application/x-www-form-urlencoded"
        },
        //成功後的回撥
        success: function (res) {
          //console.log(res.data.info)
          //console.log(res)
  
          that.setData({
            imgUrls: res.data.info,
          })
        }
      })
    }

  首頁輪播圖小程式完成