无码人妻精一区二区三区,eeuss影院www在线观看,无码精品久久久久久人妻中字,日韩av高清在线看片

接下來就讓我們來開始學(xué)習(xí)列表的上拉加載和下拉刷新的實(shí)現(xiàn)吧（通過聚合數(shù)據(jù)平臺獲取微信新聞）。

1.介紹幾個(gè)組件

1.1 scroll-view 組件

1.2 image組件

注意：使用豎向滾動時(shí)，需要給一個(gè)固定高度，通過 WXSS 設(shè)置 height。

注意：mode有12種模式，其中3種是縮放模式，9種是裁剪模式。

1.3 Icon組件

iconType: [

‘success', ‘info', ‘warn', ‘waiting', ‘safe_success', ‘safe_warn',

‘success_circle', ‘success_no_circle', ‘waiting_circle', ‘circle', ‘download',

‘info_circle', ‘cancel', ‘search', ‘clear'

]

2.列表的上拉加載和下拉刷新的實(shí)現(xiàn)

2.1先來張效果圖

2.2邏輯很簡單，直接上代碼

2.2.1 detail.wxml 布局文件

<loading hidden="{{hidden}}" bindchange="loadingChange">

 加載中...

 </loading>

 <scroll-view scroll-y="true" style="height: 100%;" bindscrolltolower="loadMore" bindscrolltoupper="refesh">

 <view wx:if="{{hasRefesh}}" style="display: flex;flex-direction: row;align-items: center;align-self: center;justify-content: center;">

 <icon type="waiting" size="45"/><text>刷新中...</text></view>

 <view wx:else style="display:none" ><text></text></view>

 <view class="lll" wx:for="{{list}}" wx:for-item="item" bindtap="bindViewTap"

 data-title="{{item.title}}" >

 <image style=" width: 50px;height: 50px;margin: 20rpx;" src="{{item.firstImg}}" ></image>

 <view class="eee" >

 <view style="margin:5px;font-size:8px"> 標(biāo)題:{{item.title}}</view>

 <view style="margin:5px;color:red;font-size:6px"> 來源:{{item.source}}</view>

 </view>

</view>

<view class="tips1">

 <view wx:if="{{hasMore}}" style="display: flex;flex-direction: row;align-items: center;align-self: center;justify-content: center;">

 <icon type="waiting" size="45"/><text>玩命的加載中...</text></view>

 <view wx:else><text>沒有更多內(nèi)容了</text></view>

 </view>

 </scroll-view>

2.2.1 detail.js邏輯代碼文件
 

var network_util = require('../../utils/network_util.js');

var json_util = require('../../utils/json_util.js');

Page({

 data:{

 // text:"這是一個(gè)頁面"

 list:[],

 dd:'',

 hidden:false,

 page: 1,

 size: 20,

 hasMore:true,

 hasRefesh:false

 },

 onLoad:function(options){

 var that = this;

 var url = 'http://v.juhe.cn/weixin/query?key=f16af393a63364b729fd81ed9fdd4b7d&pno=1&ps=10';

 network_util._get(url,

 function(res){

 that.setData({

 list:res.data.result.list,

 hidden: true,

 });

 },function(res){

 console.log(res);

 });

 },

 onReady:function(){

 // 頁面渲染完成

 },

 onShow:function(){

 // 頁面顯示

 },

 onHide:function(){

 // 頁面隱藏

 },

 onUnload:function(){

 // 頁面關(guān)閉

 },

 //點(diǎn)擊事件處理

 bindViewTap: function(e) {

 console.log(e.currentTarget.dataset.title);

 },

 //加載更多

 loadMore: function(e) {

 var that = this;

 that.setData({

 hasRefesh:true,});

 if (!this.data.hasMore) return

 var url = 'http://v.juhe.cn/weixin/query?key=f16af393a63364b729fd81ed9fdd4b7d&pno='+(++that.data.page)+'&ps=10';

 network_util._get(url,

 function(res){

 that.setData({

 list: that.data.list.concat(res.data.result.list),

 hidden: true,

 hasRefesh:false,

 });

 },function(res){

 console.log(res);

 })

},

//刷新處理

refesh: function(e) {

 var that = this;

 that.setData({

 hasRefesh:true,

 });

 var url = 'http://v.juhe.cn/weixin/query?key=f16af393a63364b729fd81ed9fdd4b7d&pno=1&ps=10';

 network_util._get(url,

 function(res){

 that.setData({

 list:res.data.result.list,

 hidden: true,

 page:1,

 hasRefesh:false,

 });

 },function(res){

 console.log(res);

 })

},

})