微信小程序之上拉加載（分頁加載）實例
發(fā)布時間：2017-12-02 16:41 所屬欄目：小程序開發(fā)教程
來自授權(quán)地址上拉加載（分頁加載）當(dāng)用戶打開一個頁面時，假設(shè)后臺數(shù)據(jù)量龐大時，一次性地返回所有數(shù)據(jù)給客戶端，頁面的打開速度就會有所下降，而且用戶只看上面的內(nèi)容而不需要看后面的內(nèi)容時 ...
加載更多（分頁加載）
當(dāng)用戶打開一個頁面時，假設(shè)后臺數(shù)據(jù)量龐大時，一次性地返回所有數(shù)據(jù)給客戶端，頁面的打開速度就會有所下降，而且用戶只看上面的內(nèi)容而不需要看后面的內(nèi)容時，也浪費用戶流量，基于優(yōu)化的角度來考慮，后臺不要一次性返回所有數(shù)據(jù)，當(dāng)用戶有需要再往下翻的時候，再加載更加數(shù)據(jù)出來。
業(yè)務(wù)需求：
列表滾動到底部時，繼續(xù)往上拉，加載更多內(nèi)容
必備參數(shù)：
（1）pageindex: 1 //第幾次加載
（2）callbackcount: 15 //需要返回數(shù)據(jù)的個數(shù)
其他參數(shù)：
根據(jù)接口的所需參數(shù)
實現(xiàn)原理：
當(dāng)?shù)谝淮卧L問接口時，傳遞2個必備參數(shù)（第1次加載，需要返回數(shù)據(jù)的個數(shù)為15個），和其他參數(shù)（需要搜索的字符串）給后臺，后臺返回第一次數(shù)據(jù)過來。在請求成功的的回調(diào)函數(shù)中，判斷返回的數(shù)據(jù)是否>0，是，則取出數(shù)據(jù)，渲染視圖層，并把“上拉加載”顯示在列表底部；否，則沒有數(shù)據(jù)可取，并把“沒有更多”顯示在列表底部，同時把“上拉加載”隱藏掉。
當(dāng)用戶已經(jīng)滾動到列表底部（這里使用到小程序提供的scroll-view組件的bindscrolltolower事件），觸發(fā)bindscrolltolower事件，參數(shù)pageindex+1，再把2個必備參數(shù)（第2次加載，需要返回數(shù)據(jù)的個數(shù)為15個）和其他參數(shù)（需要搜索的字符串）給后臺，后臺把其余的數(shù)據(jù)返回給前臺，前臺在原來數(shù)據(jù)的基礎(chǔ)上添加數(shù)據(jù)。
示例：
wxml:
- <view class="search">
- <view class="search-bar">
- <view class="search-wrap">
- <icon type="search" size="16" class="icon-search" />
- <input type="text" placeholder="請輸入搜索內(nèi)容" 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: [], //放置返回數(shù)據(jù)的數(shù)組
- isFromSearch: true, // 用于判斷searchSongList數(shù)組是不是空數(shù)組，默認(rèn)true，空的數(shù)組
- searchPageNum: 1, // 設(shè)置加載的第幾次，默認(rèn)是第一次
- callbackcount: 15, //返回數(shù)據(jù)的個數(shù)
- searchLoading: false, //"上拉加載"的變量，默認(rèn)false，隱藏
- searchLoadingComplete: false //“沒有數(shù)據(jù)”的變量，默認(rèn)false，隱藏
- },
- //輸入框事件，每輸入一個字符，就會觸發(fā)一次
- bindKeywordInput: function(e){
- console.log("輸入框事件")
- this.setData({
- searchKeyword: e.detail.value
- })
- },
- //搜索，訪問網(wǎng)絡(luò)
- fetchSearchList: function(){
- let that = this;
- let searchKeyword = that.data.searchKeyword,//輸入框字符串作為參數(shù)
- searchPageNum = that.data.searchPageNum,//把第幾次加載次數(shù)作為參數(shù)
- callbackcount =that.data.callbackcount; //返回數(shù)據(jù)的個數(shù)
- //訪問網(wǎng)絡(luò)
- util.getSearchMusic(searchKeyword, searchPageNum,callbackcount, function(data){
- console.log(data)
- //判斷是否有數(shù)據(jù)，有則取數(shù)據(jù)
- if(data.data.song.curnum != 0){
- let searchList = [];
- //如果isFromSearch是true從data中取出數(shù)據(jù)，否則先從原來的數(shù)據(jù)繼續(xù)添加
- that.data.isFromSearch ? searchList=data.data.song.list : searchList=that.data.searchSongList.concat(data.data.song.list)
- that.setData({
- searchSongList: searchList, //獲取數(shù)據(jù)數(shù)組
- zhida: data.data.zhida, //存放歌手屬性的對象
- searchLoading: true //把"上拉加載"的變量設(shè)為false，顯示
- });
- //沒有數(shù)據(jù)了，把“沒有數(shù)據(jù)”顯示，把“上拉加載”隱藏
- }else{
- that.setData({
- searchLoadingComplete: true, //把“沒有數(shù)據(jù)”設(shè)為true，顯示
- searchLoading: false //把"上拉加載"的變量設(shè)為false，隱藏
- });
- }
- })
- },
- //點擊搜索按鈕，觸發(fā)事件
- keywordSearch: function(e){
- this.setData({
- searchPageNum: 1, //第一次加載，設(shè)置1
- searchSongList:[], //放置返回數(shù)據(jù)的數(shù)組,設(shè)為空
- isFromSearch: true, //第一次加載，設(shè)置true
- searchLoading: true, //把"上拉加載"的變量設(shè)為true，顯示
- searchLoadingComplete:false //把“沒有數(shù)據(jù)”設(shè)為false，隱藏
- })
- this.fetchSearchList();
- },
- //滾動到底部觸發(fā)事件
- searchScrollLower: function(){
- let that = this;
- if(that.data.searchLoading && !that.data.searchLoadingComplete){
- that.setData({
- searchPageNum: that.data.searchPageNum+1, //每次觸發(fā)上拉事件，把searchPageNum+1
- isFromSearch: false //觸發(fā)到上拉事件，把isFromSearch設(shè)為為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, //返回數(shù)據(jù)的個數(shù)
- 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;
- }
- /*搜索結(jié)果*/
- .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;
- }
運行：
