微信小程序实战之上拉(分页加载)效果(2)

上拉加载(分页加载)

当用户打开一个页面时,假设后台数据量庞大时,一次性地返回所有数据给客户端,页面的打开速度就会有所下降,而且用户只看上面的内容而不需要看后面的内容时,也浪费用户流量,基于优化的角度来考虑,后台不要一次性返回所有数据,当用户有需要再往下翻的时候,再加载更加数据出来。

业务需求:

列表滚动到底部时,继续往上拉,加载更多内容

必备参数:

(1)pageindex: 1 //第几次加载
(2)callbackcount: 15 //需要返回数据的个数

其他参数:

根据接口的所需参数

实现原理:

当第一次访问接口时,传递2个必备参数(第1次加载,需要返回数据的个数为15个),和其他参数(需要搜索的字符串)给后台,后台返回第一次数据过来。在请求成功的的回调函数中,判断返回的数据是否>0,是,则取出数据,渲染视图层,并把“上拉加载”显示在列表底部;否,则没有数据可取,并把“没有更多”显示在列表底部,同时把“上拉加载”隐藏掉。

当用户已经滚动到列表底部(这里使用到小程序提供的scroll-view组件的bindscrolltolower事件),触发bindscrolltolower事件,参数pageindex+1,再把2个必备参数(第2次加载,需要返回数据的个数为15个)和其他参数(需要搜索的字符串)给后台,后台把其余的数据返回给前台,前台在原来数据的基础上添加数据。

示例:
wxml:

<view class="search">
 <view class="search-bar">
 <view class="search-wrap">
  <icon type="search" size="16" class="icon-search" />
  <input type="text" placeholder="请输入搜索内容" class="search-input" name="searchKeyword" bindinput="bindKeywordInput" value="{{searchKeyword}}" />
 </view>
 <view class="search-cancel" bindtap="keywordSearch">搜索</view>
 </view>
 <view class="search-result">
 <scroll-view scroll-y="true" bindscrolltolower="searchScrollLower">
  <view class="result-item" wx:for="{{searchSongList}}" wx:key="unique" data-data="{{item}}" >
  <view class="icon{{item.isonly=='0' ? ' nocopyright' : ''}}"></view>
  <text class="title">{{item.songname}}</text>
  <view class="subtitle">
   <text wx:for="{{item.singer}}" wx:key="unique">{{item.name}}</text>
  </view>
  </view>
  <view class="loading" hidden="{{!searchLoading}}">正在载入更多...</view>
  <view class="loading complete" hidden="{{!searchLoadingComplete}}">已加载全部</view>
 </scroll-view>
 </view>
</view>

js:

var util = require('../../utils/util.js')
Page({
 data: {
 searchKeyword: '', //需要搜索的字符
 searchSongList: [], //放置返回数据的数组
 isFromSearch: true, // 用于判断searchSongList数组是不是空数组,默认true,空的数组
 searchPageNum: 1, // 设置加载的第几次,默认是第一次
 callbackcount: 15,  //返回数据的个数
 searchLoading: false, //"上拉加载"的变量,默认false,隐藏
 searchLoadingComplete: false //“没有数据”的变量,默认false,隐藏
 },
 //输入框事件,每输入一个字符,就会触发一次
 bindKeywordInput: function(e){
 console.log("输入框事件")
 this.setData({
  searchKeyword: e.detail.value
 })
 },
 //搜索,访问网络
 fetchSearchList: function(){
 let that = this;
 let searchKeyword = that.data.searchKeyword,//输入框字符串作为参数
  searchPageNum = that.data.searchPageNum,//把第几次加载次数作为参数
  callbackcount =that.data.callbackcount; //返回数据的个数
 //访问网络
 util.getSearchMusic(searchKeyword, searchPageNum,callbackcount, function(data){
  console.log(data)
  //判断是否有数据,有则取数据
  if(data.data.song.curnum != 0){
  let searchList = [];
  //如果isFromSearch是true从data中取出数据,否则先从原来的数据继续添加
  that.data.isFromSearch ? searchList=data.data.song.list : searchList=that.data.searchSongList.concat(data.data.song.list)
  that.setData({
   searchSongList: searchList, //获取数据数组
   zhida: data.data.zhida, //存放歌手属性的对象
   searchLoading: true //把"上拉加载"的变量设为false,显示
  });
  //没有数据了,把“没有数据”显示,把“上拉加载”隐藏
  }else{
  that.setData({
   searchLoadingComplete: true, //把“没有数据”设为true,显示
   searchLoading: false //把"上拉加载"的变量设为false,隐藏
  });
  }
 })
 },
 //点击搜索按钮,触发事件
 keywordSearch: function(e){
 this.setData({
  searchPageNum: 1, //第一次加载,设置1
  searchSongList:[], //放置返回数据的数组,设为空
  isFromSearch: true, //第一次加载,设置true
  searchLoading: true, //把"上拉加载"的变量设为true,显示
  searchLoadingComplete:false //把“没有数据”设为false,隐藏
 })
 this.fetchSearchList();
 },
 //滚动到底部触发事件
 searchScrollLower: function(){
 let that = this;
 if(that.data.searchLoading && !that.data.searchLoadingComplete){
  that.setData({
  searchPageNum: that.data.searchPageNum+1, //每次触发上拉事件,把searchPageNum+1
  isFromSearch: false //触发到上拉事件,把isFromSearch设为为false
  });
  that.fetchSearchList();
 }
 }
})

util.js:

function getSearchMusic(keyword, pageindex, callbackcount, callback){
 wx.request({
 url: 'https://c.y.qq.com/soso/fcgi-bin/search_for_qq_cp',
 data: {
  g_tk: 5381,
  uin: 0,
  format: 'json',
  inCharset: 'utf-8',
  outCharset: 'utf-8',
  notice: 0,
  platform: 'h5',
  needNewCode: 1,
  w: keyword,
  zhidaqu: 1,
  catZhida: 1,
  t: 0,
  flag: 1,
  ie: 'utf-8',
  sem: 1,
  aggr: 0,
  perpage: 20,
  n: callbackcount, //返回数据的个数
  p: pageindex,
  remoteplace: 'txt.mqq.all',
  _: Date.now()
 },
 method: 'GET',
 header: {'content-Type': 'application/json'},
 success: function(res){
  if(res.statusCode == 200){
  callback(res.data);
  }
 }
 })
} 

module.exports = {
 getSearchMusic: getSearchMusic
}

wxss:

page{
 display: flex;
 flex-direction: column;
 height: 100%;
} 

/*搜索*/
.search{
 flex: auto;
 display: flex;
 flex-direction: column;
 background: #fff;
}
.search-bar{
 flex: none;
 display: flex;
 align-items: center;
 justify-content: space-between;
 padding: 20rpx;
 background: #f4f4f4;
}
.search-wrap{
 position: relative;
 flex: auto;
 display: flex;
 align-items: center;
 height: 80rpx;
 padding: 0 20rpx;
 background: #fff;
 border-radius: 6rpx;
}
.search-wrap .icon-search{
 margin-right: 10rpx;
}
.search-wrap .search-input{
 flex: auto;
 font-size: 28rpx;
}
.search-cancel{
 padding: 0 20rpx;
 font-size: 28rpx;
} 

/*搜索结果*/
.search-result{
 flex: auto;
 position: relative;
}
.search-result scroll-view{
 position: absolute;
 bottom: 0;
 left: 0;
 right: 0;
 top: 0;
}
.result-item{
 position: relative;
 display: flex;
 flex-direction: column;
 padding: 20rpx 0 20rpx 110rpx;
 overflow: hidden;
 border-bottom: 2rpx solid #e5e5e5;
} 

.result-item .media{
 position: absolute;
 left: 16rpx;
 top: 16rpx;
 width: 80rpx;
 height: 80rpx;
 border-radius: 999rpx;
}
.result-item .title,
.result-item .subtitle{
 overflow: hidden;
 text-overflow: ellipsis;
 white-space: nowrap;
 line-height: 36rpx;
}
.result-item .title{
 margin-bottom: 4rpx;
 color: #000;
}
.result-item .subtitle{
 color: #808080;
 font-size: 24rpx;
}
.result-item:first-child .subtitle text{
 margin-right: 20rpx;
}
.result-item:not(:first-child) .subtitle text:not(:first-child):before{
 content: '/';
 margin: 0 8rpx;
}
.loading{
 padding: 10rpx;
 text-align: center;
}
.loading:before{
 display: inline-block;
 margin-right: 5rpx;
 vertical-align: middle;
 content: '';
 width: 40rpx;
 height: 40rpx;
 background: url(../../images/icon-loading.png) no-repeat;
 background-size: contain;
 animation: rotate 1s linear infinite;
}
.loading.complete:before{
 display: none;
}

运行:

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

(0)

相关推荐

  • 微信小程序分页加载的实例代码

    整理文档,搜刮出一个微信小程序分页加载的代码,稍微整理精简一下做下分享. 分页加载功能大家遇到的应该会经常遇到,应用场景也很多,例如微博,QQ,微信朋友圈以及新闻类应用,都会有分页加载的功能,这不仅节省了我们用户的流量,还提升了用户体验.那么今天的这篇文章就是介绍微信小程序中如何实现分页加载的功能.照例先上源码及效果图. 源码传送门 要实现这样的功能,一般需要在请求数据时加入当前请求页数,以及页的大小(每页显示的数量)也有一部分接口是通过请求的开始偏移量和结束偏移量请求数据,例如你一页显示10条

  • 微信小程序实战之上拉(分页加载)效果(2)

    上拉加载(分页加载) 当用户打开一个页面时,假设后台数据量庞大时,一次性地返回所有数据给客户端,页面的打开速度就会有所下降,而且用户只看上面的内容而不需要看后面的内容时,也浪费用户流量,基于优化的角度来考虑,后台不要一次性返回所有数据,当用户有需要再往下翻的时候,再加载更加数据出来. 业务需求: 列表滚动到底部时,继续往上拉,加载更多内容 必备参数: (1)pageindex: 1 //第几次加载 (2)callbackcount: 15 //需要返回数据的个数 其他参数: 根据接口的所需参数

  • 微信小程序中使用ECharts 异步加载数据的方法

    官网例子都是同步的,怎么引入及同步demo请移步官网 <view class="container"> <ec-canvas id="mychart-dom-multi-bar" canvas-id="mychart-multi-bar" ec="{{ ecBar }}"></ec-canvas> <ec-canvas id="mychart-dom-multi-scatte

  • 微信小程序中使用ECharts 异步加载数据实现图表功能

    具体代码如下所示: <view class="container"> <ec-canvas id="mychart-dom-bar" canvas-id="mychart-bar" ec="{{ ec }}"></ec-canvas> </view> import * as echarts from '../../ec-canvas/echarts'; var barec = n

  • 微信小程序如何实现全局重新加载

    背景: 随着业务的增加,我们服务器需要计算大量的用户数据,导致用户跟客服反应页面不能正常展示.反馈给开发后,我们一看,是服务器异常的错误.So,产品想看下我们到底有多少用户页面不能正常展示? 方案: 后端人员直接在阿里云后台去查哪些接口异常 前端做一个服务器报错页,这样产品在小程序后台能看到这个页面的PV,UV 技术方案 因为业务庞大,所以我们不可能区在每个页面加上重新加载的逻辑.所以初步考虑使用全局重新加载. 需要解决的问题都有哪些? 首先我们要有网络请求失败的全局控制权(要不然就需要在每个页

  • 微信小程序实现分页加载效果

    分页加载功能大家遇到的应该会经常遇到,应用场景也很多,例如微博,QQ,微信朋友圈以及新闻类应用,都会有分页加载的功能,这不仅节省了我们用户的流量,还提升了用户体验.那么今天的这篇文章就是介绍微信小程序中如何实现分页加载的功能. 数据来自于后端(lumen带分页) /** * @todo 获取订单列表 * @return mixed */ public function getOrderList(){ $field = ['id','order_no','name','created_at','d

  • 微信小程序实现上拉加载功能示例【加载更多数据/触底加载/点击加载更多数据】

    本文实例讲述了微信小程序实现上拉加载功能.分享给大家供大家参考,具体如下: 开发需求 进入页面,加载初始数据,当向上拖动页面至底部,自动加载新的数据,即上拉加载更多数据. 演示 index.wxml <!-- 数据列表 --> <view wx:for="{{listdata}}" wx:key="listdata" class='listitem'> <view class='title'>{{item.title}}</

  • 微信小程序实现下拉刷新和上拉分页效果的方法详解

    目录 下拉刷新 上拉分页 下拉刷新 下拉刷新这个玩意吧,很有用,但是在我博客关联的小程序中,用处不大,也是,我那个小程序一共也没有几个页…… 我这里还是用在首页,上拉分页,下拉刷新重载分页.我就是这么做的. 下拉刷新和上拉分页还是有区别的. 下拉刷新需要在index.json中添加属性: "enablePullDownRefresh": true Index.js Page({ data: { // 文章数组 articleList:[], //每页显示的行数: pagesize: 2

  • 微信小程序实现瀑布流分页滚动加载

    本文实例为大家分享了微信小程序实现瀑布流分页滚动加载的具体代码,供大家参考,具体内容如下 两种分页方式 普通的分页效果会在页面底部提供点击下一页和上一页的按钮,在点击了按钮之后才会触发调取数据的接口,这种方式的用户体验一般 另一种分页效果不需要用户点击按钮,只要浏览到当前页面的后几条数据时,系统会自动发送请求获取后一页的数据,并展示到页面上,这样就可以实现类似无限滚动的效果 以csdn为例,当滚动条到达这个地方时,会自动调用请求下一页数据的接口,然后累加到加载完成的数据列表中 实现思路 滚动分页

  • 微信小程序select下拉框实现效果

    小程序中是没有h5中的下拉 标签的 所以要实现下拉功能就必须自己动手写拉 这里为了更清楚的显示层级 就把源码直接复制过来了 <view class='list-msg'> <view class='list-msg1'> <text>商品金额</text> <text>¥99.00</text> </view> <!--下拉框 --> <view class='list-msg2' bindtap='bi

  • 微信小程序select下拉框实现源码

    这篇文章主要介绍了微信小程序select下拉框实现源码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 小程序中是没有h5中的下拉 标签的 所以要实现下拉功能就必须自己动手写拉,这里为了更清楚的显示小程序层级 就把源码直接复制过来了 <view class='list-msg'> <view class='list-msg1'> <text>商品金额</text> <text>¥99.00<

随机推荐