首先要根据产品需求画出原型图，需要实现的功能点，模块划分，大致的文件结构大概构思好，不至于踩深坑
1.配置全局 文件 app.json 、app.js 、app.wxss 基本的配置或是函数封装，可参考已封装好的库 xcx-base
调用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 } }) }