シナリオ:
シナリオ 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)
},