uniapp 下拉刷新 上拉加载

      下拉刷新

  • 需要在 pages.json 里,找到的当前页面的pages节点,并在 style 选项中开启 enablePullDownRefresh

  • {
      "path":"pages/list/list",
        "style":{
          "enablePullDownRefresh": true
        }
    }

    上拉加载

  • 通过在pages.json文件中找到当前页面的pages节点下style中配置onReachBottomDistance可以设置距离底部开启加载的距离,默认为50px

    通过onReachBottom监听到触底的行为

  • <template>
    	<view>
    		<view v-for="(item,index) in arr" :key="index">
    			{
         
         {item}}
    		</view>
    	</view>
    </template>
    <script>
    	export default {
    		data () {
    			return {
    				arr: ['前端','java','ui','大数据','前端','java','ui','大数据']
    			}
    		},
    		onReachBottom () {
    			console.log('触底了')
    		}
    	}
    </script>
    
    <style>
    	view{
    		height: 100px;
    		line-height: 100px;
    	}
    </style>
     {
                "path" : "pages/my/my",
                "style" : {
    				"onReachBottomDistance":200
    			}
            }, 

猜你喜欢

转载自blog.csdn.net/weixin_51867622/article/details/123299070