小程序實踐項目

首先要根據產品需求畫出原型圖，須要實現的功能點，模塊劃分，大體的文件結構大概構思好，不至於踩深坑

1.配置全局 文件 app.json 、app.js 、app.wxss 基本的配置或是函數封裝，可參考已封裝好的庫  xcx-base

 

用swiper 作tab 選項，左右滑動切換體驗較好

<view class="navTab">
  <view class="top-tab-item {{idx === currentIndex ? 'active' : ''}}" wx:for="{{topTabItems}}" wx:for-item="item" wx:key="{{idx}}" wx:for-index="idx" data-idx="{{idx}}" bindtap="switchTab">
    {{item}}
  </view>
</view>

switchTab:function(e){
    this.setData({
      currentIndex:e.currentTarget.dataset.idx
    });
    // 若是須要加載數據
    if (this.needLoadNewDataAfterSwiper()) {
      this.refreshNewData();
    }
},

 

流程分析：

　　頁面在onload 的時候首先加載數據 在切換tab選項內容的時候 判斷當前頁的內容是否須要加載數據，根據每一個內容的數據數值的長度值大於零 若是爲空的時候就加載最新

　　因爲如今小程序 scroll-view 和下拉 onPullDownRefresh 沒有辦法共存，因此暫時不考慮下拉刷新。 上拉加載監聽 scroll-view 的  bindscrolltolower 事件 page頁數加一 將數據拼接

　　將每一個段子的結構封裝成組件，綁定點擊事件攜帶參數跳轉相應的內頁面

 

 

 

調用api接口 實現列表數據渲染，實現上拉加載下拉刷新功能

注：小程序中下拉刷新不能和 scroll-view 一塊兒使用，會產生衝突，使用 scroll-view 滾動組件 暫時不考慮下拉刷新

 

*  在首次調用加載時顯示loading 組件會有良好的用戶體驗， 根據頁數參數判斷是第一頁的時候將數據直接賦值，不然數據追加賦值，若是當前頁數大於等於總頁數，則加載完畢

var app = getApp();
var requestUrl = "https://route.showapi.com/255-1";
var page_num = 1;
var page_size =10

getList(){
    if(page_num>=allPage){
      return
    }
    wx.showNavigationBarLoading();    // 頂部欄顯示加載
    var that = this;
    wx.request({
      url: requestUrl,
      data: {
        'showapi_appid':app.globalData.appid,
        'showapi_sign':app.globalData.apiKey,
        'page':page_num,
        'type':app.globalData.tText
      },
      method: 'GET',
      success: function(res){
        // 判斷若是是第一頁，顯示數據，不然追加顯示
        if(page_num == 1)
          that.setData({ listData:res.data.showapi_res_body.pagebean.contentlist });
        else
          that.setData({ listData: that.data.jokes.concat(res.data.showapi_res_body.pagebean.contentlist) });
        // 頁數加一頁
        page_num += 1;
        wx.hideNavigationBarLoading();
      },
      fail: function() {
        // fail
      },
      complete: function() {
        // complete
      }
    })
}    

 

若是列表加載的是圖片的話，並且須要點擊放大預覽的話。能夠將數據的src 綁定到容器的 data-imgUrl 自定義屬性，綁定點擊事件，調用圖片預覽api 傳入當前圖片的src

previewImg:function(e){
    console.log(e);
    wx.previewImage({
      // current: 'String', // 當前顯示圖片的連接，不填則默認爲 urls 的第一張
      urls: [e.currentTarget.dataset.imgurl],
      success: function(res){
        // success
      },
      fail: function() {
        // fail
      },
      complete: function() {
        // complete
      }
    })
  }