小程序实践项目

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

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