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

场景:
场景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)
  },

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

  • 1
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值