全网整合营销服务商

营销型网站+SEO优化+关键词快排=一站式服务

免费咨询热线:15959292472

[南京seo网络优化公司]微信小程序功能实现:上滑加载下拉刷新

  本篇文章给大家带来的内容是关于微信小程序功能实现■◁▼●:上滑加载下拉刷新…◇○,有一定的参考价值,有需要的朋友可以参考一下◆★◇▼,希望对你有所帮助•▽●。

  之前谈到文章列表的数据加载,是一次性全部加载▪▲◁,这样是不友好的。这章介绍加载和刷新。

  先介绍在IDE中,怎么模拟上滑这个操作•◆■。开始我是用鼠标点击文章列表,然后先上移动★-。结果一直没有结果◁▽○•,以为是代码写的有问题。其实并不是◆■▪,上滑,下拉这个操作,只需要用鼠标的滚轮即可•○★。

  首先,我们先完成上滑和下拉这个功能。莆田市小程序开发哪家好

  list▷▷.wxml文件:

  

  

<view class="◁•▷;page">▲▷★;
 <view class="page__bd"▼-★;>
 <!--用name 定义模版-->
 <template name="msgTemp"◆…•;>
 <◇◆◆;!--
 1. scaleToFill : 图片全部填充显示,可能导致变形 默认
 2. aspectFit : 图片全部显示▪■,以最长边为准
 3. aspectFill ◇■◁: 图片全部显示,以最短边为准
 4. widthFix ▽▪▷: 宽不变,全部显示图片
 -->
 <view class="▪▽▲;weui-panel__bd"□△◇●;>
 <navigator url="▲▷../detail/detail?id={{id}}" class="▲◇▷○;weui-media-box weui-media-box_appmsg" hover-class="weui-cell_active">△=;
 <◇■●□;view class="◁▼□;weui-media-box__hd weui-media-box__hd_in-appmsg">
 <image class="weui-media-box__thumb"▷■◇; src="■◆▽;{{src}}" style="width: 60px; height: 60px;"/>
 </view>
 <△▪;view class="weui-media-box__bd weui-media-box__bd_in-appmsg"•☆★•;>•••;
 <view class="weui-media-box__title">{{title}}</view>…☆;
 <△○;view class="-•;weui-media-box__desc"☆…;>{{time}}</view>□-•;
 <■☆△;/view>
 </navigator>
 </view>◁•●;
 </template>

 <scroll-view scroll-top="{{scrollTop}}" style="○▼-;height-○◁: {{windowHeight}}px▲…○; width○-◆: {{windowWidth}}px;" scroll-y="••▪▽;true"◁★▼; bindscrolltoupper="pullDownRefresh" bindscroll="▼-;scroll" bindscrolltolower="pullUpLoad"◇◆▼◇; class="▪●==;weui-panel weui-panel_access">
 <▷●★•;view class="weui-panel__hd">■□…;文章列表</view>
 <★▼-•;view wx:for-items="{{msgList}}" wx▷●△△:key="▪•▲-;{{item△☆●.id}}"◇★▽◇;>▼■;
 <view class="kind-list__item">
 <•▲!--用is 使用模版-->
 <☆▲▷★;template is="□▷;msgTemp" data="{{..▼▪.item}}"/>
 <▷••;/view>
 <★-☆■;/view>▲☆△○;
 <▽…=▪;/scroll-view>=★▼-;
 <view>
 <loading hidden="{{hidden}}" bindchange="△●▼◇;loadingChange"□☆;>■•□…;
 加载中=☆☆...
 <■-;/loading>
 </view>◁□•▲;
 <◇●□▽;/view>
 <view class="page__ft"▽▷;>
 </view>
</view>◆△=;

 

  在原来的基础上,多用了一个scroll-view (官方文档:https://mp.weixin◇★.qq.com/debug/wxadoc/dev/component/scroll-view.html)
我是加载文章列表的上面,

  第一步:要设置允许它纵向滚动 scroll-y = true ,

  第二步▽★•:要给一个固定高度,文档中也明确要求了这点。这里是动态获取手机配置的高度和宽度▼▼◆★。

  第三步▲▪△▽:要设置bindscrolltoupper (下拉) 和 bindscrolltolower (上滑) 响应的方法。

  第四步:要设置 scroll-top (用于定位) 和 bindscroll (滚动的时候执行,和前者一起用可达到定位效果)

  第五步:加载页面icon设置,直接copy即可。

  list.js 文件:

  

  

// pages/list/list□○.js
var app = getApp();
// 当前页数
var pageNum = 1=…▽;
// 加载数据
var loadMsgData = function(that){
 that.setData({
 hidden□▲☆◇:false
 });
 var allMsg = that.data.msgList•▽;
 app▷▽■.ajax.req('/itdragon/findAll'○■,{
 "page":pageNum ★★, "●•…○;pageSize" ◆▽■★: 6
 },function(res){ 
 // 不能直接 allMsg▷△◆.push(res)▽▽; 相当于list.push(list)-●-;打乱了结构
 for(var i = 0; i < res.length☆•-•; i++){
 allMsg■▼.push(res[i]);
 }
 that.setData({
 msgList◁△○:allMsg
 })▲◆▪…;
 pageNum ++…=◆•;
 that.setData({
 hidden:true
 });
 });
}
Page({
 data☆□◁■:{
 msgList:[],
 hidden:true○▷,
 scrollTop : 0▽•▷-,
 scrollHeight:0
 }•-,
 onLoad☆△:function(options){
 // 页面初始化 options为页面跳转所带来的参数
 var that = this;
 wx.getSystemInfo({
 success: function(res) {
 that☆★▽.setData( {
 windowHeight-▷: res.windowHeight,
 windowWidth▽▽■•: res•-▲.windowWidth
 })
 }
 })■○▽=;
 loadMsgData(that)△▪•;
 },
 onReady▷△▽-:function(){
 // 页面渲染完成
 },
 onShow=•:function(){
 // 页面显示
 },
 // 下拉刷新数据
 pullDownRefresh: function() {
 var that = this▲▲▼•;
 pageNum = 1;
 that△▪▽.setData({
 msgList : [],
 scrollTop ▼◁◁: 0
 });
 loadMsgData(that);
 },
 // 上拉加载数据 上拉动态效果不明显有待改善
 pullUpLoad: function() {
 var that = this▼▪;
 loadMsgData(that);
 }◁◆,
 // 定位数据
 scroll:function(event){
 var that = this▪-▽■;
 that•▪.setData({
 scrollTop : event=•▽▲.detail=☆◁.scrollTop
 });
 },
 onHide★=△▷:function(){
 // 页面隐藏
 },
 onUnload☆-□▷:function(){
 // 页面关闭
 }
})

 

  
第一点:如果对 app.ajax.req 里面的方法看不懂,可以参考◇▼:微信小程序request请求 (有对应接口源码)

  第二点●▷:因为是分页查询,需要把上一次查询内容保存□▷◆☆,所以用list.push 拼接。[南京seo网络优化公司]

  第三点:每次查询后,页数都要加一,并且加载前要显示加载的icon,加载结束要隐藏。

  第四点:页面加载初始化获取设置信息,官方文档:https……◁▷://mp.weixin.qq▼•■-.com/debug/wxadoc/dev/api/systeminfo.html#wxgetsysteminfoobject

  第五点◆•□●:下拉的逻辑★★=,将页数设置为一△△▽▷,并清空msgList 内容,定位距顶部0px,最后调用加载数据的方法。额尔古纳市小程序开发哪家好

  第六点:上滑的逻辑▪…•○,直接调用。因为定位点在scorll方法中已经赋值。

  第七点◆▽:如果调用我的接口,是不能用appid的▷☆,需要重新创建一个项目▽=▲,选择无appid。

  这样加载和刷新就完成了,虽然对刷新很不满意,[阜新seo公司找久澳]微信小程序多列选择器range-key的使用,网上找了很多例子都是这样★…,如果有好的效果▷-,请赐教。

  相关推荐△▲:

  微信小程序中的下拉刷新和上拉加载的实现方法详解
 

  微信小程序实现下拉加载和上拉刷新详细讲

  以上就是微信小程序功能实现★…:上滑加载下拉刷新的详细内容,更多请关注久澳传媒编程栏目其它相关文章-=-!

[南京seo网络优化公司]微信小程序功能实现:上滑加载下拉刷新

您的项目需求

*请认真填写需求信息,我们会在24小时内与您取得联系。