微信小程序列表滚动到底部,当元素高度增加时,自动滚动出后面的元素

场景:
场景1、列表使用scroll-view标签的bindscrolltolower实现的分页滚动加载
场景2、列表使用view标签和onReachBottom结合实现的分页滚动加载

当滚动到最后一页最后一条数据时,该条数据可以通过按钮展开收起部分元素,默认是收起的状态,当点击按钮时会在该条数据后面展开一些元素。此时该条数据的整体高度是增大的,整个页面的高度也是增大的。
由于在展开元素前,滚动条已经滚动到最底部了,此时无法监测到页面高度增加了,导致展开的元素在最底部没有展示出来了,需要手动滚动页面后,才会展示。

场景1演示:
在这里插入图片描述
场景1:

<!-- 通过scroll-into-view去滚动到指定的位置 -->
<scroll-view scroll-y scroll-into-view="id{
     
     {curgoodsNo}}" bindscrolltolower="reachBottom">
	<view wx:for="{
     
     {goodsList}}" wx:key="index" id="id{
     
     {item.goodsNo}}">
		<view bindtap="closeOrderGoodsBtn" wx:if="{
     
     {item.showOrderGoodsFlag}}" data-item="{
     
     {item}}" data-index="{
     
     {index}}" >
		    收起
		</view>
        <view bindtap="orderGoodsBtn" data-item="{
     
     {item}}" data-index="{
     
     {index}}" wx:if="{
     
     {!item.showOrderGoodsFlag}}">
            订货
        </view>
	</view>
	<view class="price-total" wx:if="{
     
     {item.showOrderGoodsFlag}}">
         <text>门店库存<text class="numUnit"> /{
   
   {item.saleUnitName}}</text></text>
         <text>订货数量<text class="numUnit"> /{
   
   {item.packSaleUnitName}}</text></text>
     </view>
</scroll-view>

orderGoodsBtn(e) {
    
    
    let index = e.currentTarget.dataset.index
    let goodsList = this.data.goodsList
    let dialogObj = goodsList[index]
    dialogObj.showOrderGoodsFlag = !dialogObj.showOrderGoodsFlag
    goodsList.splice(index, 1, dialogObj)
    this.setData({
    
    
      "goodsList": goodsList
    }, () => {
    
     // 当索引和长度-1相等时即最后一条数据
      if (index ===goodsList.length - 1) {
    
    
        this.setData({
    
    
          "curgoodsNo": dialogObj.goodsNo
        })
      }
    })
  },
reachBottom() {
    
    
   this._getGoodsList(false)
},

场景2演示:
在这里插入图片描述

场景2:

<!-- 设置id -->
<view class="store-container" id="storeContainer">
   <view wx:for="{
     
     {goodsList}}" wx:key="index" id="id{
     
     {item.goodsNo}}">
		<view bindtap="closeOrderGoodsBtn" wx:if="{
     
     {item.showOrderGoodsFlag}}" data-item="{
     
     {item}}" data-index="{
     
     {index}}" >
		    收起
		</view>
        <view bindtap="orderGoodsBtn" data-item="{
     
     {item}}" data-index="{
     
     {index}}" wx:if="{
     
     {!item.showOrderGoodsFlag}}">
            订货
        </view>
	</view>
	<view class="price-total" wx:if="{
     
     {item.showOrderGoodsFlag}}">
         <text>门店库存<text class="numUnit"> /{
   
   {item.saleUnitName}}</text></text>
         <text>订货数量<text class="numUnit"> /{
   
   {item.packSaleUnitName}}</text></text>
     </view>
</view>
data: {
    
    
	scrollTop: 0
}

 orderGoodsBtn(e) {
    
    
    let index = e.currentTarget.dataset.index
    let goodsList = this.data.goodsList
    let dialogObj = goodsList[index]
    dialogObj.showOrderGoodsFlag = !dialogObj.showOrderGoodsFlag
    goodsList.splice(index, 1, dialogObj)
    this.setData({
    
    
      "goodsList": goodsList
    }, () => {
    
    
      if (index ===goodsList.length - 1) {
    
    
        let that = this
        // 通过id获取高度
        wx.createSelectorQuery().select('#storeContainer').boundingClientRect(function (rect) {
    
    
          wx.pageScrollTo({
    
    
            scrollTop: rect.height,
            duration: 100 // 滑动速度
          })
          that.setData({
    
    
            scrollTop: rect.height - that.data.scrollTop
          });
        }).exec()
      }
    })
  },
  
  onReachBottom() {
    
    
    this._getGoodsList(false)
  },

参考文章:
微信小程序让页面自动滚动到底部

猜你喜欢

转载自blog.csdn.net/guairena/article/details/124808374
今日推荐