项目为仿今日头条,使用了百度ApiStore接口查询数据,使用微信组件/api有 封装请求方法,底部tab,启动页动画,loading,scroll-view,swiper,列表页支持上下拉加载更多
效果图:
启动欢迎页,几行代码可实现旋转与缩放:
//flash.js
onReady:function(){
// 页面渲染完成
var that = this,duration = 1500;
var animation = wx.createAnimation({
duration: duration,
});
//step() 方法表示一组动画的结束
animation.scale(2).rotate(360).step();
animation.scale(1).step();
this.setData({
animationData : animation.export()
});
var timestamp = new Date().getTime();
setTimeout(function(){
wx.redirectTo({
url: '../index/index?time='+timestamp
})
},duration*2.5);
},
复制代码
//flash.wxml
<image class="flash-img" animation="{{animationData}}" src=http://www.yiyongtong.com/archives/"{{src}}" ></image>
复制代码
网络请求方法:
//app.js
req: function(url,data,param){
var requestData = {
url: url,
data: typeof data == 'object' ? data : {},
method: typeof param.method == 'string' && param.method.length > 0 ? param.method.toUpperCase() : 'GET',
header: typeof param.header == 'object' ? param.header : {},
success: function(res) {
typeof param.success == 'function' && param.success(res);
},
fail: function(res){
typeof param.fail == 'function' && param.fail(res);
},
complete: function(res){
typeof param.complete == 'function' && param.complete(res);
}
};
wx.request(requestData);
},
复制代码
//index.js
var app = getApp(),currentPage = 1;
const URL = "";
Page({
data:{
imgUrls: [
'',
'',
''
],
toView: "",
loadingHidden:true,
renderData:[],
},
onLoad:function(options){
this.loadDataFromServer();
},
//api读取数据
loadDataFromServer: function(){
var that = this;
that.changeLoadingStatus(false);
app.req(URL,{
page : currentPage,
needContent : 1,
},{
header: { apikey: app.globalData.apikey },
success:function(resp){
console.log(resp);
console.log("成功加载页数 "+currentPage);
var tempData = resp.data.showapi_res_body.pagebean.contentlist;
var toViewId = currentPage % 2 == 0 ? "top-id" : "top-id2"; //需要改变值页面才会重新渲染
that.setData({
//renderData: that.data.renderData.concat(tempData), 合并数组容易超出长度,无法做到无限加载
renderData: tempData,
toView: toViewId,
});
that.changeLoadingStatus(true);
}
});
},
//加载上一页或者下拉刷新
refresh:function(e){
currentPage = currentPage > 1 ? --currentPage : 1;
this.loadDataFromServer();
},
//加载下一页
loadMore:function(e){
++currentPage;
this.loadDataFromServer();
},
//改变loading状态
changeLoadingStatus: function(bool){
this.setData({
loadingHidden: bool
});
},
onReady:function(){
// 页面渲染完成
wx.setNavigationBarTitle({
title: '列表'
});