小程序项目之猫眼案例——下拉刷新、触底加载更多数据（分页）、Tab切换效果、Tab列表动态渲染、加载提示功能、完善加载更多功能

小程序项目之猫眼案例——下拉刷新、触底加载更多数据（分页）、Tab切换效果、Tab列表动态渲染、加载提示功能、完善加载更多功能

需求分析

• 实现选项卡的切换
• 列表数据的动态加载
• 下拉刷新
• 触底加载

下拉刷新

• 全局下拉刷新与局部下拉刷新
  • 下拉刷新时要调用接口，重新获取最新数据，渲染页面

 // 如果是全局配置app.json，需要在window的子属性配置 enablePullDownRefresh
 // 这样配置，所有的页面都支持下拉动作
 "window": {
    "navigationBarBackgroundColor": "#e54847",
    "navigationBarTitleText": "猫眼电影",
    "backgroundColor": "#F6F6F6",
    "enablePullDownRefresh": true
  },

// 如果是页面配置page.json，那么只有当前页面支持下拉动作
// 页面配置直接就是跟属性配置
{
  "enablePullDownRefresh": true
}

Page({
  // 监听页面的下拉事件
  onPullDownRefresh: function() {
    console.log('下拉动作触发...')
    // 这里就可以调用后台接口
  }
});

触底加载更多数据（分页）

• onReachBottomDistance

  • 控制页面到底部的距离，该属性可以在page.json文件中进行配置，默认值是50

  {
    "enablePullDownRefresh": true,
       //距离底部的距离  达到多少时开始加载数据 
    "onReachBottomDistance": 50
  }
  

• 页面触底时触发的事件函数

    // 监听页面触底事件
    onReachBottom: function() {
      console.log('页面滚动到了底部...')
    }
  

Tab切换效果

• 页面基本布局分析
• 动态控制类名的变化

<view class="tabs" bind:tap='changeTab'>
  <text data-index='1' class='{{currentTab===1?"current":""}}'>热映</text>
  <text data-index='2' class='{{currentTab===2?"current":""}}'>待映</text>
</view>

  // 事件处理函数-控制Tab切换
  changeTab: function(e) {
    // 获取Tab标题的索引
    var index = e.target.dataset.index
    // console.log(typeof index)
    // 更新currentTab的值
    this.setData({
      currentTab: parseInt(index)
    })
  },

• 列表的显示和隐藏控制

// 这种方式控制的是动态添加或者删除标签，性能不太好，类似于vue中的v-if
<view class="items hots" wx:if='{{currentTab===1}}'>
<view class="items-wrap" wx:if='{{currentTab===2}}'>

// 通过这种方式控制的是标签的display样式，性能要更好一些，类似于vue中的v-show
<view class="items hots" hidden='{{currentTab!==1}}'>
<view class="items-wrap" hidden='{{currentTab!==2}}'>

Tab列表动态渲染

• 列表地址
• 加载列表
  • 一般在生命周期onLoad函数中获取后台接口数据

 onLoad: function() {
    // 这里可以调用接口获取数据
    wx.request({
      url: 'https://wx.maoyan.com/mmdb/movie/v2/list/hot.json',
      data: {    
          //从第几条开始查询
        offset: 0,
          //每页查询多少条数据
        limit: 10,
          //筛选条件
        ct: '北京'
      },
      method: 'GET',
      success: (res) => {
        // console.log(res)
        // 获取热映列表数据
        var hots = res.data.data.hot
        // 更新data中的数据
        this.setData({
          hots: hots
        })
      }
    })
 }

• 图片路径处理

// 替换图片真实的路径
info.data.data.hot.forEach(function (val) {
    //接口数据的图片宽高  设置为具体数值
  val.img = val.img.replace('w.h', '128.180');
});
// 第二种用法
hots = hots.map(item=>{
     //接口数据的图片宽高  设置为具体数值
  item.img = item.img.replace('w.h', '128.180')
  return item
})

• 动态填充模板

<navigator wx:for="{{hots}}" wx:key="id" url="./detail">
  <view class="item">
    <!-- 播放按钮 -->
    <text class="play"></text>
    <image src="{{item.img}}"></image>
    <!-- 信息 -->
    <view class="meta">
      <text class="name">{{item.nm}}</text>
      <text class="type">{{item.cat}}</text>
      <text class="actor">{{item.desc}}</text>
      <text class="count">{{item.showInfo}}</text>
    </view>
    <!-- 状态 -->
    <view class="status">
      <block wx:if="{{item.preSale == 0}}">
        <view class="extra">
          {{item.mk}}<text>分</text>
        </view>
        <text class="btn">购票</text>
      </block>
      <block wx:else>
        <view class="extra">
          {{item.wish}}<text>人想看</text>
        </view>
        <text class="btn presell">预售</text>
      </block>
    </view>
  </view>
</navigator>

加载提示功能

• 接口调用之前给个提示，调用成功之后隐藏提示

    // 显示加载提示
    wx.showLoading({
      title: '正在加载..',
        //是否添加透明蒙层
      mask: true
    })
    // 加载成功，隐藏提示效果
    wx.hideLoading()

完善加载更多功能

• 动态累加开发记录数

onReachBottom: function () {
  // 页面滚动到底部的时候触发
  // console.log('bottom')
  // 触底时应该加载下一页数据
  this.setData({
    offset: this.data.offset + this.data.limit
  })
  this.loadData()
}

• 数据列表也需要进行累加

this.setData({
  // 把新请求的一页数据追加到原有的数组列表中
    //即：...作用——把原数组和新数组的数据都进行拆开，然后合并到一个数组中
  list: [...this.data.list, ...hot]
})