写点什么

微信小程序之加载更多(分页加载)实例 ,flutter 瀑布流列表

用户头像
Android架构
关注
发布于: 19 小时前

<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: '', //需要搜索的字符


sear


《Android学习笔记总结+最新移动架构视频+大厂安卓面试真题+项目实战源码讲义》
浏览器打开:qq.cn.hn/FTe 免费领取
复制代码


chSongList: [], //放置返回数据的数组


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{

用户头像

Android架构

关注

还未添加个人签名 2021.10.31 加入

还未添加个人简介

评论

发布
暂无评论
微信小程序之加载更多(分页加载)实例 ,flutter瀑布流列表