国产亚洲精品资源在线26u

      
      
      <th id="ljgpb"><pre id="ljgpb"><sup id="ljgpb"></sup></pre></th>

      <rp id="ljgpb"></rp>

      您現在的位置: 微信小程序 > 微信小程序DEMO >

      微信小程序demo詳解:今日頭條

      來源:微信小程序 編輯:易用通 發布時間:02-11熱度:
      項目為仿今日頭條,使用了百度ApiStore接口查詢數據,使用微信組件/api有 封裝請求方法,底部tab,啟動頁動畫,loading,scroll-view,swiper,列表頁支持上下拉加載更多
      效果圖:


      啟動歡迎頁,幾行代碼可實現旋轉與縮放:
      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.  
      国产亚洲精品资源在线26u

          
          
          <th id="ljgpb"><pre id="ljgpb"><sup id="ljgpb"></sup></pre></th>

          <rp id="ljgpb"></rp>