discovery.vue 1.2 KB

1234567891011121314151617181920212223242526272829303132333435363738394041
  1. <template>
  2. <view class="main">
  3. <scroll-view class="main_box" scroll-y="true" @scrolltolower="lower">
  4. <view class="main_centent">第2个页面(上拉加载更多)</view>
  5. <image src="../../static/img/6.jpg" mode="aspectFit"></image>
  6. <image src="../../static/img/4.jpg" mode="aspectFit"></image>
  7. </scroll-view>
  8. </view>
  9. </template>
  10. <script>
  11. export default{
  12. data() {
  13. return{
  14. }
  15. },
  16. methods: {
  17. ontrueGetList(){
  18. uni.showToast({
  19. title:'第2个页面'
  20. })
  21. console.log("加载了第二个页面,可以把网络请求放这里")
  22. },
  23. lower(){
  24. uni.showToast({
  25. title:'scroll-view的加载更多'
  26. })
  27. console.log("分页数据可以放这里~~~~~~嘿嘿")
  28. }
  29. }
  30. }
  31. </script>
  32. <style lang="scss">
  33. .main{background-image: linear-gradient(45deg, #0081ff, #1cbbb4);}
  34. // padding-bottom:120rpx;box-sizing: border-box;重要*************************保证页面底部内容不被隐藏也不会出现多余的滚动条
  35. .main_box{width:100vw;height: 100vh;padding-bottom:120rpx;box-sizing: border-box;}
  36. .main_centent{width: 100%;height: 100vh;color: #fff;letter-spacing: 4rpx;display: flex;align-items: center;justify-content: center;}
  37. image{width:750rpx;height: 750rpx;}
  38. </style>