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


Posted in Javascript onApril 17, 2017

上拉加载(分页加载) 

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

业务需求:

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

必备参数:

(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; 
}

运行:

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

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

Javascript 相关文章推荐
基于jQuery的为attr添加id title等效果的实现代码
Apr 20 Javascript
Javascript核心读书有感之词法结构
Feb 01 Javascript
jQuery实现在textarea指定位置插入字符或表情的方法
Mar 11 Javascript
完美实现八种js焦点轮播图(下篇)
Apr 20 Javascript
js中获取jsp表单中radio类型的值简单实例
Aug 15 Javascript
原生js实现中奖信息无间隙滚动效果
Jan 18 Javascript
JS判断两个对象内容是否相等的方法示例
Apr 10 Javascript
详解如何用模块化的方式写vuejs
Dec 16 Javascript
JavaScript引用类型Array实例分析
Jul 24 Javascript
浅析vue cli3 封装Svgicon组件正确姿势(推荐)
Apr 27 Javascript
js实现全选和全不选
Jul 28 Javascript
Vue登录拦截 登录后继续跳转指定页面的操作
Aug 04 Javascript
微信小程序教程系列之新建页面(4)
Apr 17 #Javascript
微信小程序商城项目之淘宝分类入口(2)
Apr 17 #Javascript
微信小程序商城项目之购物数量加减(3)
Apr 17 #Javascript
微信小程序商城项目之商品属性分类(4)
Apr 17 #Javascript
微信小程序商城项目之侧栏分类效果(1)
Apr 17 #Javascript
Map.vue基于百度地图组件重构笔记分享
Apr 17 #Javascript
JS简单验证上传文件类型的方法
Apr 17 #Javascript
You might like
php多维数组去掉重复值示例分享
2014/03/02 PHP
PHP载入图像imagecreatefrom_gif_jpeg_png系列函数用法分析
2016/11/14 PHP
Yii框架分页技术实例分析
2019/08/30 PHP
在laravel框架中实现封装公共方法全局调用
2019/10/14 PHP
TP3.2框架分页相关实现方法分析
2020/06/03 PHP
asp.net下利用js实现返回上一页的实现方法小集
2009/11/24 Javascript
JS实现self的resend
2010/07/22 Javascript
js循环map 获取所有的key和value的实现代码(json)
2018/05/09 Javascript
VUE基于NUXT的SSR 服务端渲染
2018/11/30 Javascript
微信公众号平台接口开发 获取access_token过程解析
2019/08/14 Javascript
layui表格 返回的数据状态异常的解决方法
2019/09/10 Javascript
vue 指令和过滤器的基本使用(品牌管理案例)
2019/11/04 Javascript
构建大型 Vue.js 项目的10条建议(小结)
2019/11/14 Javascript
js+css实现全屏侧边栏
2020/06/16 Javascript
Python实现购物程序思路及代码
2017/07/24 Python
Python unittest模块用法实例分析
2018/05/25 Python
PyQt5实现QLineEdit添加clicked信号的方法
2019/06/25 Python
简单分析python的类变量、实例变量
2019/08/23 Python
Anaconda3+tensorflow2.0.0+PyCharm安装与环境搭建(图文)
2020/02/18 Python
深入理解Tensorflow中的masking和padding
2020/02/24 Python
python对XML文件的操作实现代码
2020/03/27 Python
Python faker生成器生成虚拟数据代码实例
2020/07/20 Python
俄罗斯披萨、寿司和面食送货到家服务:2 Берега
2019/12/15 全球购物
办公室人员先进事迹
2014/01/27 职场文书
《雨霖铃》听课反思
2014/02/13 职场文书
给老师的一封建议书
2014/03/13 职场文书
综治工作心得体会
2014/09/11 职场文书
支行行长竞聘报告
2014/11/06 职场文书
清洁工个人工作总结
2015/03/05 职场文书
专家推荐信范文
2015/03/26 职场文书
2015年新农村建设指导员工作总结
2015/07/24 职场文书
公司保密管理制度
2015/08/04 职场文书
用Python简陋模拟n阶魔方
2021/04/17 Python
Python Numpy库的超详细教程
2022/04/06 Python
使用CSS实现黑白格背景效果
2022/06/01 HTML / CSS
Python自动操作神器PyAutoGUI的使用教程
2022/06/16 Python