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

最后

以上就是细腻秀发为你收集整理的小程序项目之猫眼案例——下拉刷新、触底加载更多数据（分页）、Tab切换效果、Tab列表动态渲染、加载提示功能、完善加载更多功能的全部内容，希望文章能够帮你解决小程序项目之猫眼案例——下拉刷新、触底加载更多数据（分页）、Tab切换效果、Tab列表动态渲染、加载提示功能、完善加载更多功能所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。