关于animation和better-scroll遇到的问题

rollback 发布于2019-08-23 17:55 / 2297人阅读

摘要：最近做了一个项目，不是蛮复杂，但是有些知识点可以分享下，先上图因为的限制所以图片有点模糊，大家凑合着看哈，首先说到这个刷新按钮刷新按钮添加旋转动画很简单这样就可以实现按钮的旋转了但接下来会有问题旋转的过程中其他的元素变得模糊还有还会引起

最近做了一个项目，不是蛮复杂，但是有些知识点可以分享下，先上图

因为4M的限制所以图片有点模糊，大家凑合着看哈，首先说到这个刷新按钮

1、刷新按钮添加旋转动画很简单

@-webkit-keyframes rotate
{

from {transform: rotate(0deg);}
to {transform: rotate(360deg);}

}

animation:rotate 0.8s linear infinite;

这样就可以实现按钮的旋转了

但接下来会有问题：1、旋转的过程中其他的元素变得模糊 2、还有还会引起父级的高度变化

解决方案：

transform:translate3d( 0, 0, 0);
z-index: 1;

亲测有效！

2、局部滚动better-scroll

用法API参考：http://ustbhuangyi.github.io/...

说说遇到的问题：

（1）我的项目里面，点击筛选按钮，会有一个侧边栏的列表展示，所以我进页面就请求列表，生成筛选的列表，并创建了scroll 对象，问题就是当我显示和隐藏侧边栏的列表的时候，scroll因为scrollerHeight丢失，而会出现卡顿前几秒不滚动的现象。

针对这个问题：我想到的是，请求数据不在一进页面而是点击按钮以后请求接口创建scroll对象并且在 this.$nextTick 里面创建

this.$nextTick(()=>{
    this.sideBarScroll = new BScroll("#sideBar_scroller",{
        scrollY: true,
        bounce:false,
        click: true
    });
});

（2）上述那么做了以后会发现一个问题，每次显示侧边栏就创建一个scroll对象肯定是不行的，肉眼可以看到的问题时就会有多个滚动条累计在一起也就是生成了多个scroll对象

解决方案：

this.$nextTick(()=>{
    if(!this.sideBarScroll){
         this.sideBarScroll = new BScroll("#sideBar_scroller",{
             scrollY: true,
             scrollbar:{
                 fade:false,
                 interactive:false
             },
             bounce:false,
             click: true
        });
     }
     else{
          this.sideBarScroll.refresh();
     }
                    
})

好啦先分享这么多，希望对大家有帮助！

云服务器 GPU云服务器关于购买云主机和主机托管的常见问题布局遇到的问题学习遗传算法遇到的问题关于购买云服务器和服务器托管的常见问题

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/104359.html

vue better-scroll 遇到的坑

摘要：先看效果介绍一个简单的静态页面主要是使用做横向滚动，点击标签滚动到相应位置，以及滚到相应位置后对应标签显示红色。先看效果 showImg(https://segmentfault.com/img/bVbqAdC?w=374&h=626); 介绍一个简单的静态页面主要是使用 better-scroll 做横向滚动，点击标签滚动到相应位置，以及滚到相应位置后对应标签显示红色。开发过程中...

yiliang 2019-08-23 16:30 评论0 收藏0
BetterScroll：可能是目前最好用的移动端滚动插件

摘要：是一款重点解决移动端各种滚动场景需求的开源插件地址，有下列功能支持滚动列表，下拉刷新，上拉刷新，轮播图，等功能。为了满足这些功能，通过使用惯性滚动边界回弹滚动条淡入淡出来确保滚动的流畅。贝瑟尔函数可以去看看，他让动画不再那么突兀。 BetterScroll 是一款重点解决移动端各种滚动场景需求的开源插件（GitHub地址），有下列功能支持滚动列表，下拉刷新，上拉刷新，轮播图，slide...

xiaolinbang 2019-08-21 17:45 评论0 收藏0
BetterScroll：可能是目前最好用的移动端滚动插件

摘要：是一款重点解决移动端各种滚动场景需求的开源插件地址，有下列功能支持滚动列表，下拉刷新，上拉刷新，轮播图，等功能。为了满足这些功能，通过使用惯性滚动边界回弹滚动条淡入淡出来确保滚动的流畅。贝瑟尔函数可以去看看，他让动画不再那么突兀。 BetterScroll 是一款重点解决移动端各种滚动场景需求的开源插件（GitHub地址），有下列功能支持滚动列表，下拉刷新，上拉刷新，轮播图，slide...

layman 2019-08-01 18:05 评论0 收藏0