1234567891011121314151617181920212223242526272829303132333435363738394041 |
- <template>
- <view class="main">
- <scroll-view class="main_box" scroll-y="true" @scrolltolower="lower">
- <view class="main_centent">第2个页面(上拉加载更多)</view>
- <image src="../../static/img/6.jpg" mode="aspectFit"></image>
- <image src="../../static/img/4.jpg" mode="aspectFit"></image>
- </scroll-view>
- </view>
- </template>
- <script>
- export default{
- data() {
- return{
-
- }
- },
- methods: {
- ontrueGetList(){
- uni.showToast({
- title:'第2个页面'
- })
- console.log("加载了第二个页面,可以把网络请求放这里")
- },
- lower(){
- uni.showToast({
- title:'scroll-view的加载更多'
- })
- console.log("分页数据可以放这里~~~~~~嘿嘿")
- }
- }
- }
- </script>
- <style lang="scss">
- .main{background-image: linear-gradient(45deg, #0081ff, #1cbbb4);}
- // padding-bottom:120rpx;box-sizing: border-box;重要*************************保证页面底部内容不被隐藏也不会出现多余的滚动条
- .main_box{width:100vw;height: 100vh;padding-bottom:120rpx;box-sizing: border-box;}
- .main_centent{width: 100%;height: 100vh;color: #fff;letter-spacing: 4rpx;display: flex;align-items: center;justify-content: center;}
- image{width:750rpx;height: 750rpx;}
- </style>
|