小程序实践项目

首先要根据产品需求画出原型图，需要实现的功能点，模块划分，大致的文件结构大概构思好，不至于踩深坑

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
      }
    })
  }