第十二课时better-scroll 实现区域滚动

最新推荐文章于 2021-06-02 16:54:32 发布

原创最新推荐文章于 2021-06-02 16:54:32 发布 · 284 阅读

0 ·

CC 4.0 BY-SA版权

java1234课程aliyu 同时被 2 个专栏收录

8 篇文章

订阅专栏

vue2+jwt+springboot+mybaits

8 篇文章

订阅专栏

本文详细介绍了如何在项目中安装并使用Better Scroll组件，包括必要的npm命令、代码导入及实例化步骤，同时提供了使用该组件时界面结构的具体要求。

安装better-scroll

npm install --save better-scroll
在这里插入图片描述

list.vue 对应修改

安装好import 一下，在网页挂载完毕后实例化。

<script>
    import Bscroll from 'better-scroll'
    import {getServerUrl} from '@/config/sys.js'

    export default {
        name: "List",
        props:{
          phoneBooks:Object
        },
        methods:{
          getImageUrl(image){
            return getServerUrl('image/'+image);
          }
        },
        mounted() { //在网页挂载完毕后
          this.scroll=new Bscroll(this.$refs.wrapper)//实例化
        }
    }
</script>

界面结构规定(使用better-scroll，需要特定的结构，为啥需要请去看它的实现原理)：

<template>
	<div class="list" ref="wrapper">   <!--ref和上面的this.$refs.wrapper对应-->
	
	  <div><!--这个div 是必须的-->
	  
		<!--这是一个内容层-->
		<div class="phoneBook"
			v-for="(item,key) of phoneBooks"
			:key="key">
		  <div class="title">{{key}}</div>
		  <div class="item"
			   v-for="innerItem of item"
			   :key="innerItem.id">
			<img :src="getImageUrl(innerItem.image)" >
			<div class="content border-bottom">{{innerItem.name}}</div>
		  </div> 
		</div>
		<!--这是一个内容层-->
		
	  </div><!--这个div 是必须的-->
	  
	</div>
</template>