Notice
  • Highest quality themes and templates and Script Php.Join VIP
  • 【Yunyiwl.com-编程开发教程】收集全网优质教程及源码资源!

    全网优质软件开发、平面设计等教程及精品源码资源一站可得,www.yunyiwl.com!

    微信小程序列表的上拉刷新和上拉加载_php网站模板插图 微信小程序列表的上拉刷新和上拉加载

    ##1.介绍几个组件

    ###1.1 scroll-view 组件

    这里写图片描述

    注意:使用竖向滚动时,需要给一个固定高度,通过 WXSS 设置 height。 ###1.2 image组件

    这里写图片描述

    注意:mode有12种模式,其中3种是缩放模式,9种是裁剪模式。 ###1.3 Icon组件 这里写图片描述

    iconType: [ ‘success’, ‘info’, ‘warn’, ‘waiting’, ‘safe_success’, ‘safe_warn’, ‘success_circle’, ‘success_no_circle’, ‘waiting_circle’, ‘circle’, ‘download’, ‘info_circle’, ‘cancel’, ‘search’, ‘clear’ ]

    2.列表的上拉加载和下拉刷新的实现

    ##2.1先来张效果图 这里写图片描述 ##2.2逻辑很简单,直接上代码 ###2.2.1 detail.wxml 布局文件

    <loading hidden=”{{hidden}}” bindchange=”loadingChange”>
        加载中…
      </loading>  
     <scroll-view scroll-y=”true” style=”height: 100%;” bindscrolltolower=”loadMore” bindscrolltoupper=”refesh”>
          <view wx:if=”{{hasRefesh}}” style=”display: flex;flex-direction: row;align-items: center;align-self: center;justify-content: center;”>
          <icon type=”waiting” size=”45″/><text>刷新中…</text></view>
          <view wx:else  style=”display:none” ><text></text></view>
      <view class=”lll”  wx:for=”{{list}}” wx:for-item=”item” bindtap=”bindViewTap” 
             data-title=”{{item.title}}” >
          <image style=” width: 50px;height: 50px;margin: 20rpx;” src=”{{item.firstImg}}”   ></image>
          <view  class=”eee” > 
           <view style=”margin:5px;font-size:8px”> 标题:{{item.title}}</view>
           <view style=”margin:5px;color:red;font-size:6px”> 来源:{{item.source}}</view>
           </view>
    </view>
    <view class=”tips1″>
          <view wx:if=”{{hasMore}}” style=”display: flex;flex-direction: row;align-items: center;align-self: center;justify-content: center;”>
          <icon type=”waiting” size=”45″/><text>玩命的加载中…</text></view>
          <view wx:else><text>没有更多内容了</text></view>
        </view>
     </scroll-view>

    ###2.2.1 detail.js逻辑代码文件

    var network_util = require(‘../../utils/network_util.js’);
    var json_util = require(‘../../utils/json_util.js’);
    Page({
      data:{
        // text:”这是一个页面”
        list:[],
         dd:”,
         hidden:false,
         page: 1,
         size: 20,
         hasMore:true,
         hasRefesh:false
      },
      onLoad:function(options){
        var that = this;
        var url = ‘http://v.juhe.cn/weixin/query?key=f16af393a63364b729fd81ed9fdd4b7d&pno=1&ps=10’;
        network_util._get(url,
        function(res){
        that.setData({
           list:res.data.result.list,
           hidden: true,
        });
        },function(res){
         console.log(res);
     });
      },
      onReady:function(){
        // 页面渲染完成
      },
      onShow:function(){
        // 页面显示
      },
      onHide:function(){
        // 页面隐藏
      },
      onUnload:function(){
        // 页面关闭
      },
       //点击事件处理
      bindViewTap: function(e) {
        console.log(e.currentTarget.dataset.title);
      },
      //加载更多
      loadMore: function(e) {
         var that = this;
        that.setData({
        hasRefesh:true,});
        if (!this.data.hasMore) return
        var url = ‘http://v.juhe.cn/weixin/query?key=f16af393a63364b729fd81ed9fdd4b7d&pno=’+(++that.data.page)+’&ps=10’;
        network_util._get(url,
        function(res){
        that.setData({
           list: that.data.list.concat(res.data.result.list),
           hidden: true,
           hasRefesh:false,
        });
        },function(res){
         console.log(res);
      })
    },
    //刷新处理
    refesh: function(e) {
     var that = this;
     that.setData({
        hasRefesh:true,
     });
        var url = ‘http://v.juhe.cn/weixin/query?key=f16af393a63364b729fd81ed9fdd4b7d&pno=1&ps=10’;
        network_util._get(url,
        function(res){
        that.setData({
          list:res.data.result.list,
           hidden: true,
           page:1,
           hasRefesh:false,
        });
        },function(res){
         console.log(res);
     })
    },
    })


    上一页:
    下一页:
    相关推荐

    微信小程序列表的上拉刷新和上拉加载
    2310477
    52

    微信小程序-APP(上拉加载更多,下拉刷新)
    2353014
    50

    html植物花卉公司响应式网站模板
    2213698
    118

    微信小程序-智能用电系统
    2298324
    67

    CSS3大气视频旅行前端模板
    2326179
    65

    【Yunyiwl.com】—网站源码下载—微信小程序列表的上拉刷新和上拉加载

    微信小程序-日历



    内容加载中..
    1. 本站所有资源来源于用户上传和网络,如有侵权请邮件联系站长!
    2. 分享目的仅供大家学习和交流,您必须在下载后24小时内删除!
    3. 不得使用于非法商业用途,不得违反国家法律。否则后果自负!
    4. 本站提供的源码、模板、插件等等其他资源,都不包含技术服务请大家谅解!
    5. 如有链接无法下载、失效或广告,请联系管理员处理!
    6. 本站资源售价只是赞助,收取费用仅维持本站的日常运营所需!

    Yunyiwl.com » 微信小程序列表的上拉刷新和上拉加载_php网站模板