小程序项目之猫眼案例——下拉刷新、触底加载更多数据(分页)、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]
})

你可能感兴趣的:(小程序知识,vue,js,小程序)