精华内容
下载资源
问答
  • 主要为大家详细介绍了微信小程序加载更多,点击查看更多功能,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • 微信小程序加载更多

    2018-05-19 15:34:45
    微信小程序加载更多 整体框架
  • 微信小程序加载更多,是将之前的数据和点击加载后请求的数据用concat拼接在一起并执行setData, 下面是一个简单的栗子: index.wxml代码如下 {{name.content}} {{loadText}} 加载更多按钮绑定set...

    微信小程序加载更多,是将之前的数据和点击加载后请求的数据用concat拼接在一起并执行setData,

    下面是一个简单的栗子:

    index.wxml代码如下

    <view wx:for="{{duanziInfo}}" wx:for-item="name" wx:for-index="id"> 
        <view class="duanzi-view">
          <view class="duanzi-content">
            <text class="dz-content">{{name.content}}</text>
          </view>
        </view>
    </view>
    <view class="button-wrapper">
      <button type="default" size="default" loading="{{loading}}" disabled="{{disabled}}" bindtap="setLoading">
        {{loadText}}
      </button>
    </view>
    加载更多按钮绑定setLoading

    index.js文件代码如下

    Page({
            data: {
                loadText:'加载更多',
                duanziInfo:[]
            },
    	//初始化请求
    	onLoad: function (res) {
    		var that = this
    		//内容
    		wx.request({
    			url: 'http://xxxxx.com/index.php?m=Industry&a=getDuanziInfo',
    			data: {token:token},
    			method: 'GET', 
    			success: function(res){
    			console.log(res.data.result) //打印初始化数据
    				that.setData({
    				duanziInfo:res.data.result
    				})
    			}
    		})
    	  },
    	  //加载更多
    	setLoading: function(e) {
    		var duanziInfoBefore = this.data.duanziInfo
    		var that = this
    		wx.showToast({ //期间为了显示效果可以添加一个过度的弹出框提示“加载中”
    			title: '加载中',
    			icon: 'loading',
    			duration: 200
    		  })
    		wx.request({
    			url: 'http://xxxxx.com/index.php?m=Industry&a=getDuanziInfo',
    			data: {token:token},
    			method: 'GET', 
    			success: function(res){
    				console.log(duanziInfoBefore.concat(res.data.result)) //打印拼接之后数据
    			    that.setData({
    				loadText:"数据请求中",
    				loading:true,
    				duanziInfo:duanziInfoBefore.concat(res.data.result),
    				loadText:"加载更多",
    				loading:false,
    			  })
    			}
    		})
    	}
    })

    初始化和加载更多中的打印数据如下


    (以上是点击查看更多,还可以根据距离视图区域的距离来加载更多,具体实现是将视图用<scroll-view>标签,并给其一个固定高度,在给定参数中设置距离像素触发事件。具体文档:https://mp.weixin.qq.com/debug/wxadoc/dev/component/scroll-view.html?t=20161122)


    展开全文
  • 主要介绍了微信小程序实现上拉加载功能,结合实例形式分析了微信小程序加载更多数据、触底加载或点击加载更多数据的相关实现技巧与操作注意事项,需要的朋友可以参考下
  • 通过实例代码给大家介绍了微信小程序实现滚动加载更多,给大家提供了完整代码,需要的朋友可以参考下
  • 微信小程序列表下拉刷新加载更多微信小程序列表下拉刷新加载更多微信小程序列表下拉刷新加载更多
  • 微信小程序下拉刷新/上拉加载更多

    万次阅读 多人点赞 2017-12-19 09:37:50
    小程序里,用户顶部下拉是默认禁止的,我们需要把他设置为启用,在app.json中的设置对所有页面有效,在单独页面设置则对当前页面有效; 看一下json文件 "enablePullDownRefresh": true, 注意这里的true是...

    查看文档,在用page()函数注册页面的时候有这样的两个对象参数用户判断用户在最顶部下拉到达最底部,

    在小程序里,用户顶部下拉是默认禁止的,我们需要把他设置为启用,在app.json中的设置对所有页面有效,在单独页面设置则对当前页面有效;

    看一下json文件

     

    "enablePullDownRefresh": true,


    注意这里的true是布尔型而不是字符;

     

    有同学说设置完之后可以下拉,但是看不到图标;

    在app.json中这样设置;

    这样下拉之后就可以看到了;

    每个页面生成的时候已经默认为我们设置了前面提到的onPullDownRefresh函数和onReachBottom函数

    直接上代码:

    page为全局变量,用在在后面的加载请求,这里要和编写数据接口的同事讨论好请求;

     

    展开全文
  • 进入页面,加载初始数据,当向上拖动页面至底部,自动加载新的数据,即上拉加载更多数据。 演示 index.wxml <!-- 数据列表 --> <view wx:for="{{listdata}}" wx:key="listdata" class='listitem'> <...

    开发需求

    进入页面,加载初始数据,当向上拖动页面至底部,自动加载新的数据,即上拉加载更多数据。

    演示

    在这里插入图片描述
    index.wxml

    <!-- 数据列表 -->
    <view wx:for="{{listdata}}" wx:key="listdata" class='listitem'>
      <view class='title'>{{item.title}}</view>
      <view class='title'>资源ID:{{item.id}}</view>
      <image src="{{item.coverimg}}" class='cover'></image>
    </view>
    
    <!-- 如果还有更多数据可以加载,则显示玩命加载中 -->
    <view class="load-more-wrap">
    <block wx:if="{{hasMore}}">
      <view class="load-content">
        <text class="weui-loading"/><text class="loading-text">玩命加载中</text>
      </view>
    </block>
    <!-- 否则显示没有更多内容了 -->
    <block wx:else>
      <view class="load-content">
        <text>没有更多内容了</text>
      </view>
    </block>
    </view>
    

    index.js

    Page({
      data: {
        listdata:[],  //数据
        moredata: '',
        p:0, //当前分页;默认第一页
        hasMore:true //提示
      },
    
      //加载初始数据
      onLoad: function (options) {
        var that = this;
    
      //初始页面
      var p = that.data.p;
        this.loadmore();
      },
    
      //触底事件
      onReachBottom:function(){
        var that = this;
        //检查是否还有数据可以加载
        var moredata = that.data.moredata;
        //如果还有,则继续加载
        if (moredata.more != 0) {
          this.loadmore();
          //如果没有了,则停止加载,显示没有更多内容了
        }else{
          that.setData({
            "hasMore": false
          })
        }
      },
    
      //发起请求
      loadmore:function(){
    
        //加载提示
        wx.showLoading({
          title: '加载中',
        })
    
        var that = this;
        //页面累加
        var p = ++that.data.p;
    
        //请求服务器
        wx.request({
          url: '你的服务器/server.php?page=' + p,
          data: {
            "json": JSON.stringify({
              "p": p
            })
          },
    
          method: 'POST',
          header: {
            'content-type': 'application/x-www-form-urlencoded'
          },
    
          //请求成功,回调函数
          success:function(res){
            
            //隐藏加载提示
            wx.hideLoading();
    
            //判断市局是否为空
            if (res.data != 0) {
              that.setData({
                //把新加载的数据追加到原有的数组
                "listdata": that.data.listdata.concat(res.data), //加载数据
                "moredata": res.data,
                "p":p
              })
            } else {
              that.setData({
                "hasMore":false
              })
            }
          }
        })
      }
    })
    

    说明
    1、url修改为你的服务端链接,格式是

    http:域名/目录/?page=页码
    

    例如:

    http://www.baidu.com/api/data.php?page=1
    

    页码是可变的,所以声明一个变量p,所以就是

    `url: 'http://www.baidu.com/api/data.php?page' + p,`
    

    index.wxss

    .listitem{
      width: 90%;
      height: 155px;
      background: rgba(0, 0, 0, 0.2);
      margin:10px auto;
      text-align: center;
      position: relative;
      color:#fff;
    }
    
    .listitem .cover{
      width:100%;
      height:155px;
      position: absolute;
      top: 0;
      left: 0;
      z-index: -100;
    }
    
    .load-more-wrap .load-content{
      text-align: center;
      margin:30px auto 30px;
      color:#ccc;
      font-size: 15px;
    }
    

    服务端返回的数据格式

    返回json数组的形式,例如

    [
        {"id":"1","title":"标题1","coverimg":"url1"},
        {"id":"2","title":"标题2","coverimg":"url2"},
        {"id":"3","title":"标题3","coverimg":"url3"},
        {"id":"4","title":"标题4","coverimg":"url4"},
        {"id":"5","title":"标题5","coverimg":"url5"}
    ]
    

    作者

    Author:TANKING
    Date:2020-04-20
    WeChat:face6009

    展开全文
  • 微信小程序 上拉加载更多 demo,欢迎下载。微信小程序 上拉加载更多 demo,欢迎下载微信小程序 上拉加载更多 demo,欢迎下载
  • 加载更多(分页加载) 当用户打开一个页面时,假设后台数据量庞大时,一次性地返回所有数据给客户端,页面的打开速度就会有所下降,而且用户只看上面的内容而不需要看后面的内容时,也浪费用户流量,基于优化的...
  • 小程序触底加载更多

    千次阅读 2019-08-27 22:20:12
    onReachBottom: function() { wx.showLoading({ title: '加载更多文章', }) var that = this; this.getFeeds(that.data.page); }, getFeeds: function(page) { if (page == 1) { wx....
    onReachBottom: function() {
        wx.showLoading({
          title: '加载更多文章',
        })
        var that = this;
        this.getFeeds(that.data.page);
      },
      getFeeds: function(page) {
        if (page == 1) {
          wx.showLoading({
            title: '加载中',
          })
        }
        var that = this
        //测试天气预报接口
        wx.request({
          url: 'https://api.gugudata.com/weather/weatherinfo?appkey=请去www.gugudata.com申请key&code=101020500',
          method: 'get',
          header: {
            'content-type': 'application/json'
          },
          success: function (res) {
            var res = res.data;
            that.setData({
              weather: res.Data
            })
          },
    
          fail: function () {
            wx.showToast({
              title: '服务器异常',
              duration: 1500
            })
          },
          complete: function () {
            
          }
        });
        wx.request({
          url: 'https://api.gugudata.com/news/techblogs?appkey=请去www.gugudata.com申请key&pageindex=' + page + '&pagesize=10',
          method: 'get',
          header: {
            'content-type': 'application/json'
          },
          success: function(res) {
            var res = res.data;
    
            if (that.data.page > 1) {
              var feedTemp = that.data.feeds;
              that.setData({
                feeds: feedTemp.concat(res),
                page: page + 1
              })
            } else {
              console.log(res);
              that.setData({
                feeds: res,
                page: page + 1
              })
            }
          },
          
          fail: function() {
            wx.showToast({
              title: '服务器异常',
              duration: 1500
            })
          },
          complete: function() {
            if (page >= 1) {
              wx.hideLoading()
            } else {
              //wx.stopPullDownRefresh()
            }
          }
        })
      },

     

    展开全文
  • 微信小程序上拉加载更多

    万次阅读 2018-08-20 17:56:53
     一开始用的是scroll-view组件,但是真机运用的时候发现上拉加载更多的时候,数据有跳动,对用户交互及其不友好,所以决定修改上拉加载更多的效果  我用的是wepy框架,参照多个网上文档,也参照官方文档主要用的...
  • WeChartPullToRefreshListView 微信小程序实现类似android下拉刷新上拉加载更多ListView 下拉刷新 上拉加载更多
  • 1、微信小程序下拉刷新和上拉事件的需求和相关知识点讲解 2、微信小程下拉刷新的设计和开发 3、微信小程序加载更多的设计和开发
  • 微信小程序实战篇-下拉刷新与加载更多

    万次阅读 多人点赞 2017-06-17 10:59:19
    哈喽,大家好,看这标题是不是有点奇怪,你们期盼的微信小程序实战篇-电商(三)没出现,我是这么想的,因为电商里面的内容有很,如何我只是以一二三那样命名的话,不方便你们查看每篇文章讲解的内容,所以我就换...
  • 2、上拉加载更多(页面上拉触底事件):新获取的数据追加到data{}内的原数据即可。由于小程序数据是实时渲染,小程序在保持原数据显示不变的基础上,自动追加渲染显示新数据。 注意(小程序官方有说明):上拉加载...
  • 可以支持下拉加载,通过接口接收自己的后台的数据
  • 通过微信小程序的滑块视图容器swiper及swiper-item实现tab切换功能,同时实现下拉刷新,上拉加载更多功能。
  • 上拉加载(分页加载)   当用户打开一个页面时,假设后台数据量庞大时,一次性地返回所有数据给客户端,页面的打开速度就会有所下降,而且...列表滚动到底部时,继续往上拉,加载更多内容   必备参数: (1)pagein
  • 继续小程序之旅,这一次把项目优化了一下布局,不至于那么丑了,然后实现了上拉加载更多,下拉刷新
  • 小程序下拉加载更多数据

    千次阅读 2020-04-02 19:11:45
    功能描述:拖动下拉条,可以加载更多内容 实现步骤 配置.json文件 在app.json页面配置"enablePullDownRefresh": true,这会让下拉刷新效果适用于项目的每一个页面;或者在对应需要下拉刷新功能的...
  • 微信小程序-微信小程序实现类似android下拉刷新上拉加载更多ListView.zip
  • 微信小程序-APP(上拉加载更多,下拉刷新),需要的朋友可以免费下载使用。
  • 小程序的下拉刷新和上拉加载更多,系统已经提供方法。我这里就是利用系统的方法,用自定义的UI和动画去实现。 第一步 想要利用系统的方法,首先要开启。开启方法:在相应的.json文件里面添加”...
  • 上拉加载更多: 根据当前页码和总页码进行比较,如果当前页码>=总页码,则不请求数据 每次请求,当前页码+1 发送网络请求,传递当前页码 响应中应该包含获取的数据以及总页码 获取成功后,将获取的数据与...
  • 微信小程序里的listview,内置了上拉刷新下拉加载更多的功能,以及页面状态显示 适用于页面内有一个可上拉刷新下拉加载的list的情况 使用 1.拷贝lib文件夹到根目录 2.拷贝utils中的lvUtil和netUtil到你的utils文件夹 3...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 589,212
精华内容 235,684
关键字:

小程序加载更多