微信小程序 scroll-view实现上拉加载与下拉刷新的实例

微信小程序 scroll-view实现上拉加载与下拉刷新的实例

实现效果图：

如图，使用小程序的scroll-view实现的上拉加载数据，下拉刷新数据，试下代码如下：

js文件代码：

var url = "http://192.168.30.4:8080/gtxcx/carrier/getCarrier.action";
var page = 1; 

var GetList = function (that) {
 that.setData({
 hidden: false
 });
 wx.request({
 url: url,
 data: {
  pageSize: 10,
  pageNo: page
 },
 success: function (res) {
  var l = that.data.list
  for (var i = 0; i < res.data.length; i++) {
  l.push(res.data[i])
  }
  that.setData({
  list: l
  });
  page++;
  that.setData({
  hidden: true
  });
 }
 });
}
Page({
 data: {
 hidden: true,
 list: [],
 scrollTop: 0,
 scrollHeight: 0
 },
 onLoad: function () {
 var that = this;
 wx.getSystemInfo({
  success: function (res) {
  console.info(res.windowHeight);
  that.setData({
   scrollHeight: res.windowHeight
  });
  }
 });
 },
 onShow: function () {
 var that = this;
 GetList(that);
 },
 bindDownLoad: function () {
 var that = this;
 GetList(that);
 },
 scroll: function (event) {
 this.setData({
  scrollTop: event.detail.scrollTop
 });
 },
 refresh: function (event) {
 page = 1;
 this.setData({
  list: [],
  scrollTop: 0
 });
 GetList(this)
 },
 onPullDownRefresh: function () {
 console.log("下拉")
 },
 onReachBottom: function () {
 console.log("上拉");
 }
})

json文件代码

{
 "navigationBarTitleText": "下拉刷新",
 "enablePullDownRefresh": true,
 "backgroundTextStyle": "dark"
}

wxml文件代码：

<view class="container">
 <scroll-view scroll-top="{{scrollTop}}" scroll-y="true" style="height:{{scrollHeight}}px;"
 class="list" bindscrolltolower="bindDownLoad" bindscroll="scroll" bindscrolltoupper="refresh">
 <view class="item" wx:for="{{list}}">
  <image class="img" src="https://cdn.kuaidi100.com/images/all/56/zhongtong.png"></image>
  <view class="text">
  <text class="title">{{item.carrierName}}</text>
  <text class="description">{{item.carrierTelphone}}</text>
  <text class="description">{{item.carrierId}}</text>
  </view>
 </view>
 </scroll-view>
 <view class="body-view">
 <loading hidden="{{hidden}}" bindchange="loadingChange">
  加载中...
 </loading>
 </view>
</view>

wxss文件代码

.container{
 height: 100%;
 padding: 20rpx;
} 

.item{
 display: flex;
 margin-bottom: 50rpx;
width:100%;
background:#f0f0f0;
overflow:hidden;
} 

.img{
 height: 100rpx;
 width: 100rpx;
 border-radius: 50%;
} 

.text{
 display: flex;
 flex-shrink:1;
 flex-grow:1;
 padding: 10rpx;
 flex-wrap: wrap;
 font-size: 50rpx;
} 

.title{
 font-size: 50rpx;
 margin:10rpx 100rpx 10rpx 100rpx;
}
.description{
 font-size: 50rpx;
 align-self:flex-end;
}

注意，

http://192.168.30.4:8080/gtxcx/carrier/getCarrier.action这个接口就是更具传入的页数，每次返回不同数据。

感谢阅读，希望能帮助到大家，谢谢大家对本站的支持！

赞 (0)

相关推荐

  • 微信小程序 列表的上拉加载和下拉刷新的实现

    微信小程序 列表的上拉加载和下拉刷新的实现

    微信小程序可谓是9月21号之后最火的一个名词了,一经出现真是轰炸了整个开发人员,当然很多App开发人员有了一个担心,微信小程序的到来会不会让移动端App颠覆,让移动端的程序员失业,身为一个Android开发者我是不相信的,即使有,那也是需要个一两年的过度和打磨才能实现的吧. 不管微信小程序是否能颠覆当今的移动开发格局,我们都要积极向上的心态去接收,去学习.不排斥新技术,所以,心动不如行动,赶紧先搭建一个微信小程序开发工具.那么接下来就让我们来开始学习列表的上拉加载和下拉刷新的实现吧(通过聚合数据

  • 微信小程序（六）：列表上拉加载下拉刷新示例

    1.列表(本部分内容出入官方文档) 对于这个功能,微信小程序中并没有提供类似于Android中listview性质的控件,所以我们需要使用 wx:for 控制属性绑定一个数组,用数组中各项的数据重复渲染该组件,来达到列表的效果. <view wx:for="{{array}}"> {{index}}: {{item.message}} </view> Page({ data: { array: [{ message: 'foo', }, { message: '

  • 微信禁止下拉查看URL的处理方法

    场景: 微信下拉时可以查看到URL,本身是微信的一种安全策略之一,也是一种用户交互友好的体验: 效果原理: 微信下拉弹性效果其实是浏览器本身的一种特性,重点就是scroll值的一种体现: 处理策略: 1.直接禁止mobile端的touchmove事件: 这种策略一般适用页面只有一屏不需要下拉情况下使用: var touch1 = function(){ document.querySelector('body').addEventListener('touchmove', function (e

  • 微信小程序 下拉菜单的实现

    微信小程序 下拉菜单的实现

    微信小程序 下拉菜单 看下实现效果图: 实例: //wcss /**DropDownMenu**/ /*总菜单容器*/ .menu { display: block; height: 28px; position: relative; } /*一级菜单*/ .menu dt { font-size: 15px; float: left; /*hack*/ width: 33%; height: 38px; border-right: 1px solid #d2d2d2; border-botto

  • 微信小程序 详解下拉加载与上拉刷新实现方法

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

    微信小程序下拉刷新上拉加载的两种实现方法 实现效果图: 方法一:onPullDownRefresh和onReachBottom方法实现小程序下拉加载和上拉刷新 首先要在json文件里设置window属性             属性   类型                           描述 enablePullDownRefresh Boolean 是否开启下拉刷新,详见页面相关事件处理函数. 设置js里onPullDownRefresh和onReachBottom方法 属性    类

  • 微信小程序 下拉列表的实现实例代码

    微信小程序 下拉列表 wxml代码: <view class="phone_one" bindtap="clickPerson"> <view class="phone_personal">{{firstPerson}}</view> <image src="../../image/v6.png" class="personal_image {{selectArea ? 'r

  • 微信小程序 下拉菜单简单实例

    微信小程序 下拉菜单简单实例 wcss  /**DropDownMenu**/ /*总菜单容器*/ .menu { display: block; height: 28px; position: relative; } /*一级菜单*/ .menu dt { font-size: 15px; float: left; /*hack*/ width: 33%; height: 38px; border-right: 1px solid #d2d2d2; border-bottom: 1px sol

  • 详解微信小程序开发之下拉刷新 上拉加载

    详解微信小程序开发之下拉刷新 上拉加载

    微信小程序中的下拉刷新,上拉加载的功能很常见,目前我知道的有两种可行的方法,一是scroll-view,二是整个页面刷新.今天说说第一种,自己造轮子,难免有些瑕疵,日后慢慢完善. 上gif: 原理: scroll-view中有监听滑动的方法,这个跟Android类似.其中用到了滑动到顶部,滑动到底部的方法. 1.下拉刷新,在滑动到顶部时,bindscrolltoupper被调用,根据自己的业务逻辑请求即可.我的demo只是随机换了个关键字. 2.上拉加载,在滑动到底部时,bindscrollto

  • 微信小程序 scroll-view实现上拉加载与下拉刷新的实例

    微信小程序 scroll-view实现上拉加载与下拉刷新的实例

    微信小程序 scroll-view实现上拉加载与下拉刷新的实例 实现效果图: 如图,使用小程序的scroll-view实现的上拉加载数据,下拉刷新数据,试下代码如下: js文件代码: var url = "http://192.168.30.4:8080/gtxcx/carrier/getCarrier.action"; var page = 1; var GetList = function (that) { that.setData({ hidden: false }); wx.r

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

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

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

  • iOS开发之UITableView与UISearchController实现搜索及上拉加载，下拉刷新实例代码

    废话不多说了,直接给大家贴代码了. 具体代码如下所示: #import "ViewController.h" #import "TuanGouModel.h" #import "TuanGouTableViewCell.h" #define kDeviceWidth [UIScreen mainScreen].bounds.size.width #define kDeviceHeight [UIScreen mainScreen].bounds.

  • Android使用PullToRefresh实现上拉加载和下拉刷新效果的代码

    Android使用PullToRefresh实现上拉加载和下拉刷新效果的代码

    在没给大家介绍正文之前,先给大家介绍展示下运行图,如果大家感觉还不错,请继续往下阅读: 相关阅读:分享Android中pullToRefresh的使用心得 项目已同步至:https://github.com/nanchen2251/pullToRefreshDemo 简单使用详情: 1)studio可以直接在app的module设置中直接进行搜索,但是有-的必须添上,而不能用空格代替,为了更加了解这个东西,我还是推荐大家去这里看看,奉上网址: https://github.com/chrisba

  • mui上拉加载更多下拉刷新数据的封装过程

    mui上拉加载更多下拉刷新数据的封装过程

    辗转用mui做了两个项目,空下来把mui上拉加载更多,下拉刷新数据做了一个简单的封装,希望可以帮助到需要的朋友 demo项目的结构 直接贴代码了 index.html mui上拉刷新下拉加载都这里了,两个方法搞定 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device

  • angularjs实现上拉加载和下拉刷新数据功能

    angularjs实现上拉加载和下拉刷新数据功能

    虽说AngularJS 1.x版本中对于上拉加载,下拉刷新数据功能都有做些封装,但还是有些人不清楚.其实我一开始也是不懂的,so.现在把搞懂的记录下免得少走弯路. now,begin:先说下拉刷新吧,原理就是每次下拉都重新去服务器请求过一次新的数据.一般这种刷新功能的响应数据(也就是服务器返回的(json)数据)中都会带有 "rowsOfPage": 3, "currentPage": 1, "totalPages": 10, "tot

  • Android RecyclerView上拉加载和下拉刷新

    之前写过一篇刷新加载<RecyclerView上拉加载和下拉刷新(基础版)> ,这次是进行改装完善. 代码中注释的很详细,所以就直接上代码了. 核心实现 package com.example.fly.recyclerviewrefresh.base; import android.os.Bundle; import android.support.annotation.Nullable; import android.support.v4.widget.SwipeRefreshLayout;

  • 解决Vue使用mint-ui loadmore实现上拉加载与下拉刷新出现一个页面使用多个上拉加载后冲突问题

    解决Vue使用mint-ui loadmore实现上拉加载与下拉刷新出现一个页面使用多个上拉加载后冲突问题

    所遇问题: 该页面为双选项卡联动,四个部分都需要上拉加载和下拉刷新功能,使用的mint-ui的loadmore插件,分别加上上拉加载后,只有最后一个的this.$refs.loadmore.onTopLoaded();和this.$refs.loadmore.onBottomLoaded(); 有效,其他的三个都无效,这两句话是意思是查询完要调用一次,用于重新定位 分析原因: 首先这四个模块都是用的 <mt-loadmore :top-method="loadTop" :bott

  • Diycode开源项目实例搭建上拉加载和下拉刷新的Fragment

    Diycode开源项目实例搭建上拉加载和下拉刷新的Fragment

    以下通过3个知识点给大家讲解了上拉加载和下拉刷新的Fragment实现的方法,在对每个知识点介绍了一下用法. 1.效果预览 1.1.这个首页就是一个Fragment碎片,本文讲述的就是这个碎片的搭建方式. 下拉会有一个旋转的刷新圈,上拉会刷新数据. 1.2.整体结构 首先底层的是BaseFragment 然后RefreshRecyclerFragment继承了BaseFragment 然后SimpleRefreshRecycleFragment继承了RefreshRecyclerFragment

随机推荐