uniapp中怎么使用scrpll-view组件实现下拉刷新

web前端|uni|app

uniapp,scrpll-view,下拉刷新

web前端-uni-app

uniapp中怎么使用scrpll-view组件实现下拉刷新？下面本篇文章给大家介绍一下uniapp使用scroll-view自定义下拉刷新的方法，希望对大家有所帮助！

磁力链下载站源码,ubuntu永久增加网关,启动tomcat文件一闪而过,爬虫子的地方,为什么说php做网页特别好,优化重点seolzw

仿mmm源码,ubuntu20.4设置,爬虫新闻推荐系统,php accpet,永泰正规seolzw

uniapp下拉刷新

图片新闻网站源码,vscode里路径符号,ubuntu彻底死机,tomcat无法改密码,钻石爬虫,php博客框架,seo网络精准营销运营方案,asp.net资源网站,网上订餐网站模板lzw

一.整个页面的刷新(onPullDownRefresh)

二.自定义页面刷新(scroll-view)

组件中遇到的问题

触发不了下拉（原因排查）

1、scroll-view组件外部没有用view包裹. 官网虽然没有说这个问题, 但是如果外部没有一个view单独包裹着这个组件, 就没有办法触发scroll-view组件中的事件。

2、scroll-view没有设置固定高, 在css中设置height, 设置多高就在多高的区域展现. 比如设置高为50vh(100vh为满屏), 则组件里边的内容只会在半屏内上下滚动,不会触发page的滚动条只会触发scroll-view的滚动条. 如果高度不好给确定值, 可以使用scss(lang='scss')中的calc计算, 例子中有体现.(注意使用calc计算时, -左右一定要有空格)。

3、设置高为百分比的话也不能触发下拉. 高可以使用max-hight, 不能使用min-hight。

4、没有设置scroll-y

没有滚动到顶部触发下拉, 而是在可视页面中触发下拉

官方默认无论page的滚动条在哪个位置, 只要在scroll-view页面上下拉都会触发下拉函数, 这样用户体验非常差. 可以使用@scroll滚动时触发的函数来获取scroll-view滚动条的位置, 进而来控制refresher-enabled开启和关闭自定义下拉刷新. 当scroll-view的滚动条滚动到顶部时, 使refresher-enabled为true, 其他条件为false。

直接上代码看：
html:

    别拉了，没有更多了~  {{ item }}

基本上下拉刷新用到的属性方法也就这几个了!
js:

export default {  data() {    return {      triggered: false,      dataList: [],      arr: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30],      page: 0,      isOpenRefresh: true // 是否开启下拉    };  },  onLoad() {    this._freshing = false;    this.getData()  },  methods: {    dealArray(array, groupNum) {      let temp = [];      for (let i = 0, len = array.length; i < len; i += groupNum) {        temp.push(array.slice(i, i + groupNum));      }      return temp;    },    // 自定义下拉刷新控件被下拉    onPulling(e) {      console.log("onpulling", e);      if (e.detail.deltaY  {        this.triggered = false;        this._freshing = false;        this.getData();      }, 500);    },    // 自定义下拉刷新被复位    onRestore() {      this.triggered = 'restore'; // 需要重置      console.error("onRestore");    },    // 自定义下拉刷新被中止    onAbort() {      console.error("onAbort");    },    getData() {      // 前端模拟分页      let temp = this.dealArray(this.arr, 3)       if (this.page > temp.length - 1) {        this.isOpenRefresh = false        return       }      this.dataList.push(...temp[this.page])    }  },};

style:

view {  text-align: center;}.item:nth-child(odd) {  background-color: antiquewhite;}.item:nth-child(even) {  background-color: aquamarine;}

演示：

// 触顶操作-准入scrolltoupper() {    this.isAllowRefresh = true}// 自定义下拉刷新控件被下拉onPulling(e) {    if (e.detail.deltaY < 0) return    if (!this.isAllowRefresh) return;    this.isRefresh = true;    console.log("onpulling", e);}

export default class Index extends mixins(uiMixin) {	scrollTop: number = 0	// 监听页面是否滚动 	onScroll(e) {        this.scrollTop = e.detail.scrollTop	}	// 自定义下拉刷新被触发  onRefresh() {	if (this.scrollTop === 0) {		if (this._freshing) return;        this._freshing = true;        this.page++;       	setTimeout(() => {          this.triggered = false;          this._freshing = false;          this.getData();       }, 500);	}  }})