微信小程序上拉加载

lfkabb

于 2021-09-24 15:02:23 发布

阅读量342

点赞数

分类专栏：微信小程序文章标签：小程序微信

本文链接：https://blog.youkuaiyun.com/lfkabb/article/details/120454200

版权

自己写demo,做一个微信小程序不通过后端传输数据本地循环数据上拉加载的效果。

效果是这样的，代码：

wxml:

<view class="contain">
    <view class="listCont">
        <view class="li" wx:for="{
  {arrayList}}" wx:key="index">{
  {item.id}} -- {
  {item.names}}</view>
    </view>
</view>

wxss:

.contain{
    width: 100%;
}
.listCont{
    width: 100%;
    padding: 20rpx;
    box-sizing: border-box;
}
.li{
    width: 100%;
    height: 150rpx;
    line-height: 150rpx;
}

js:

js里面需要循环数组对象。首先声明一个对象 obj={},然后给对象添加属性id和names，再然后把obj赋值给newList[i],这都在for循环里进行。

在onLoad里面因为是初次加载只有10条，i<10就可以了。

然后在onR