117.【微信小程序 - 01】（十三）

非编程式导航->我们这里直接在url的路径里面写Mustache语法。
<navigator class="gird-item" wx:for="{{gridList}}" wx:key="id" url="/pages/shoplist/shoplist?id={{item.id}}&title={{item.name}}" >
  <image src="{{item.icon}}"></image>
  <text>{{item.name}}</text>
</navigator>

<!--pages/home/home.wxml-->
<!-- 轮播图的区域 -->
<swiper indicator-dots circular>
  <swiper-item wx:for="{{swiperList}}" wx:key="id">
    <image src="{{item.image}}"></image>
  </swiper-item>
</swiper>
<!-- 九宫格区域 -->
<view class="gird-list">
<!-- Mustach语法可以拼接传参 -->
<navigator class="gird-item" wx:for="{{gridList}}" wx:key="id" url="/pages/shoplist/shoplist?id={{item.id}}&title={{item.name}}" >
  <image src="{{item.icon}}"></image>
  <text>{{item.name}}</text>
</navigator>
</view>
<!-- 图片区域 -->
<view class="img-box">
  <image src="" mode=""/>
</view>

// pages/shoplist/shoplist.js
Page({
  /**
   * 页面的初始数据
   */
  data: {
    params:''   // 页面传递过来的参数
  },
  onLoad(options) { // 1.这里接受到上一个页面传递过来的参数
    this.setData({
      params:options
    })
  },
  onReady() {  // 2.这里小程序初次渲染成功，我们在这里添加自己的渲染
    console.log('商店链表的this->',this)
    wx.setNavigationBarTitle({ // 3.因为这里我们接收不到onLoad的参数，所以onLoad需要转存储到data区域
      title: this.data.params.title,
    })
  }
})

这里面的cate_id是动态参数，表示分类的id
https://applet-base-api-t.itheima.net/categories/:id/shops

1.上拉触底
 /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom() {
    if(this.data.page*this.data.pageSize>=this.data.total){
      this.setData({
        IsNoPage:true
      })
      return wx.showToast({
        title: '最后一页了',
        icon:'error'
      })
    }
    this.setData({
      page:this.data.page+1
    })
    this.getShopList()
  },
  2.下拉刷新
(1).设置出下拉刷新的操作->并设置样式
"enablePullDownRefresh": true
wx.stopPullDownRefresh()
(2).重置data区域的值 -> 页码 和 shopList

// pages/shoplist/shoplist.js
Page({
  /**
   * 页面的初始数据
   */
  data: {
    params:'',   // 页面传递过来的参数
    shopList:[], // 查询到的数据列表
    page:1, // 页数
    pageSize:10, //一页几条
    total:0, // 总共多少条
    IsNoPage:false
  },
  onLoad(options) { // 1.这里接受到上一个页面传递过来的参数
    // 1.将参数转存储到data区域
    this.setData({
      params:options
    })
    // 2.调用网络请求
    this.getShopList()
  },
  getShopList(){ // 通过网络请求获取列表
    wx.showLoading({
      title: '正在加载',
      mask:true
    })
          wx.request({
      // 这里我们动态传参-? 需要用到模板字符串和${}
      url: `https://applet-base-api-t.itheima.net/categories/${this.data.params.id}/shops`,
      method:'GET',
      data:{
        _page:this.data.page, //传递页面的参数
        _limit:this.data.pageSize  // 传递页面的条数
      },
      success:(resp)=>{
        console.log('商店列表resp->',resp)
        this.setData({
          shopList:[...this.data.shopList,...resp.data],  // 链表新数据和旧数据都要
          total:resp.header['X-Total-Count']-0  //赋值总条数并转换为数字
        })
      },
      complete:()=>{
        wx.hideLoading();
      }
    })
  },
  onReady() {  // 2.这里小程序初次渲染成功，我们在这里添加自己的渲染
    console.log('商店链表的this->',this)
    wx.setNavigationBarTitle({ // 3.因为这里我们接收不到onLoad的参数，所以onLoad需要转存储到data区域
      title: this.data.params.title,
    })
  },
  /**
   * 生命周期函数--监听页面显示
   */
  onShow() {
  },
  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide() {
  },
  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload() {
  },
  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh() {
    this.setData({
      page:0
    })
    wx.stopPullDownRefresh()
    this.getShopList()
  },
  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom() {
    if(this.data.page*this.data.pageSize>=this.data.total){
      this.setData({
        IsNoPage:true
      })
      return wx.showToast({
        title: '最后一页了',
        icon:'error'
      })
    }
    this.setData({
      page:this.data.page+1
    })
    this.getShopList()
  },
  /**
   * 用户点击右上角分享
   */
  onShareAppMessage() {
  }
})

function spiltPhone(str){
    if(str!==null){
      // 假如是座机原样输出
      if(str.length!==11){return str}
      // 假如是手机号
      var arr=str.split('')  //根据'' 分割
      arr.splice(3,0,'-') // 在数组的第三个索引位置,删除0个元素,添加成-
      arr.splice(8,0,'-')// 在数组的第八个索引位置,删除0个元素,添加成-
      return arr.join('') // 将数组用''拼凑成字符串
  }
}
// 2. 将这个方法共享出去
module.exports={
  spiltPhone:spiltPhone
}

<wxs module="phone" src="../../utils/tools.wxs"></wxs>

<!--pages/shoplist/shoplist.wxml-->
<wxs module="phone" src="../../utils/tools.wxs"></wxs>
<view class="shop-item" wx:for="{{shopList}}" wx:key="id">
  <view class="thumb">
    <image src="{{item.images[0]}}" mode=""/>
  </view>
  <view class="info">
    <text>{{item.name}}</text>
    <text>电话:{{phone.spiltPhone(item.phone)}}</text>
    <text>地址:{{item.address}}</text>
    <text>营业时间:{{item.businessHours}}</text>
  </view>
</view>
<block wx:if="{{IsNoPage}}" class="tip">
  <text>没有数据了...</text>
</block>

/* 1.整体布局  */
.shop-item{
  /* 页面左右布局 */
  display: flex;
  /* 内边距整体移动一点 */
  padding: 15rpx;
  /* 边框 */
  border: 1px solid #efefef;
  /* 外边距 */
  margin: 15rpx;
  border-radius: 8rpx;
  /* 盒子阴影 */
  box-shadow: 1rpx 1rpx 15rpx #dddddd;
}
/* 2.图片布局 */
.thumb image{
  width: 250rpx;
  height: 250rpx;
  /* 去掉图片之间的间距 */
  display: block;
  /* 右边距加点 */
  margin-right: 10rpx;
}
/* 3.文本布局 */
.info{
  /* 里面的元素,左右布局->目的是分行 */
  display: flex;
  /* 上下垂直布局->在分行的基础上 */
  flex-direction: column;
  /* 在以上的基础上上文本分散垂直对齐 */
  justify-content: space-around;
  font-size: 24rpx;
}
/* 加粗文本标题 */
.info text:nth-child(1){
  font-weight: bold;
}