初步的效果图如下
wxml引用组件compA和compB
compA
compB
<block wx:for="{{rimg2}}" wx:key="index"> <view class="box"> <view class="img"> <image src="{{item.cover_url}}" bindtap="handle" data-url="{{item.cover_url}}"></image> </view> <view class="right"> <view> {{item.title}} </view> <view> {{item.description}} </view> </view> </view> </block>
首页的js引用了封装的接口请求
// 页面的初始数据
data: { img: [], img2: [], page: 1 },
** // 下拉**
onPullDownRefresh: function () { console.log(1); this.data.page = 1 this.getImage() },
** // 上拉** onReachBottom: function () { this.data.page++; this.getImage(); },
** // 获取图片**
getImage: async function () { try { let res = await loginHttp('/api/index', { page: this.data.page }, 'GET', '') let { slides } = res.data let { data } = res.data.goods if (this.data.page == 1) { this.data.img2 = []; } this.setData({ img: slides, img2: [...this.data.img2, ...data] }) } catch (err) { console.log(err); } },
onLoad: function (options) { this.getImage() },
