效果图

主页面跳转

{{item.name}}

shoplist.wxml 页面布局

{{item.name}}
电话：{{tools.slitPhone(item.phone)}}
地址：{{item.address}}
营业时间：{{item.businessHours}}

shoplist.wxss 样式处理

/* pages/shoplist/shoplist.wxss */
.shop-item{
  display: flex;
  padding: 15rpx;
  border: 1rpx solid #efefef;
  border-radius: 8rpx;
  margin: 15rpx;
  box-shadow: 1rpx 1rpx 15rpx #ddd;
}
.thumb image{
  width: 250rpx;
  height: 250rpx;
  display: block;
}
.info{
  margin-left: 10rpx;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  font-size: 24rpx;
}
.shop-title{
  font-weight: bold;
}

shoplist.js 数据交互 获取

// pages/shoplist/shoplist.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
      query:{},  //获取url传值的参数
      shopList:[], //商品信息
      page:1,
      pageSize:10,
      total:0,
      isloading:false
  },

  /**
   * 获取商铺列表数据
   */
  getShopList(cb){
    this.setData({
      isloading:true
    })

    // 展示loading 效果
    wx.showLoading({
      title: '数据加载中...',
    })

    wx.request({
      url: 'https://www.escook.cn/categories/'+this.data.query.id+'/shops',
      method:'GET',
      data:{
        _page:this.data.page,
        _limit:this.data.pageSize
      },
      success:(res)=>{
        console.log(res);
        this.setData({
          shopList:[...this.data.shopList, ...res.data],
          total:res.header['X-Total-Count'] - 0
        })
      },
      complete:()=>{
          // 隐藏loading 效果
          wx.hideLoading();
          this.setData({
            isloading:false
          })
         // wx.stopPullDownRefresh();  //关闭下拉刷新窗口
         cb && cb()  // 利用回调函数进行关闭下拉刷新
      }
    })
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
    this.setData({
      query:options
    })
    this.getShopList();
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady() {
    // 利用API动态设置页面的导航栏title setNavigationBarTitle 只能在onReady调用
    wx.setNavigationBarTitle({
      title: this.data.query.title,
    })
  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh() {
    // 重置数据
    this.setData({
      page:1,
      shopList:[],
      total:0
    })
// 传入回调函数执行 下拉刷新关闭
    this.getShopList(()=>{wx.stopPullDownRefresh()});
  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom() {
    if(this.data.isloading) return
    // 判断是否还有下一页数据 
    if(this.data.page * this.data.pageSize >= this.data.total){
      // 没有下一页数据了
      wx.showToast({
        title: '数据加载完毕',
        icon:'none'
      })
      return
    }else{
      this.setData({
        page:this.data.page + 1
      })
      this.getShopList();
    }
  }

})

shoplist.json 页面配置

{
  "usingComponents": {},
  "enablePullDownRefresh": true, 
  "onReachBottomDistance": 100,
  "backgroundColor": "#EFEFEF",
  "backgroundTextStyle":"dark"
}

tools.wxs 脚本处理

function toLower(str){
  return str.toLowerCase()
}

module.exports ={
  toLower:toLower
}

完结