You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

62 lines
1.2 KiB

  1. <template>
  2. <view class="container">
  3. <scroll-view
  4. class="scroll-view"
  5. scroll-y="true"
  6. @scrolltolower="onScrollToLower"
  7. >
  8. <button @click="scrollTo">点击滚动</button>
  9. <view v-for="(item, index) in list" :key="index">
  10. {{ item }}
  11. </view>
  12. </scroll-view>
  13. <button @click="addItem">添加内容</button>
  14. </view>
  15. </template>
  16. <script>
  17. export default {
  18. data() {
  19. return {
  20. list: Array.from({ length: 20 }, (_, i) => `Item ${i + 1}`),
  21. };
  22. },
  23. methods: {
  24. onScrollToLower() {
  25. console.log("滚动到底部了");
  26. // 可以在这里加载更多数据
  27. },
  28. addItem() {
  29. this.list.push(`Item ${this.list.length + 1}`);
  30. this.$nextTick(() => {
  31. this.$refs.scrollView.scrollTo({
  32. top: 99999,
  33. duration: 300,
  34. });
  35. });
  36. },
  37. scrollTo() {
  38. uni.pageScrollTo({
  39. scrollTop: 100,
  40. duration: 300,
  41. });
  42. },
  43. },
  44. };
  45. </script>
  46. <style>
  47. .container {
  48. height: 100%;
  49. }
  50. .scroll-view {
  51. height: 80%;
  52. }
  53. button {
  54. width: 100%;
  55. height: 50px;
  56. line-height: 50px;
  57. text-align: center;
  58. background-color: #007aff;
  59. color: white;
  60. }
  61. </style>