如何正确使用滚动插件而不出现展现不完整的情况？

Question

<template>
 <div class="breakdownList" ref="breakdownList">
   <ul>
     <li v-for="item in breakdownList" class="header-wrapper" @click="selectMenu(item.id,item.state)">
       <div class="order-query">
         <div class="header-wrapper">
           <div class="header-time">{{item.create_date}}</div>
           <div class="header-status">{{item.state}}></div>
         </div>
         <div class="text-wrapper">
           <div class="breakdown-wrapper"><span class="text-wrapper-icon"
:class="classMap[0]"></span>{{item.note}}
           </div>
           <div class="breakdown-person"><span class="text-wrapper-icon"
:class="classMap[1]"></span>代维人员:{{item.prepare_user}}
           </div>
           <div class="area"><span class="text-wrapper-icon" :class="classMap[2]"></span>{{item.company}}</div>
         </div>
       </div>
     </li>
   </ul>
 </div>
</template>

<script type="text/ecmascript-6">
import BScroll from 'better-scroll';
 const ERR_OK = 0;
 export default {
   props: {
     orderquery: {
       type: Object
}
   },
   data() {
     return {
       breakdownList: []
     };
   },
   created() {
     this.classMap = ['color1', 'color2', 'color3'];
     this.$http.get('/api/breakdownList').then((response) => {
       response = response.body;
       if (response.errno === ERR_OK) {
         this.breakdownList = response.data;
         this.$nextTick(() => {
           this.scroll = new BScroll(this.$refs.breakdownList, {
             click: true
});
         });
       }
     });
   },
   methods: {
     selectMenu(mes, state) {
       if (state !== '待评价') {
         alert('跳转到工单追踪界面');
       } else {
         alert("跳转到工单评价界面");
       }
     }
   }
 };
</script>

<style lang="stylus" rel="stylesheet/stylus">
@import "../../common/stylus/mixin";

 .breakdownList
position: absolute
top: 147px
bottom: 0
width: 100%
   bg-media(50px)
   overflow: hidden
bg-color(#f3f5f7)
   .order-query
margin: 10px
border: 1px solid #f3f5f7
border-radius: 5px
font-size: 14px
bg-color(#ffffff)
     .header-wrapper
margin-top: 5px
margin-bottom: 20px
.header-time
padding-left: 10px
.header-status
position: absolute
right: 15px
color: rgb(147, 153, 159)
     .text-wrapper
line-height: 25px
.text-wrapper-icon
display: inline-block
width: 8px
height: 8px
margin-left: 10px
margin-right: 5px
border: 1px solid #f3f5f6
border-radius: 10px
&.color1
           bg-color(#00ffff)
         &.color2
           bg-color(#1AFD9C)
         &.color3
           bg-color(#FFBB77)
</style>

Answer 1

ustbhuangyi 2017-12-20 23:44:14

这不是应该 用 better-scroll 吗

• 提问者 _奋斗的蜗牛_ #1

  使用的是老师写的better-scroll插件，自己练习写的界面，但是会出现滚动到最后一条信息之后展现不完整的情况，老师能不能给点建议，我把代码截图补上

• ustbhuangyi 回复 提问者 _奋斗的蜗牛_ #2

  看一下是不是 css 的问题，上下不要用 margin