<?php
/**
* User: may
* Date: 2019/1/8
* Time: 下午3:37
*/
namespace app\api\controller;
use think\Controller;
class Index extends Controller{
public function banner(){
$data=array(
'http://tp5.test.com:7888/static/images/littlecodeimages/index.jpg',
'http://tp5.test.com:7888/static/images/littlecodeimages/index2.jpg',
'http://tp5.test.com:7888/static/images/littlecodeimages/index3.jpg',
'http://tp5.test.com:7888/static/images/littlecodeimages/index4.jpg'
);
return json_encode($data);
}
public function index(){
$data=array(
array('logo'=>'http://tp5.test.com:7888/static/images/littlecodeimages/logo.png','detail'=>'http://tp5.test.com:7888/static/images/littlecodeimages/detail.png','title'=>'标题的文字','des'=>'这是我付钱设计师结束时间'),
array('logo'=>'http://tp5.test.com:7888/static/images/littlecodeimages/logo2.png','detail'=>'http://tp5.test.com:7888/static/images/littlecodeimages/detail.png','title'=>'新闻标题2','des'=>'这飒飒飒飒21212121'),
array('logo'=>'http://tp5.test.com:7888/static/images/littlecodeimages/logo3.jpg','detail'=>'http://tp5.test.com:7888/static/images/littlecodeimages/detail.png','title'=>'就介绍介绍就','des'=>'这些都是描述啦啦啦啦啦'),
);
return json_encode($data);
}
}
先在TP5中准备好接口数据,
小程序开发,在index.js文件使用接口数据,先替换列表页数据,具体如下
home.wxml文件如下
<!--pages/index/home.wxml-->
<swiper
indicator-dots="{{indicatorDots}}"
autoplay="{{autoplay}}"
interval="{{interval}}"
duration="{{duration}}"
indicator-dots="true"
>
<block wx:for="{{imgUrls}}">
<swiper-item>
<image src="{{item}}" class="slide-image" width="355" height="150" />
</swiper-item>
</block>
</swiper>
<view class='items-list'>
<view class='pro-item' wx:for="{{proList}}" bindtap='toDetail' data-index='{{index}}'>
<image class='pro-logo' src='{{item.logo}}'></image>
<view class='pro-body'>
<view class='pro-title'>{{item.title}}</view>
<text class='pro-des'>{{item.des}}</text>
<view class='pro-footer'>
<image src='{{item.detail}}' class='btn-detail'></image>
<button open-type='contact' class='btn-ask'> <image src='/images/ask1.png'/></button>
</view>
</view>
</view>
</view>
<button bindtap='copy'>复制文字</button>
home.js具体文件
// pages/index/home.js
Page({
/**
* 页面的初始数据
*/
data: {
imgUrls:null,
indicatorDots: false,
autoplay: false,
interval: 5000,
duration: 1000,
proList: null,
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function () {
this.setData({
test:'01',
}),
this.getImgUrls();
this.getProList();
},
toDetail: function(e){
console.log(e);
var index=e.currentTarget.dataset.index;
var proList=this.data.proList;
var title=proList[index].title;
console.log(index);
console.log(title);
wx.navigateTo({
url: '/pages/detail/detail?index='+index+'&title='+title,
})
},
copy: function () {
if(wx.setClipboardData){
wx.setClipboardData({
data: '这是我要复制的内容,啦啦啦嘎嘣脆2019.1.8',
success(res) {
wx.getClipboardData({
success(res) {
console.log(res.data) // data
wx.showModal({
title: '复制成功',
content: '内容复制成功',
})
}
})
}
})
}else{
wx.showModal({
title: '提示',
content: '你的微信版本太低,请先升级!',
})
}
},
getProList: function () {
var self=this;
wx.request({
url: 'http://tp5.test.com:7888/api/index/index',
method: 'GET',
success: function (res) {
console.log(res);
self.setData({
proList: res.data,
})
}
})
},
getImgUrls: function () {
var self = this;
wx.request({
url: 'http://tp5.test.com:7888/api/index/banner',
method: 'GET',
success: function (res) {
console.log(res);
self.setData({
imgUrls: res.data,
})
}
})
}
})
替换后效果如下,点击详情也后效果