微信小程式初體驗-清單的上拉加載和下拉重新整理的實作

版權聲明：本文為部落客原創文章，未經部落客允許不得轉載。 https://blog.csdn.net/u010046908/article/details/52733305

微信小程式可謂是9月21号之後最火的一個名詞了，一經出現真是轟炸了整個開發人員，當然很多App開發人員有了一個擔心，微信小程式的到來會不會讓移動端App颠覆，讓移動端的程式員失業，身為一個Android開發者我是不相信的，即使有，那也是需要個一兩年的過度和打磨才能實作的吧。

不管微信小程式是否能颠覆當今的移動開發格局，我們都要積極向上的心态去接收，去學習。不排斥新技術，是以，心動不如行動，趕緊先搭建一個微信小程式開發工具。那麼接下來就讓我們來開始學習清單的上拉加載和下拉重新整理的實作吧（通過聚合資料平台擷取微信新聞）。

1.介紹幾個元件

1.1 scroll-view 元件

注意：使用豎向滾動時，需要給一個固定高度，通過 WXSS 設定 height。

1.2 image元件

注意：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.清單的上拉加載和下拉重新整理的實作

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"> 标題:{{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>沒有更多内容了</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:"這是一個頁面"
    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(){
    // 頁面關閉
  },
   //點選事件處理
  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);
 })
},
})           

最後的效果：

關于新聞的詳情實作，後面在實作，由于還不知道怎麼加載h5頁面。謝謝你學習，有問題直接QQ（1561281670）交流。

代碼位址：https://github.com/lidong1665/WeiXinProject