项目为仿今日头条,使用了百度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="{{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 = "http://apis.baidu.com/showapi_open_bus/channel_news/search_news";
- Page({
- data:{
- imgUrls: [
- 'http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg',
- 'http://img06.tooopen.com/images/20160818/tooopen_sy_175866434296.jpg',
- 'http://img06.tooopen.com/images/20160818/tooopen_sy_175833047715.jpg'
- ],
- 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: '列表'
- });