聊聊uniapp的scroll-view下拉加载

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<view class="live-content">这是一个直播画面</view>
  <scroll-view
    class="scroll"
    :scroll-y="true"
    :scroll-into-view="scrollIntoView"
    @scrolltoupper="upper"
  >
    <view
      :id="item.index"
      :style="{
        backgroundColor: item.color,
        height: '200rpx',
        lineHeight: '200rpx',
        textAlign: 'center',
      }"
      v-for="item in scrollData"
      :key="item.index"
    >
      {{ item.data }}
    </view>
  </scroll-view>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
const scrollIntoView = ref("index1");
const upper = () => {
  let lastNum = scrollData.value[0].data;
  let newArr = [];
  for (let index = 1; index <= 10; index++) {
    newArr.push({
      color: getRandomColor(),
      data: lastNum + index,
      index: `index${lastNum + index}`,
    });
  }
  scrollData.value.unshift(...newArr.reverse());
  // 这里可以使用nextTick来替换一下，结果也是一样的，但是为了更明显的回弹效果我使用了定时器
  setTimeout(() => {
    scrollIntoView.value = `index${lastNum}`;
    console.log("scrollIntoView  :>>", scrollIntoView.value);
  }, 100);
};
const getRandomColor = () => {
  return "#" + Math.random().toString(16).substr(2, 6);
};

1
2
3
4
5
6
::-webkit-scrollbar {
  display:none;
  width:0;
  height:0;
  color:transparent;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
const currentShowPage=ref(0)
const upper = () => {
  let len = scrollData.value[currentShowPage.value].length - 1;
  let lastNum = scrollData.value[currentShowPage.value][len].data;
  let newArr = [];
  currentShowPage.value += 1;
  for (let index = 1; index <= 10; index++) {
    newArr.push({
      color: getRandomColor(),
      data: lastNum + index,
      index: `index${lastNum + index}`,
    });
  }
  scrollData.value[currentShowPage.value] = newArr;
};

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<scroll-view style="transform:rotate(180deg)" :scroll-y="true" @scrolltolower="upper">
    <view v-for="(data, index) in scrollData" :key="index">
      <view
         style="transform:rotate(180deg)" 
        :style="{
          backgroundColor: item.color,
          height: '200rpx',
          lineHeight: '200rpx',
          textAlign: 'center',
        }"
        v-for="item in data"
        :key="item.index"
      >
        {{ item.data }}
      </view>
    </view>
  </scroll-view>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
const pagesHeight = []
onReady(()=>{
    setPageHeight()
})

const upper = () => {
  ...
  nextTick(() => {
    // 每次获取新数据都调用一下
    setPageHeight();
  });
};

const setPageHeight = () => {
  let query = uni.createSelectorQuery();
  query
    .select(`#item-${currentShowPage.value}`)
    .boundingClientRect(res => {
      pagesHeight[currentShowPage.value] = res && res.height;
    })
    .exec();
};

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
onReady(() => {
  ...
  observer(currentShowPage.value);
});
const upper = () => {
  ...
  nextTick(() => {
    // 每次获取新数据都调用一下
    observer();
  });
};

// 允许渲染的数组下标，需要设置默认值
const visiblePagesList = ref([-1,0,1])
const observer = pageNum => {
  const observeView = wx
    .createIntersectionObserver()
    .relativeTo("#scroll", { top: 0, bottom: 0 });
  observeView.observe(`#item-${pageNum}`, res => {
    if (res.intersectionRatio > 0) visiblePagesList.value = [pageNum - 1, pageNum, pageNum + 1];
  });
};

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<scroll-view id="scroll" class="scroll" :scroll-y="true" @scrolltolower="upper">
    <view v-for="(data, index) in scrollData" :key="index" :id="'item-' + index">
      <template v-if="includePage(index)">
        <view
          class="scroll-item"
          :style="{
            ...
          }"
          v-for="item in data"
          :key="item.index"
        >
          {{ item.data }}
        </view>
      </template>
      <view v-else :style="{ height: pagesHeight[index] }"></view>
    </view>
  </scroll-view>

1
2
3
const includePage = index => {
  return visiblePagesList.value.indexOf(index) > -1;
};

1
2
3
4
5
6
7
8
9
10
11
<scroll-view
    id="scroll"
    class="scroll"
    :scroll-y="true"
    :scroll-top="currentTop"
    @scroll="handle_scroll"
    @scrolltolower="upper"
  >
  ...
  </scroll-view>
  <view v-show="showGoBottom" class="go-back-btn" @click="handle_goBottom">回底</view>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
let scrollTop;
const currentTop = ref(0);
const showGoBottom = ref(false);
const handle_scroll = throttle(event => {
  scrollTop = event[0].detail.scrollTop;
  if (scrollTop > 300) {
    showGoBottom.value = true;
  }
}, 100);
const handle_goBottom = () => {
  currentTop.value = scrollTop;
  nextTick(() => {
    currentTop.value = 0;
  });
  showGoBottom.value = false;
};