258资源分享网

项目为仿今日头条,使用了百度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: '列表'

 

    });