首页 > 其他分享> 文章详细

better-scroll

2021-04-11 02:03:15 阅读：204 来源： 互联网

标签：res pos better msg data scroll

背景：

在移动端触发事件一般不用click 因为有延迟，一般用的是 touchstart （但是有问题，点击滑动都会触发）

所以用tap(只点击生效，滑动不生效) ，但是原生不支持

所以要用第三方的库来实现比如：zepto、vue-touch 、better-scroll（在iscroll之上再做了一层封装）、swiper

better-scroll

1、下载安装

cnpm i -S better-scroll

2、使用

注意：1、内容要足够多能撑开(如图，橙色是内容)

　　2、要等数据获取到之后再使用better-croll

在使用的页面引入

import BScroll from 'better-scroll';

数据加载完后实例化

　　参数：第一个参数是最外层dom，第二个是配置：tap等事件的一个对象

xxxxxx.then(res=>{ 
            var msg = res.data.msg;
            if(msg==='ok'){
                this.movieList = res.data.data.films;
                this.$nextTick(()=>{

　　　　　　　　　　　　new BScroll(this.$refs.movie_body,{ tap:true, click:true });

                });
                }
            })

不得不说nextTick了，因为数据是异步请求过来的，bs需要等数据加载渲染页面后才能实例化，所以正式nextTick使用场景

实现下拉刷新功能

1、在ul列表中和data 添加提示字段

 <li>{{ pullDowmMsg }}</li>

2、在bs第二个配置参数添加

 probeType: 1, // 滚动的时候会派发scroll事件，会截流

3、scroll 事件滑动触发，scrollEnd滑动结束后触发

 scroll.on("scroll", (pos) => {
            if (pos.y > 30) {
              //pos是位置 pos.y是高度
              this.pullDowmMsg = "正在更新中";
            }
          });
          scroll.on("touchEnd", (pos) => {
            if (pos.y > 30) {
              this.$axios({
                url:
                  "https://m.maizuo.com/gateway?cityId=350200&pageNum=1&pageSize=11&type=1&k=8679068",
                headers: {
                  "X-Client-Info":
                    '{"a":"3000","ch":"1002","v":"5.0.4","e":"1616165493940859830829057"}',
                  "X-Host": "mall.film-ticket.film.list",
                },
              }).then((res) => {
                var msg = res.data.msg;
                if (msg === "ok") {
                  this.pullDowmMsg = "更新成功";
                  setTimeout(() => {
                    this.movieList = res.data.data.films;
                    this.pullDowmMsg = "";
                  },1000);
                }
              });
            }
          });

on()函数用于为指定元素的一个或多个事件绑定事件处理函数

标签：res,pos,better,msg,data,scroll
来源： https://www.cnblogs.com/zhuangdd/p/14642796.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

better-scroll

实现下拉刷新功能