欢迎光临,了解微信小程序开发,就上易用通!

当前位置 : 易用通 > 小程序模板
微信小程序demo详解:今日头条微信小程序demo详解:今日头条
立即下载

微信小程序demo详解:今日头条

模板分类 : 小程序模板 模板编号 : Y513 源码文件 : 完全开源 下载权限 : VIP会员
模板大小 :  模板指数 :  更新时间 : 2018-02-11 15:17 模板等级 : ☆☆☆☆☆

模板截图:

项目为仿今日头条,使用了百度ApiStore接口查询数据,使用微信组件/api有 封装请求方法,底部tab,启动页动画,loading,scroll-view,swiper,列表页支持上下拉加载更多
效果图:
微信小程序demo详解:今日头条(图1)
启动欢迎页,几行代码可实现旋转与缩放:
  1.  
  2. //flash.js
  3. onReady:function(){
  4.      // 页面渲染完成
  5.      var that = this,duration = 1500;
  6.      var animation = wx.createAnimation({
  7.          duration: duration,
  8.      });
  9.  
  10.      //step() 方法表示一组动画的结束
  11.      animation.scale(2).rotate(360).step();
  12.      animation.scale(1).step();
  13.   
  14.      this.setData({
  15.          animationData : animation.export()
  16.      });
  17.  
  18.      var timestamp = new Date().getTime();
  19.      setTimeout(function(){
  20.        wx.redirectTo({
  21.          url: '../index/index?time='+timestamp
  22.        })
  23.      },duration*2.5);
  24.  
  25. },
  26.  
复制代码

  1. //flash.wxml
  2.  
  3. <image class="flash-img" animation="{{animationData}}" src="{{src}}" ></image>
复制代码

网络请求方法:
  1.  
  2. //app.js
  3.  
  4.   req: function(url,data,param){
  5.  
  6.     var requestData = {
  7.  
  8.       url: url,
  9.  
  10.       data: typeof data == 'object' ? data : {},
  11.  
  12.       method: typeof param.method == 'string' && param.method.length > 0 ? param.method.toUpperCase() : 'GET',
  13.  
  14.       header: typeof param.header == 'object' ? param.header : {},
  15.  
  16.       success: function(res) {
  17.  
  18.         typeof param.success == 'function' && param.success(res);
  19.  
  20.       },
  21.  
  22.       fail: function(res){
  23.  
  24.         typeof param.fail == 'function' && param.fail(res);
  25.  
  26.       },
  27.  
  28.       complete: function(res){
  29.  
  30.         typeof param.complete == 'function' && param.complete(res);
  31.  
  32.       }
  33.  
  34.     };
  35.  
  36.     wx.request(requestData);
  37.  
  38.   },
复制代码

列表页:

  1.  
  2. //index.js
  3.  
  4. var app = getApp(),currentPage = 1;
  5.  
  6. const URL = "http://apis.baidu.com/showapi_open_bus/channel_news/search_news";
  7.  
  8.  
  9.  
  10. Page({
  11.  
  12.   data:{
  13.  
  14.     imgUrls: [
  15.  
  16.       'http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg',
  17.  
  18.       'http://img06.tooopen.com/images/20160818/tooopen_sy_175866434296.jpg',
  19.  
  20.       'http://img06.tooopen.com/images/20160818/tooopen_sy_175833047715.jpg'
  21.  
  22.     ],
  23.  
  24.     toView: "",
  25.  
  26.     loadingHidden:true,
  27.  
  28.     renderData:[],
  29.  
  30.   },
  31.  
  32.   onLoad:function(options){
  33.  
  34.     this.loadDataFromServer();
  35.  
  36.   },
  37.  
  38.   //api读取数据
  39.  
  40.   loadDataFromServer: function(){
  41.  
  42.     var that = this;
  43.  
  44.     that.changeLoadingStatus(false);
  45.  
  46.     app.req(URL,{
  47.  
  48.       page : currentPage,
  49.  
  50.       needContent : 1,
  51.  
  52.     },{
  53.  
  54.       header: { apikey: app.globalData.apikey },
  55.  
  56.       success:function(resp){
  57.  
  58.         console.log(resp);
  59.  
  60.         console.log("成功加载页数 "+currentPage);
  61.  
  62.         var tempData = resp.data.showapi_res_body.pagebean.contentlist;
  63.  
  64.         var toViewId = currentPage % 2 == 0 ? "top-id" : "top-id2"; //需要改变值页面才会重新渲染
  65.  
  66.         that.setData({
  67.  
  68.            //renderData: that.data.renderData.concat(tempData),  合并数组容易超出长度,无法做到无限加载
  69.  
  70.            renderData: tempData,
  71.  
  72.            toView: toViewId,
  73.  
  74.         });
  75.  
  76.         that.changeLoadingStatus(true);
  77.  
  78.       }
  79.  
  80.     });
  81.  
  82.  
  83.  
  84.   },
  85.  
  86.   //加载上一页或者下拉刷新
  87.  
  88.   refresh:function(e){
  89.  
  90.       currentPage = currentPage > 1 ? --currentPage : 1;
  91.  
  92.       this.loadDataFromServer();
  93.  
  94.   },
  95.  
  96.   //加载下一页
  97.  
  98.   loadMore:function(e){
  99.  
  100.       ++currentPage;
  101.  
  102.       this.loadDataFromServer();
  103.  
  104.   },
  105.  
  106.   //改变loading状态
  107.  
  108.   changeLoadingStatus: function(bool){
  109.  
  110.     this.setData({
  111.  
  112.       loadingHidden: bool
  113.  
  114.     });
  115.  
  116.   },
  117.  
  118.   onReady:function(){
  119.  
  120.     // 页面渲染完成
  121.  
  122.     wx.setNavigationBarTitle({
  123.  
  124.       title: '列表'
  125.  
  126.     });
  127.  

加入收藏
立即下载
分享到微信朋友圈
X

免责声明:

1. 本站所有素材(未指定商用),仅限学习交流,请勿用于商业用途。
2. 本站所有小程序模板Demo和图片均来自用户分享上传和网络收集,模板和图片版权归原作者及原出处所有。
3. 未经合法授权,会员不得以任何形式发布、传播、复制、转售该素材。