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 版权协议,转载请附上原文出处链接和本声明。