vue移动端下拉刷新和上拉加载的实现代码

由于自身的项目比较简单，只有几个H5页面，用来嵌入应用中，所有没有引入移动端的用户界面框架，但是介于能让用户在浏览H5页面时有下拉刷新和上拉加载，有更好的用户体验，自己写组件实现。

1、下拉刷新DropDownRefresh.vue

template lang=' html ' div class=' refreshMoudle ' @ touch start=' touch start($ event)' @ touch move=' touch move($ event)' @ touch end=' touch end($ event)' : style=' { translate 3360 ' translate 3d(0，' top 'px，0)' } ' header class=' pull-refresh ' slot name=' pull-refresh ' div class=' down-tip ' v-if=' Dropdownste=' 1 ' img v-if=' Dropdownstate '././assets/images/refreshandleload/' DropDownStateText。down img)' span class=' down-tip-text“{ DropDownStateText。down Xt } }/span/div class=' up-tip ' v-if=' DropDownState=' 2 ' img v-if=' DropDownStateText。UPIMg ' class=' up-tip-img ' : src=' http : require('././assets/images/refreshandleload/' DropDownStateText。UPI mg)span class=' up-tip-text ' { DropDownStateText。upxt } }/span/div class=' refresh-tip ' v-if=' DropDownState=' 3 ' img v-if=' DropDownState text。refresh img ' class=' refresh-tip-img ' : src=' http 3: require('././assets/images/refreshandleload/' DropDownStateText。refresh img)' span class=' refresh-tip-text ' { DropDownStateText。refreshtxt } }/span/div/slot/header slot/slot/div/templates导出默认值{ props 3360 { onRefresh : { type 3: Function，required: false } }，data(){ return { default offset : 100，//默认高度，相应的修改releshMoudle .的上边距和。向下倾斜。向上倾斜。刷新提示的高度top: 0，滚动条Top: 0，起点： 0，isDropDown: false，//是否下拉isRefreshing: false，//是否正在刷新dropDownState: 1，//显示1:下拉刷新， 2:松开刷新， 3:刷新中……放下下行文本： {下行文本： '下拉刷新，下行： ' ',上行： '松开刷新，upim : ' release.png '，refreshTxt: '刷新中.refreshim g : '刷新。gif ' } } }，创建了(){ if(document。queryselector(').做