rinetd 设计模式 vue unicode vcpkg cassandra bitmap 后台界面模板 pmp教程 erp系统源码 mysql小数用什么类型 cpm计算 基于bootstrap的框架 python加注释 python打开文件 python基础练习 java中的多态 java环境配置 java正则表达式匹配 java重命名 java多线程编程 linux安装教程 python网站开发实例 decimalformat java分布式开发 战地联盟辅助 生存猎人属性 狮子狗皮肤 js倒计时 骰子动态图 ps蒙版抠图详细教程 毕业证件照 脚本编程 cad乘号 女圣骑 图片文字提取软件 wps苹果电脑版 exe文件反编译 七彩虹网驰版为什么坑 豌豆代理
当前位置: 首页 > 学习教程  > 编程语言

当better-scroll遇到vue

2020/12/5 10:14:00 文章标签:

使用better-scroll遇到的问题 原来项目中只使用了better-scroll来做轮播图和滑动组件,但是头部和标签栏是固定的,只滑动下面部分,于是设置 scroll-warpper样式如下: .scroll-wrapper {position: absolute;top: 80px;left: 0;rig…

使用better-scroll遇到的问题

原来项目中只使用了better-scroll来做轮播图和滑动组件,但是头部和标签栏是固定的,只滑动下面部分,于是设置 scroll-warpper样式如下:

.scroll-wrapper {
  position: absolute;
  top: 80px;
  left: 0;
  right: 0;
  bottom: 0;
}

但是想要实现下部组件与上部标签的联动,仅仅靠better-scroll就不够了,于是项目中按需引入了vant的的标签组件,来实现移动端的左右滑动(不得不说,封装好的东西就是香)。紧接着就产生了问题,

  • 一是:下部组件无法滑动,
  • 二是:better-scroll滑不到底部,只能滑一部分。刷新页面后可以滑动了

分析问题:

  • 查看dom发现vant的content__wrap没有高度,而scroll-warpper和内容高度一致。这是由于content__wrap的定位是relative,而scroll-wrapper是相对于content__wrap而定位的,并不是相对整个页面定位,所有内容是被里面撑开的。
  • 页面中有大量图片,当dom加载完成后图片并没有加载完成,scroll已经初始化了,所以滑不到底部。刷新页面可以滑动是因为图片已经被浏览器缓存了,刷新直接拿到图片不需要重新请求。

解决问题:

  • 第一个问题是定位的原因,那我们把wrapper的高度写死就好了,
    但是由于头部和标签是自适应的,高度是不确定的,就没法写死了。使用动态获取设置wrapper的style:
setScrollWrapperHeight() {
      this.$refs.scroll.$el.style.height =
        window.innerHeight - this.topHeight + 'px'
    },
  • 由于多个页面都需要这个配置,放到mixin中,在mounted方法中调用此方法。
    解决wrapper高度问题。
  • 第二个问题是图片加载时content的高度设置错误问题,可以通过img的load方法判断图片是否加载完成。
    子组件:
imgAllLoad() {
     const mulitImg = document.querySelectorAll('.suggest-item-img')
     const promiseAll = []
     const imgTotal = mulitImg.length
     for (let i = 0; i < imgTotal; i++) {
       promiseAll[i] = new Promise((resolve, reject) => {
         mulitImg[i].onload = function () {
           // 第i张加载完成
           resolve(mulitImg[i])
         }
       })
     }
     return promiseAll
   },

在子组件mounted中:派发一个imgLoad方法

Promise.all(this.imgAllLoad()).then(() => {
      this.$emit('imgLoad')
    })

在父组件监听此方法,并刷新scroll组件

methods: {
    imgLoad() {
      this.$refs.scroll.refresh()
    }
  },

这样体验就不错了。


本文链接: http://www.dtmao.cc/news_show_450178.shtml

附件下载

相关教程

    暂无相关的数据...

共有条评论 网友评论

验证码: 看不清楚?