iscroll在vue中基本用法

iscroll在vue中基本用法

使用步骤:

1. 装包 npm i iscroll

2. 导包

3. html 三层结构

4. css position:relative overflow:hidden

5. new IScroll(dom,{
       mouseWheel:true,
       scrollbars:true
   })

6. refresh() 注意异步处理

7.  

注意点

• iscroll实例化时得在mounted里面，因为iscroll实例化得调用vue的dom，mounted是生命周期里第一个可访问dom的

• 使用iscroll刷新数据时，加入了setTimeout,因为vue中数据改变到更新到页面，是有很多代码要执行的，是需要时间的，、而iscroll刷新时要获取 最新dom高度等信息处理，所以一定要在dom更新完成时使用。

​

    
    
    
    


​

    

        点我啊
        

            

                
{{item}}
            
        
    
    
    
    

​

单元素动画

直通车

实现动画只能在：显示和隐藏 v-show v-if

步骤:

1. transition 包住

2. name css的前缀

3. xxx-enter-active

4. xxx-leave-active

5. xxx-enter

6. xxx-leave-to

用法 :

• html部分的处理

  • 用transition把要动画的元素包起来，给一个name值，name值其实就是后面动画css里面的class前缀

  • transition name="xxoo">
        
    
    

• css部分的处理

  • xxoo-enter-active与xxoo-leave-active只是实现动画transition的一个class,只是为了执行transition动画,可以设置transition相关属性

  • xxoo-enter就是单元素进入前的状态也就是进入时需要是什么样子

  • xxoo-leave-to就是离开后需要变成什么样的样式

  • .xxoo-enter-active,
        .xxoo-leave-active {
            transition: all 2s;
        }
        //这里的xxoo-enter就是进入前的样式
        //这里xxoo-leave-to就是离开后需要变成什么样的样式
        .xxoo-enter {
            opacity: 0;
            transform: translateX(-600px);
        }
    ​
        .xxoo-leave-to
            {
            opacity: 0;
            transform: translateX(600px);
        }

作用：对单元素实现一个进入或者离开时的一个动画效果处理，一般是v-if 与v-show对单元素操作时的动画

 

多元素动画

多元素动画必须用transition-group包住,且每个子元素必须设置一个key，其它和单元素动画是一样的

步骤:

1. transition-group

2. 每一项都要加key

​

    
    
    
    


​

    

​
        点我切换
        
        
        
            

            

        
​
​
    
    
    

​