场景:
场景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)
},
参考文章:
微信小程序让页面自动滚动到底部