微信小程序下拉加载更多

做一个模拟,实际应用中换成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
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值