微信小程序开发日记——高仿知乎日报（中） - iyifei(5)_H5之家

分享肯定是做不了啦，哈哈，但是效果还是需要有的，就一个modal弹窗，显示各类社交应用的图标就行啦。

model的隐藏和显示都是通过hidden属性来控制。

底部工具栏中还有一个按钮是刷新，其实就是一个重新调用接口请求数据的过程而已。

//重新加载数据 reloadEvent: function() { loadData.call( this ); },

评论页面

评论页面蛮简单的，就是展示评论列表，但是要展示两部分，一部分是长评，另一部分是短评。长评跟短评的布局都是通用的。进入到评论页面时，如果长评有数据，则先加载长评，短评需要用户点击短评标题才加载，否则就直接加载短评。这需要上一个详情页面中传递日报的额外信息过来（即长评数量和短评数量）。

之前已经在日报详情页面中，顺便加载了额外的信息

//请求日报额外信息（主要是评论数和推荐人数） requests.getStoryExtraInfo( id, ( data ) => { _this.setData( { extraInfo: data }); });

在跳转到评论页面的时候顺便传递评论数量，这样我们就不用在评论页面在请求一次额外信息了。

//跳转到评论页面 toCommentPage: function( e ) { var storyId = e.currentTarget.dataset.id; var longCommentCount = this.data.extraInfo ? this.data.extraInfo.long_comments : 0; //长评数目 var shortCommentCount = this.data.extraInfo ? this.data.extraInfo.short_comments : 0; //短评数目 //跳转到评论页面，并传递评论数目信息 wx.navigateTo( { url: '../comment/comment?lcount=' + longCommentCount + '&scount=' + shortCommentCount + '&id=' + storyId }); }

评论页面接受参数

//获取传递过来的日报id 和评论数目 onLoad: function( options ) { var storyId = options[ 'id' ]; var longCommentCount = parseInt( options[ 'lcount' ] ); var shortCommentCount = parseInt( options[ 'scount' ] ); this.setData( { storyId: storyId, longCommentCount: longCommentCount, shortCommentCount: shortCommentCount }); },

进入页面立刻加载数据

//加载长评列表 onReady: function() { var storyId = this.data.storyId; var _this = this; this.setData( { loading: true, toastHidden: true }); //如果长评数量大于0，则加载长评，否则加载短评 if( this.data.longCommentCount > 0 ) { requests.getStoryLongComments( storyId, ( data ) => { console.log( data ); _this.setData( { longCommentData: data.comments }); }, () => { _this.setData( { toastHidden: false, toastMsg: '请求失败' }); }, () => { _this.setData( { loading: false }); }); } else { loadShortComments.call( this ); } } /** * 加载短评列表 */ function loadShortComments() { var storyId = this.data.storyId; var _this = this; this.setData( { loading: true, toastHidden: true }); requests.getStoryShortComments( storyId, ( data ) => { _this.setData( { shortCommentData: data.comments }); }, () => { _this.setData( { toastHidden: false, toastMsg: '请求失败' }); }, () => { _this.setData( { loading: false }); }); }