/** * 请求图书信息 */ function requestData() { var _this = this; var q = this.data.searchKey; var start = this.data.pageIndex; this.setData( { loadingMore: true, isInit: false }); updateRefreshBall.call( this ); requests.requestSearchBook( { q: q, start: start }, ( data ) => { if( data.total == 0 ) { //没有记录 _this.setData( { totalRecord: 0 }); } else { _this.setData( { pageData: _this.data.pageData.concat( data.books ), pageIndex: start + 1, totalRecord: data.total }); } }, () => { _this.setData( { totalRecord: 0 }); }, () => { _this.setData( { loadingMore: false }); }); }
上拉加载的效果是一个小球不停的变换颜色，需要一个颜色列表
//刷新动态球颜色 var iconColor = [ '#353535', '#888888' ];
然后用一个定时器来动态改变小球图标的颜色
/** * 刷新上拉加载效果变色球 */ function updateRefreshBall() { var cIndex = 0; var _this = this; var timer = setInterval( function() { if( !_this.data[ 'loadingMore' ] ) { clearInterval( timer ); } if( cIndex >= iconColor.length ) cIndex = 0; _this.setData( { footerIconColor: iconColor[ cIndex++ ] }); }, 100 ); }
详细页面的显示需要到首页点击了具体图书的id，所以需要首页传值过来，这里用到了小程序土工的wx.navigateTo方法，给其指定的url参数后面带以查询字符串格式形式的参数，被跳转的页面就会在onLoad方法中得到值。
//跳转到详细页面 toDetailPage: function( e ) { var bid = e.currentTarget.dataset.bid; //图书id [data-bid] wx.navigateTo( { url: '../detail/detail?id=' + bid }); }
detail.js中接受参数
onLoad: function( option ) { this.setData({ id: option.id }); }
其实小程序的页面制作跟平时的html和css差不多，只是页面中不能用传统的html标签，而是改用了小程序提供的自定义标签，小程序对css的支持也有限制，注意哪些写法不兼容也差不多懂了。操作页面变化是通过数据变化来表现出来的，这点有点像react和vue。以上的demo用到的知识点并不多，主要是页面的数据绑定、事件绑定、模版知识和网络请求等相关api。仔细看看文档也差不多可以做出一个小例子。
最终效果图
总体来说，Demo很简单，只有两个页面，界面也是丑丑的T_T，算是我入门小程序的第一课吧。
示例代码
源码地址：demo下载