微信小程序列表的上拉加载和下拉刷新的实现
来源:互联网 发布:java xml转化成pdf 编辑:程序博客网 时间:2024/06/05 15:28
微信小程序可谓是9月21号之后最火的一个名词了,一经出现真是轰炸了整个开发人员,当然很多App开发人员有了一个担心,微信小程序的到来会不会让移动端App颠覆,让移动端的程序员失业,身为一个Android开发者我是不相信的,即使有,那也是需要个一两年的过度和打磨才能实现的吧。
不管微信小程序是否能颠覆当今的移动开发格局,我们都要积极向上的心态去接收,去学习。不排斥新技术,所以,心动不如行动,赶紧先搭建一个微信小程序开发工具。那么接下来就让我们来开始学习列表的上拉加载和下拉刷新的实现吧(通过聚合数据平台获取微信新闻)。
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 布局文件
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
2.2.1 detail.js逻辑代码文件
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
- 76
- 77
- 78
- 79
- 80
- 81
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
- 76
- 77
- 78
- 79
- 80
- 81
最后的效果:
关于新闻的详情实现,后面在实现,由于还不知道怎么加载h5页面。谢谢你学习,有问题直接QQ(1561281670)交流。
代码地址:https://github.com/lidong1665/WeiXinProject
阅读全文
0 0
- 微信小程序初体验-列表的上拉加载和下拉刷新的实现
- 微信小程序列表的上拉加载和下拉刷新的实现
- 微信小程序列表的上拉加载和下拉刷新的实现
- 【微信小程序之列表渲染】列表下拉刷新和上拉加载的实践
- 微信小程序实现--列表的上拉刷新和上拉加载
- 微信小程序实现页面下拉刷新和上拉加载
- RecyclerView和SwipeRefreshLayout结合实现列表的上拉加载下拉刷新
- 上拉刷新下拉加载的实现
- 实现TableView的上拉加载和下拉刷新
- 实现TableView的上拉加载和下拉刷新
- tableview的下拉刷新和上拉加载功能实现
- ListView下拉刷新和上拉加载更多的实现
- 实现ListView的下拉刷新和上拉加载
- Android 实现RecyclerView的下拉刷新和上拉加载
- 实现ListView的上拉刷新和下拉加载
- 微信小程序(六):列表上拉加载下拉刷新
- 小程序 实现上拉加载更多 和下拉刷新的功能
- 微信小程序下拉刷新上拉加载的两种实现方法
- PYTHON爬虫学习-糗事百科内容爬取
- 1:分析菱形继承的问题。 2:剖析虚继承是怎么解决二义性和数据冗余的。
- 深入理解linux内核——内存寻址
- Windows 10右键点击Word EXCEL PPT PDF等,系统资源管理器立即重启解决方法
- 虚拟机CentOS7 配置固定IP地址
- 微信小程序列表的上拉加载和下拉刷新的实现
- Cardiologist-LevelArrhythmiaDetectionwithConvolutionalNeuralNetworks
- 初试iOS coreML
- Error creating bean with name 'mvcContentNegotiationManager'
- TCP
- POJ 2983 Is the Information Reliable (差分约束 bell/spfa判断负环)
- PAT (Advanced Level) Practise 1029 Median (25)
- poj 3352 Road Construction 【边双连通分量缩点 + 加边定理】
- 【JavaScript的关系操作符】