微信小程序下拉加载更多

来源:互联网 发布:陈大新 矩阵理论 编辑:程序博客网 时间: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;}

如果看不明白把代码拷贝到你的项目中,就能看明白了