小程序开发-项目实战-首页轮播图

版权声明：gg原创，未经授权不得转载。 https://blog.csdn.net/qq_34965877/article/details/81240626

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,
          })
        }
      })
    }

  首页轮播图小程序完成