Scenario:
Scenario 1, the page-by-page scrolling loading of the list using scroll-viewtags Scenario 2, the page-by-page scrolling loading of the list using tags and a combinationbindscrolltolowerviewonReachBottom
When scrolling to the last piece of data on the last page, the piece of data can be expanded and collapsed through the button. The default is the collapsed state. When the button is clicked, some elements will be expanded behind the piece of data. At this time, the overall height of the piece of data is increased, and the height of the entire page is also increased.
Since the scroll bar has scrolled to the bottom before the element is expanded, the increase in page height cannot be detected at this time, resulting in the expanded element not being displayed at the bottom, and it will only be displayed after manually scrolling the page.
Scenario 1 Demo:
Scenario 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)
},
Scenario 2 demo:
Scenario 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)
},
Reference article:
Wechat applet allows the page to automatically scroll to the bottom