zoukankan      html  css  js  c++  java
  • better-scroll的使用

    <template>
    	<div>
    		<div>
    			<h2 class="h2">{{msg}}</h2>
    		</div>
    		<div class="wrapper" ref="wrapper">
    		    <ul class="content">
    		      	<li>世界上究竟谁是计算机技术</li>
    		      	<li>世界上究竟谁是计算机技术</li>
    		      	<li>世界上究竟谁是计算机技术</li>
    		      	<li>世界上究竟谁是计算机技术</li>
    		      	<li>世界上究竟谁是计算机技术</li>
    		      	<li>世界上究竟谁是计算机技术</li>
    		      	<li>世界上究竟谁是计算机技术</li>
    		      	<li>世界上究竟谁是计算机技术</li>
    		      	<li>世界上究竟谁是计算机技术</li>
    		      	<li>世界上究竟谁是计算机技术</li>
    		      	<li>世界上究竟谁是计算机技术</li>
    		      	<li>世界上究竟谁是计算机技术</li>
    		      	<li>世界上究竟谁是计算机技术</li>
    		      	<li>世界上究竟谁是计算机技术</li>
    		      	<li>世界上究竟谁是计算机技术</li>
    		      	<li>世界上究竟谁是计算机技术</li>
    		      	<li>世界上究竟谁是计算机技术</li>
    		      	<li>世界上究竟谁是计算机技术</li>
    		      	<li>世界上究竟谁是计算机技术</li>
    		      	<li>世界上究竟谁是计算机技术</li>
    		      	<li>世界上究竟谁是计算机技术</li>
    		      	<li>世界上究竟谁是计算机技术</li>
    		      	<li>世界上究竟谁是计算机技术</li>
    		      	<li>世界上究竟谁是计算机技术</li>
    		      	<li>世界上究竟谁是计算机技术</li>
    		      	<li>世界上究竟谁是计算机技术</li>
    		      	<li>世界上究竟谁是计算机技术</li>
    		      	<li>世界上究竟谁是计算机技术</li>
    		      	<li>世界上究竟谁是计算机技术</li>
    		      	<li>世界上究竟谁是计算机技术</li>
    		      	<li>世界上究竟谁是计算机技术</li>
    		      	<li>世界上究竟谁是计算机技术</li>
    		      	<li>世界上究竟谁是计算机技术</li>
    		      	<li>世界上究竟谁是计算机技术</li>
    		      	<li>世界上究竟谁是计算机技术</li>
    		      	<li>世界上究竟谁是计算机技术</li>
    		      	<li>世界上究竟谁是计算机技术</li>
    		      	<li>世界上究竟谁是计算机技术</li>
    		      	<li>世界上究竟谁是计算机技术</li>
    		      	<li>世界上究竟谁是计算机技术</li>
    		      	<li>世界上究竟谁是计算机技术</li>
    		      	<li>世界上究竟谁是计算机技术</li>
    		      	<li>世界上究竟谁是计算机技术</li>
    		      	<li>世界上究竟谁是计算机技术</li>
    		      	<li>世界上究竟谁是计算机技术</li>
    		      	<li>世界上究竟谁是计算机技术</li>
    		      	<li>世界上究竟谁是计算机技术</li>
    		      	<li>世界上究竟谁是计算机技术</li>
    		      	<li>世界上究竟谁是计算机技术</li>
    		      	<li>世界上究竟谁是计算机技术</li>
    		      	<li>世界上究竟谁是计算机技术</li>
    		      	<li>世界上究竟谁是计算机技术</li>
    		      	<li>世界上究竟谁是计算机技术</li>
    		      	<li>世界上究竟谁是计算机技术</li>
    		      	<li>世界上究竟谁是计算机技术</li>
    		      	<li>世界上究竟谁是计算机技术</li>
    		      	<li>世界上究竟谁是计算机技术</li>
    		      	<li>世界上究竟谁是计算机技术</li>
    		      	<li>世界上究竟谁是计算机技术</li>
    		      	<li>世界上究竟谁是计算机技术</li>
    		      	<li>世界上究竟谁是计算机技术</li>
    		    </ul>
    	  	</div>
      	</div>
    </template>
    
    <script>
    import BScroll from 'better-scroll'
    export default{
    	data(){
    		return{
    			msg:"better-scroll的使用",
    			arrList:[]
    		}
    	},
    	methods:{
    		_initScroll (){
    			let scroll = new BScroll(this.$refs.wrapper,{  // 或者添加 v-el:food-wrapper 用this.$els.foodWrapper//获取对象
    			    scrollY: true,
    			    click: true,
    			    scrollY:true,
    			    probeType:1
    			})
    		}
    	},
    	mounted(){
    		this.$nextTick(() => {       // 3 在这个函数中调用以防内容还未加载完就执行,获取不到元素的高度导致无法滑动
                this._initScroll()
            })
            this.$http.get('./../index.data').then(function(res){
    				console.log( res.data);
    				setTimeout(function(){
    					_this.arrList=res.data;
    				},1000);
    			}).catch(function(err){
    				console.log(err);
    		});
    	}
    }
    	
    </script>
    
    <style scoped>
    	.h2{
    		 100%;	
    		height: 44px;
    		border-bottom: 1px solid #3171F6;
    		position: fixed;
    		top: 0;
    		left: 0;
    		right: 0;
    		text-align: center;
    		line-height: 44px;
    		background: #fff;
    	}
    	.wrapper{
    		padding: 44px 0;
    		height: 800px;
    		overflow: hidden;
    	}
    	
    	
    </style>
    

      容器一定要设定高度,不然无法滚动

  • 相关阅读:
    DOS命令行编译运行java
    mysql安装
    ICCV2021 | Vision Transformer中相对位置编码的反思与改进
    ICCV2021 | 医学影像等小数据集的非自然图像领域能否用transformer?
    ICCV2021 | TransFER:使用Transformer学习关系感知的面部表情表征
    2021视频监控中的多目标跟踪综述
    ML2021 | (腾讯)PatrickStar:通过基于块的内存管理实现预训练模型的并行训练
    ICCV2021 | SOTR:使用transformer分割物体
    ICCV2021 | PnPDETR:用Transformer进行高效的视觉分析
    使用Latex/Tex创建自己的简历。
  • 原文地址:https://www.cnblogs.com/qq735675958/p/8360853.html
Copyright © 2011-2022 走看看