外层我们用scroll-view包裹以实现加载更多和上拉刷新 bindscrolltoupper=”bindscrolltoupper” 这个属性当滑动到顶部会调用这个方法bindscrolltolower=”bindscrolltolower”这个则滑到底部会调用，起始这里还可以将头部和底部布局抽出来通过引入方式使用，就不用四个页面都写了，自己可以弄下
word.js
Page({ data: { list: [], maxtime: '', loadingHidden: false }, onLoad: function (options) { // 页面初始化 options为页面跳转所带来的参数 //加载最新 this.requestData('newlist'); }, /** * 上拉刷新 */ bindscrolltoupper: function () { //加载最新 // this.requestData('newlist'); }, /** * 加载更多 */ bindscrolltolower: function () { console.log('到底部') //加载更多 this.requestData('list'); }, /** * 请求数据 */ requestData: function (a) { var that = this; console.log(that.data.maxtime) wx.request({ url: 'http://api.budejie.com/api/api_open.php', data: { a: a, c: 'data', maxtime: that.data.maxtime, type: '29', }, method: 'GET', success: function (res) { console.log(res) console.log('上一页', that.data.list) that.setData({ // 拼接数组 list: that.data.list.concat(res.data.list), loadingHidden: true, maxtime: res.data.info.maxtime }) } }) }, onReady: function () { // 页面渲染完成 }, onShow: function () { // 页面显示 }, onHide: function () { // 页面隐藏 }, onUnload: function () { // 页面关闭 } })
这里通过requestData方法加载数据，这个方法接受个参数，就是通过这个参数加载最新还是更多，通过maxtime这个参数去加载下一页，上一页的maxtime作为加载下一页的条件， 加载下一页数据我们通过concat方法将数组进行拼接，并改变加载状态loading。word.wxml和word.json中一个设置内容字体大小，一个设置导航条字，就不贴了。
图片模块
image.wxml
<loading hidden="{{loadingHidden}}">正在加载...</loading> <scroll-view scroll-y="true" bindscrolltolower="bindscrolltolower"> <block wx:for-items="{{list}}"> <!-- 分割线 --> <view></view> <!-- 整体item样式 --> <view> <view> <image src="https://www.jb51.net/{{item.profile_image}}" /> <view> <text>{{item.name}}</text> <text>{{item.passtime}}</text> </view> </view> <text>{{item.text}}</text> <!-- 当时gif图 --> <view wx:if="{{item.is_gif != 0}}"> <image src="https://www.jb51.net/{{item.cdn_img}}" mode="aspectFill" /> </view> <!-- 普通大图 可点击查看全部图片 --> <view data-url="https://www.jb51.net/{{item.cdn_img}}" data-height="{{item.height}}" data-width="{{item.width}}" bindtap="lookBigPicture" wx:elif="{{item.is_gif == 0}}"> <!-- 图片资源 --> <image src="https://www.jb51.net/{{item.cdn_img}}" mode="aspectFill" /> <!-- 图片上浮动的点击查看详情图片view --> <view> <image src="" /> <text>点击查看全图</text> </view> </view> <!-- 底部view样式 --> <view> <view> <image src="" /> <text>{{item.ding}}</text> </view> <view> <image src="" /> <text>{{item.cai}}</text> </view> <view> <image src="" /> <text>{{item.repost}}</text> </view> <view> <image src="" /> <text>{{item.comment}}</text> </view> </view> </view> </block> </scroll-view>
这里主要看中间部分我们通过是否是gif来区分处理图片，不是gif可以点击查看大图，这里有个view悬浮效果，结合界面和image.wxss看
image.wxss
/*中间文字样式*/ .centerContent{ margin-top: 20rpx; width: 100%; height: 600rpx; } /*中间浮动文字样式*/ .flexView{ display: flex; justify-content: center; align-items: center; width: 100%; height: 80rpx; position: absolute; z-index: 2; top: 540rpx; background: #000000; opacity: 0.6 } /*浮动文字*/ .flexText{ color: white; font-size: 35rpx; }
image.js