<output id="qn6qe"></output>

    1. <output id="qn6qe"><tt id="qn6qe"></tt></output>
    2. <strike id="qn6qe"></strike>

      亚洲 日本 欧洲 欧美 视频,日韩中文字幕有码av,一本一道av中文字幕无码,国产线播放免费人成视频播放,人妻少妇偷人无码视频,日夜啪啪一区二区三区,国产尤物精品自在拍视频首页,久热这里只有精品12

      微信小程序-今日頭條案例

      github地址:   https://github.com/HowName/toutiao

      項目為仿今日頭條,使用了百度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: '列表'
          });
        },
        onShow:function(){
          // 頁面顯示
        },
        onHide:function(){
          // 頁面隱藏
        },
        onUnload:function(){
          // 頁面關閉
        }
      });

       

      //index.wxml
      <loading hidden="{{loadingHidden}}"> 
          加載中...
      </loading>
      
      <scroll-view scroll-y="true" style="height: 100%;" scroll-into-view="{{toView}}" upper-threshold="5" lower-threshold="5" bindscrolltoupper="refresh" bindscrolltolower="loadMore">
      
          <swiper indicator-dots="true" id="swiper-view" autoplay="true" interval="2000">
              <block wx:for="{{imgUrls}}">
                  <swiper-item>
                      <image src="{{item}}" width="100%" height="150"/>
                  </swiper-item>
              </block>
          </swiper>
      
          <view id="top-id"> </view>
          <view id="top-id2"> </view>
          <block wx:for="{{renderData}}">
              <view class="container">  
                  <view class="title">
                      <text class="title-text">{{item.title}}</text>
                  </view>
              
                  <view class="images"  wx:if="{{item.imageurls.length > 0}}">
                      <block wx:for="{{item.imageurls}}" wx:for-item="imgItem" wx:for-index="imgIndex">
                          <image wx:if="{{imgIndex <= 2}}"  src="{{imgItem.url}}"></image>
                      </block>
                  </view>
                  <view class="source">{{item.source}}  {{item.pubDate}}</view>
              </view>
          </block>
      </scroll-view>
      

       完!

       

        

        

       

      posted @ 2016-10-05 17:37  756567406  閱讀(2225)  評論(0)    收藏  舉報
      主站蜘蛛池模板: 亚洲一区二区啊射精日韩| 中文字幕在线精品人妻| 久久综合精品国产一区二区三区无 | 日本一码二码三码的区分| 国产综合久久久久久鬼色| 国产精品免费中文字幕| 99久久er这里只有精品18| 国产精品高清视亚洲中文| 久久精品亚洲中文无东京热| 长腿校花无力呻吟娇喘| 99久久婷婷国产综合精品青草漫画| 欧美性猛交xxxx免费看| 亚洲精品一区二区三区四区乱码| 沁水县| 国产精品一区二区三区性色 | 日本久久99成人网站| 一区二区三区鲁丝不卡| 国产av普通话对白国语| 亚洲精品综合网二三区| 潘金莲高清dvd碟片| 中文字幕制服国产精品| 国产精品久久久久久妇女| 久久国产自拍一区二区三区| 一二三四免费中文字幕| 免费一区二三区三区蜜桃| 国产a在视频线精品视频下载| 中文字幕无码视频手机免费看| 日韩精品成人一区二区三| 中文字幕乱码熟女人妻水蜜桃| 亚洲另类激情专区小说婷婷久| 色综合色国产热无码一| 欧美成人午夜在线观看视频| 国产成人久久精品一区二区| 一本无码在线观看| 色综合色狠狠天天综合网| 国产精品多p对白交换绿帽| 亚洲一区二区三区 无码| 成人伊人青草久久综合网| 最新国产精品好看的精品| 精品无码成人片一区二区| 日韩无人区码卡1卡2卡|