使用vue+better-scroll实现“上拉加载下拉刷新”功能

前言

在开发移动端的时候，基本上都会使用到上拉加载下拉刷新这个功能，下面一起来看一下具体该如何实现。

开发环境

vue
vue-cli
better-scroll
less

开发步骤一

通过脚手架创建vue项目，安装better-scroll：npm install better-scroll --save-dev
在项目中引入better-scroll对象import Bscroll from ‘better-scroll’
安装less：npm install less less-loader --save-dev
移动端适配（代码文件：index.html)


创建重置样式，并在APP.vue文件中引入
html,
body,
#app {
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  font-family: 'Microsoft YaHei UI';
  box-sizing: border-box;
  position: relative;
  z-index: -1;
}
h1,
h2,
h3,
h4,
h5,
p,
ul,
li,
button,
a {
  padding: 0;
  margin: 0;
  font-weight: normal;
}
a {
  text-decoration: none;
}
ul,
li {
  list-style: none;
}
button {
  border: none;
  outline: none
}

.golden {
  color: #ec9c00;
}

.graybgc {
  background-color: #eee;
}

.graytext {
  color: #717171;
}
span {
  display: inline-block;
  vertical-align: middle;
}

开发步骤二
编写结构代码


注意下面几个问题：
高度问题：当子元素高度小于父元素高度时，不会触发任何下拉行为。那么此时只要控制子元素的高度大于父元素的高度即可。
better-scroll不能滚动问题，pc端可以滚动，切换到手机端不能滚动：创建ref="wrapper"这个BScroll对象时，就会把子元素的ovflow:scroll给禁止掉，此时我们重新设置子元素的相关属性即可。详解地址
开发步骤二
编写样式代码

.order-list {
  position: relative;
  width: 100%;
  min-height: 100%;
  padding: 0.25rem 0.4rem 0;
  box-sizing: border-box;
  .order-wrapper {
    height: 90vh;
    .order-info {
      width: 100%;
      height: 91.1vh;
      overflow-y: scroll;
      -webkit-overflow-scrolling: touch;
      .top-tip {
 margin-top: .2rem;
 width: 100%;
 height: 0.5rem;
 line-height: 0.1rem;
 text-align: center;
 span {
   font-size: 0.2rem;
 }
      }
      .order-box {
 background-color: #fff;
 padding: 0.15rem 0.3rem;
 box-sizing: border-box;
 border-radius: 0.05rem;
 font-size: 0.2rem;
 margin-bottom: 0.3rem;
 .header {
   display: flex;
   justify-content: space-between;
   align-items: center;
   .user-info {
     color: #000;
     text-align: left;
     .game-name {
margin-right: 0.1rem;
     }
   }
   .order-status {
     .no-play-btn {
padding: 0.01rem 0.2rem;
background-color: #ec6f00;
color: #fff;
border-radius: 0.2rem;
margin-left: 0.1rem;
     }
   }
 }
 .info {
   display: flex;
   width: 100%;
   padding: 0.1rem 0 0.15rem;
   box-sizing: border-box;
   border-bottom: 0.02rem solid #d5d5d5;
   .info-img {
     display: inline-block;
     vertical-align: top;
     width: 1.1rem;
     height: 1.1rem;
     background-color: #ec6f00;
     text-align: center;
     line-height: 1.1rem;
     margin-right: 0.2rem;
     position: relative;
     img {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
display: inline-block;
width: 0.8rem;
height: 0.8rem;
border-radius: 50%;
     }
   }
   .info-number {
     display: inline-block;
     vertical-align: top;
     height: 1.1rem;
     text-align: left;
     padding: 0;
     margin: 0;
     .title {
font-size: 0.28rem;
color: #000;
     }
   }
 }
 .footer {
   display: flex;
   justify-content: space-between;
   align-items: center;
   padding-top: 0.15rem;
   .money {
     display: inline-block;
     vertical-align: middle;
     font-size: 0.28rem;
     color: #000;
     span {
vertical-align: baseline;
     }
     .min {
font-size: 0.22rem;
     }
   }
 }
      }
      .null-box {
 width: 100%;
 height: 1px;
      }
      .bottom-tip {
 text-align: center;
 font-size: 0.2rem;
 color: #999;
 margin-top: -0.2rem;
 margin-bottom: 0.3rem;
      }
    }
    .order-no {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%) !important;
      width: 4rem;
      height: 5rem;
      text-align: center;
      .img {
 width: 1.38rem;
 height: 1.8rem;
 background-color: #999;
 margin: 0 auto;
      }
      .desc {
 margin-top: 0.4rem;
 font-size: 0.3rem;
      }
    }
  }
  .order-footer {
    width: 100%;
    height: 0.6rem;
    line-height: 0.6rem;
    position: fixed;
    bottom: 0;
    left: 0;
    font-size: 0.24rem;
    background-color: inherit;
    z-index: 1;
    text-align: center;
    a {
      text-decoration: underline;
      color: #000;
    }
  }
}


开发步骤三
编写js代码


尾声
以上便是实现上拉加载下拉刷新功能的详细过程。更高阶的技巧是将该功能封装成一个公共的组件，提供给各个页面使用，这个过程的实现且看下回分解。

使用vue+better-scroll实现“上拉加载下拉刷新”功能

Vue.js相关栏目本月热门文章