!--pages/shopList/shopList.wxml-->
<view class="shop-item" wx:for="{{shopList}}" wx:key="id">
<view class="thumb">
<image src="{{item.images[0]}}"></image>
</view>
<view class="information">
<view class="shoptitle">{{item.name}}</view>
<view>电话：{{item.phone}}</view>
<view>地址：{{item.address}}</view>
<view>营业时间：{{item.businessHours}}</view>
</view>
</view>
/* pages/shopList/shopList.wxss */
.shop-item {
display: flex;
/* 每个图片和边框的距离 */
padding: 15rpx;
/* 加个边框 */
border: 1rpx solid #efefef;
/* 每个item项之间15rpx距离 */
margin: 15rpx;
/* 每一个item项加了一个圆角的效果 */
border-radius: 8rpx;
/* 加个盒子阴影，横向纵向扩散分别为1rpx 扩散为15rpx 颜色为灰 */
box-shadow: 1rpx 1rpx 15rpx #ddd;
}
.thumb image {
width: 250rpx;
height: 250rpx;
/* 图片之间无间隙 */
display: block;
/* 图片和文字之间的间隔 */
margin-right: 12rpx;
}
.information {
display: flex;
flex-direction: column;
justify-content: space-around;
font-size: 24rpx;
}
.shoptitle {
font-weight: bold;
}
// pages/shopList/shopList.js
Page({
/**
* 页面的初始数据
*/
data: {
shopList: [],
page: 1,
pageSize: 10,
total: 0,
title1: '1',
id: 0
},
getShopList() {
wx.request({
url: 'https://applet-base-api-t.itheima.net/categories/'+this.data.id+'/shops',
method: "GET",
data: {
_page: this.data.page,
_limit: this.data.pageSize
},
success: (response) => {
console.log(response)
this.setData({
shopList:[...this.data.shopList,...response.data] ,
total:response.header['X-Total-Count']-0,
})
}
})
},
/**
* 生命周期函数--监听页面加载
*/
onLoad(options) {
this.setData({
title1: options.name,
id: options.id
}),
this.getShopList()
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady() {
wx.setNavigationBarTitle({
title: this.data.title1,
})
},
/**
* 生命周期函数--监听页面显示
*/
onShow() {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide() {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload() {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh() {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom() {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage() {
}
})
