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

    首页轮播图小程序完成


版权声明:本文为qq_34965877原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
原文链接:https://blog.csdn.net/qq_34965877/article/details/81240626