小程序滚动加载

这是一个关于WXML静态页面滚动加载的示例,使用scroll-view组件实现内容的滚动,并在滚动到底部时触发加载更多数据。页面样式包括列表项的布局、颜色和文字截断处理。js部分展示了如何处理加载更多数据的逻辑,包括数据拼接、加载提示以及边界检查。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

wxml静态页面

    <view class='box'>

      <scroll-view scroll-y='true' style="height:{{height}}rpx" bindscrolltolower='lower'>

        <view class="list"  wx:for="{{res}}" wx:for-item="item" data-id="{{index}}" wx:key="index" style="height:{{(height/5)-1}}rpx;">

          <view class="p1">{{item.time}}</view>

          <view class="p2">{{item.record}}</view>

        </view>

      </scroll-view>

    </view>

wxss样式部分

.box .list{

  padding: 10rpx 0 0 0;

  box-sizing: border-box;

  text-align: left;

  border-bottom: 1rpx solid #e6e6e6;

}

.box .p1{

  color: #000000;

  font-size: 28rpx;

  line-height: 45rpx;

}

.box .p2{

  color: #737373;

  font-size: 24rpx;

  line-height: 65rpx;

  overflow:hidden;

  text-overflow:ellipsis;

  white-space:nowrap;

}

js部分

data:{

    height: '',

    res: [

      {

        time:'2022/01/25',

        record:'可回收垃圾(6kg),厨余垃圾(10kg),其他垃圾(4kg),有害垃圾(1kg)'

      },

      {

        time:'2022/01/26',

        record:'可回收垃圾(6kg),厨余垃圾(10kg),其他垃圾(4kg),有害垃圾(1kg)'

      },

      {

        time:'2022/01/27',

        record:'可回收垃圾(6kg),厨余垃圾(10kg),其他垃圾(4kg),有害垃圾(1kg)'

      },              

    ]

},

  lower() {

    var result = this.data.res;

    var resArr = [];

    for (let i = 0; i < 10; i++) {

      resArr.push(i);

    };

    var cont = result.concat(resArr);

    console.log(resArr.length);

    if (cont.length >= 12) {

      wx.showToast({ //如果全部加载完成了也弹一个框

        title: '我也是有底线的',

        icon: 'success',

        duration: 1500

      });

      return false;

    } else {

      wx.showLoading({ //期间为了显示效果可以添加一个过度的弹出框提示“加载中”  

        title: '加载中',

        icon: 'loading',

      });

      setTimeout(() => {

        this.setData({

          res: cont

        });

        wx.hideLoading();

      }, 1500)

    }

  },

  /**

   * 生命周期函数--监听页面加载

   */

  onLoad: function (options) {

    wx.getSystemInfo({

      success: (res) => {

        this.setData({

          height: res.windowHeight

        })

      }

    })

  },

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值