微信小程序下拉加载更多
来源:互联网 发布:陈大新 矩阵理论 编辑:程序博客网 时间:2024/06/05 20:01
做一个模拟,实际应用中换成request即可
wxml
<view class="PersonPoints">积分:<text>{{StorePoints}}</text></view> <block wx:for="{{ExchangeInfo}}"> <view class="Record"> <text class="ExchangeName">{{item.ExchangeName}}</text> <text class="ExchangeDate">{{item.ExchangeDate}}</text> <text class="GetPoints" wx:if="{{item.PayPoints>0}}">{{item.PayPoints}}</text> <text class="PayPoints" wx:if="{{item.PayPoints<0}}">{{item.PayPoints}}</text> </view> </block> <view class="upload" hidden="{{HiddenFlag}}"> <image src="../../image/loading.png" class="loadding"></image> </view>
js
/** @Author: wdl* @Date: 2017-11-08 15:06:42* @Last Modified by: wdl* @Last Modified time: 2017-12-14 16:36:57*/Page({ data:{ StorePoints:"¥987", HiddenFlag: true, ExchangeInfo:[ { ExchangeName:"兑换5¥代金券", ExchangeDate:"2017-12-08 10:05:36", PayPoints:"-100", }, { ExchangeName:"进店消费", ExchangeDate:"2017-12-08 10:05:36", PayPoints:"+600", }, { ExchangeName:"兑换10¥代金券", ExchangeDate:"2017-12-08 10:05:36", PayPoints:"-190", }, { ExchangeName:"兑换5¥代金券", ExchangeDate:"2017-12-08 10:05:36", PayPoints:"-100", }, { ExchangeName:"进店消费", ExchangeDate:"2017-12-08 10:05:36", PayPoints:"+600", }, { ExchangeName:"兑换10¥代金券", ExchangeDate:"2017-12-08 10:05:36", PayPoints:"-190", }, { ExchangeName:"兑换5¥代金券", ExchangeDate:"2017-12-08 10:05:36", PayPoints:"-100", }, ], }, onPullDownRefresh(){ wx.showToast({ title: '刷新成功', icon: 'success', duration: 2000 }) wx.stopPullDownRefresh() }, onReachBottom() { this.loadMore(); }, loadMore(){ var that = this; var list=that.data.ExchangeInfo; that.setData({ HiddenFlag: false }); //实际中应换为request for(var i=1;i<5; i++){ list.push({ ExchangeName:i+"兑换5¥代金券", ExchangeDate:"2017-12-08 10:05:36", PayPoints:"-100", }) } console.log(that.data.ExchangeInfo+"1243543645safasf"); setTimeout(function(){ that.setData({ ExchangeInfo:list, HiddenFlag: true }) },2000) }})
wxss
.PersonPoints{ padding:30rpx 2%; font-size:40rpx; border-bottom:8rpx solid #f1f1f1; font-weight:700;}.PersonPoints::before{ content:"|"; color:#fc5b39; font-weight:700; font-size:34rpx; margin-right:10rpx;}.PersonPoints text{ padding-left:10rpx; color:#fc5b39;}.Record{ position:relative; padding:24rpx 4%; border-bottom:1rpx solid #f1f1f1;}.ExchangeName,.ExchangeDate{ display:block;}.ExchangeName{ font-size:42rpx; /*color:#fc5b39;*/ color:#333; margin-bottom:10rpx;}.ExchangeDate{ font-size:28rpx; color:#333;}.PayPoints{ position:absolute; right:4.5%; top:40rpx; color:#fe3939; font-size:52rpx;}.GetPoints{ position:absolute; right:4.5%; top:40rpx; color:#23dd04; font-size:52rpx;}.upload{ text-align:center}.loadding{ width:120rpx; height:120rpx;}
如果看不明白把代码拷贝到你的项目中,就能看明白了
阅读全文
1 0
- 微信小程序下拉加载更多
- 微信小程序-下拉刷新与加载更多
- 微信小程序-下拉刷新,上拉加载更多
- 微信小程序开发之 下拉刷新,上拉加载更多
- 微信小程序实战篇-下拉刷新与加载更多
- [微信小程序]下拉刷新上拉加载更多
- 微信小程序下拉刷新/上拉加载更多
- 微信小程序加载更多,点击查看更多
- 下拉加载更多
- android下拉加载更多
- listView下拉加载更多
- 网页下拉加载更多
- 下拉刷新--加载更多
- mui下拉加载更多
- jquery下拉加载更多
- 微信小程序开发(十四)scroll-view实现下拉刷新上拉加载更多
- 微信小程序,使用scroll-view实现下拉加载更多(下一页)源码
- iScroll下拉加载更多例子
- immutableJS一些API
- 关于在使用babylon导入外部模型的时候要注意的事项
- 71. Simplify Path
- 雷军的本命年:轮回中的挫败、幸运和逆袭
- 《深入理解java虚拟机》-第3章-垃圾收集器与内存分配策略
- 微信小程序下拉加载更多
- 12.14考试总结
- 100经典算法之(三)---求水仙花数
- Coding在linux下的使用
- oracle 实现插入自增列
- idea快捷键
- HTTP状态码
- 初探 ES6 Promise
- 害人之深