{"id":13654365,"url":"https://github.com/lidong1665/WeiXinProject","last_synced_at":"2025-04-23T09:33:23.708Z","repository":{"id":101298261,"uuid":"69933094","full_name":"lidong1665/WeiXinProject","owner":"lidong1665","description":"微信小程序实现--列表的上拉刷新和上拉加载","archived":false,"fork":false,"pushed_at":"2016-11-16T07:53:46.000Z","size":60,"stargazers_count":167,"open_issues_count":3,"forks_count":57,"subscribers_count":11,"default_branch":"master","last_synced_at":"2024-04-16T13:06:08.503Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/lidong1665.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2016-10-04T04:02:11.000Z","updated_at":"2024-03-16T15:45:07.000Z","dependencies_parsed_at":null,"dependency_job_id":"c4e6edf9-1ccc-4bee-a24b-2c6d054cd60f","html_url":"https://github.com/lidong1665/WeiXinProject","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lidong1665%2FWeiXinProject","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lidong1665%2FWeiXinProject/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lidong1665%2FWeiXinProject/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lidong1665%2FWeiXinProject/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/lidong1665","download_url":"https://codeload.github.com/lidong1665/WeiXinProject/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":250407694,"owners_count":21425542,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-08-02T03:00:30.641Z","updated_at":"2025-04-23T09:33:23.476Z","avatar_url":"https://github.com/lidong1665.png","language":"JavaScript","funding_links":[],"categories":["组件","UI组件","Uncategorized"],"sub_categories":["Uncategorized"],"readme":"# WeiXinProject\n微信小程序实现--列表的上拉刷新和上拉加载\n\n微信小程序可谓是9月21号之后最火的一个名词了，一经出现真是轰炸了整个开发人员，当然很多App开发人员有了一个担心，微信小程序的到来会不会让移动端App颠覆，让移动端的程序员失业，身为一个Android开发者我是不相信的，即使有，那也是需要个一两年的过度和打磨才能实现的吧。 \n\n不管微信小程序是否能颠覆当今的移动开发格局，我们都要积极向上的心态去接收，去学习。不排斥新技术，所以，心动不如行动，赶紧先搭建一个微信小程序开发工具。那么接下来就让我们来开始学习列表的上拉加载和下拉刷新的实现吧（通过聚合数据平台获取微信新闻）。\n\n##1.介绍几个组件\n\n###1.1 scroll-view 组件 \n\n![这里写图片描述](http://img.blog.csdn.net/20161004103844128)\n\n  注意：使用竖向滚动时，需要给\u003cscroll-view/\u003e一个固定高度，通过 WXSS 设置 height。\n###1.2 image组件\n\n![这里写图片描述](http://img.blog.csdn.net/20161004110941566)\n\n\n注意：mode有12种模式，其中3种是缩放模式，9种是裁剪模式。\n###1.3 Icon组件\n![这里写图片描述](http://img.blog.csdn.net/20161004111410072)\n\niconType: [\n      'success', 'info', 'warn', 'waiting', 'safe_success', 'safe_warn',\n      'success_circle', 'success_no_circle', 'waiting_circle', 'circle', 'download',\n      'info_circle', 'cancel', 'search', 'clear'\n    ]\n## 2.列表的上拉加载和下拉刷新的实现\n\n##2.1先来张效果图\n![这里写图片描述](http://img.blog.csdn.net/20161004115244341 )\n##2.2逻辑很简单，直接上代码\n###2.2.1  detail.wxml 布局文件\n```\n\u003cloading hidden=\"{{hidden}}\" bindchange=\"loadingChange\"\u003e\n    加载中...\n  \u003c/loading\u003e  \n \u003cscroll-view scroll-y=\"true\" style=\"height: 100%;\" bindscrolltolower=\"loadMore\" bindscrolltoupper=\"refesh\"\u003e\n      \u003cview wx:if=\"{{hasRefesh}}\" style=\"display: flex;flex-direction: row;align-items: center;align-self: center;justify-content: center;\"\u003e\n      \u003cicon type=\"waiting\" size=\"45\"/\u003e\u003ctext\u003e刷新中...\u003c/text\u003e\u003c/view\u003e\n      \u003cview wx:else  style=\"display:none\" \u003e\u003ctext\u003e\u003c/text\u003e\u003c/view\u003e\n  \u003cview class=\"lll\"  wx:for=\"{{list}}\" wx:for-item=\"item\" bindtap=\"bindViewTap\" \n         data-title=\"{{item.title}}\" \u003e\n      \u003cimage style=\" width: 50px;height: 50px;margin: 20rpx;\" src=\"{{item.firstImg}}\"   \u003e\u003c/image\u003e\n      \u003cview  class=\"eee\" \u003e \n       \u003cview style=\"margin:5px;font-size:8px\"\u003e 标题:{{item.title}}\u003c/view\u003e\n       \u003cview style=\"margin:5px;color:red;font-size:6px\"\u003e 来源:{{item.source}}\u003c/view\u003e\n       \u003c/view\u003e\n\u003c/view\u003e\n\u003cview class=\"tips1\"\u003e\n      \u003cview wx:if=\"{{hasMore}}\" style=\"display: flex;flex-direction: row;align-items: center;align-self: center;justify-content: center;\"\u003e\n      \u003cicon type=\"waiting\" size=\"45\"/\u003e\u003ctext\u003e玩命的加载中...\u003c/text\u003e\u003c/view\u003e\n      \u003cview wx:else\u003e\u003ctext\u003e没有更多内容了\u003c/text\u003e\u003c/view\u003e\n    \u003c/view\u003e\n \u003c/scroll-view\u003e\n\n```\n###2.2.1  detail.js逻辑代码文件\n\n```\n\nvar network_util = require('../../utils/network_util.js');\nvar json_util = require('../../utils/json_util.js');\nPage({\n  data:{\n    // text:\"这是一个页面\"\n    list:[],\n     dd:'',\n     hidden:false,\n     page: 1,\n     size: 20,\n     hasMore:true,\n     hasRefesh:false\n  },\n  onLoad:function(options){\n    var that = this;\n    var url = 'http://v.juhe.cn/weixin/query?key=f16af393a63364b729fd81ed9fdd4b7d\u0026pno=1\u0026ps=10';\n    network_util._get(url,\n    function(res){\n    that.setData({\n       list:res.data.result.list,\n       hidden: true,\n    });\n    },function(res){\n     console.log(res);\n });\n  },\n  onReady:function(){\n    // 页面渲染完成\n  },\n  onShow:function(){\n    // 页面显示\n  },\n  onHide:function(){\n    // 页面隐藏\n  },\n  onUnload:function(){\n    // 页面关闭\n  },\n   //点击事件处理\n  bindViewTap: function(e) {\n    console.log(e.currentTarget.dataset.title);\n  },\n  //加载更多\n  loadMore: function(e) {\n     var that = this;\n    that.setData({\n    hasRefesh:true,});\n    if (!this.data.hasMore) return\n    var url = 'http://v.juhe.cn/weixin/query?key=f16af393a63364b729fd81ed9fdd4b7d\u0026pno='+(++that.data.page)+'\u0026ps=10';\n    network_util._get(url,\n    function(res){\n    that.setData({\n       list: that.data.list.concat(res.data.result.list),\n       hidden: true,\n       hasRefesh:false,\n    });\n    },function(res){\n     console.log(res);\n  })\n},\n//刷新处理\nrefesh: function(e) {\n var that = this;\n that.setData({\n    hasRefesh:true,\n });\n    var url = 'http://v.juhe.cn/weixin/query?key=f16af393a63364b729fd81ed9fdd4b7d\u0026pno=1\u0026ps=10';\n    network_util._get(url,\n    function(res){\n    that.setData({\n      list:res.data.result.list,\n       hidden: true,\n       page:1,\n       hasRefesh:false,\n    });\n    },function(res){\n     console.log(res);\n })\n},\n})\n```\n\n最后的效果：\n![这里写图片描述](http://img.blog.csdn.net/20161004121453294)\n\n\n关于新闻的详情实现，后面在实现，由于还不知道怎么加载h5页面。谢谢你学习，有问题直接QQ（1561281670）交流。\n\n\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flidong1665%2FWeiXinProject","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Flidong1665%2FWeiXinProject","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flidong1665%2FWeiXinProject/lists"}