better-scroll组件生成滑动条(移动端、pc端)

ゝ一纸荒年。 2021-07-25 01:01 906阅读 0赞

1、安装
    	cnpm install better-scroll --save
    2、引入
    	import BScroll from 'better-scroll'
    	
    3、使用
    	(1)找到父元素,可通过类名选择器选则,则父元素下的第一个子元素会滚动
    		其中:
    			1、只对第一个子元素有效,注意v-for生成的元素,应该外面再包裹一层,否则只生效第一次遍历的元素
    			2、父元素必须设置高度
    			3、该组件效果能显示滑动,要添加滚动条还得样式中,overflow:auto;
    			
    	(2)必须等到数据加载后,界面更新时使用
    	
    	let scroll = new BScroll('.wrapper')	 //此时已经实现基本滑动,有边界回弹的动画效果
    		配置对象
    		let scroll = new BScroll('.wrapper',{
    			    scrollX: true,   开启横向滚动
    				click: true,   better scroll默认不能绑定点击事件,配置true才能绑定
    				probeType:n,
    		})
    		
    		scroll.x/scroll.y也能获取当前滑动坐标
    		
    4、事件监听
    	要开启对应的事件,需要在配置对象中配置
    	默认不会实时监听,需要配置probeType
    	
    	scroll.on('官方封装好的事件名',()=>{回调});
    	
    		(1)监听滚动事件
    			配置:probeType:1,  一点小滑动不触发,不触发惯性滑动
    						  2,  滑动就会触发,不触发惯性滑动
    						  3   惯性滑动也会触发
    			scroll.on('scroll',(参数)=>{参数.x,参数.y对应横纵坐标});
    			
    		(2)监听滚动结束事件
    			scroll.on('scrollEnd',(参数)=>{参数.x,参数.y对应横纵坐标});
    			
    5、上拉加载、下拉更新
    	上拉加载
    		(1)配置
    			 new BScroll('.x',{
        				click: true,   better scroll默认不能绑定点击事件,配置true才能绑定
        				probeType:n,
        				pullUpLoad: {   默认为false,可以true开启或配置对象属性
    					  threshold: 50   距离底部距离
    					}
    			})
    		(2)监听
    			
    			scroll.on('pullingUp',()=>{
    		     
    		      scroll.finishPullUp();  在数据请求后调用该方法关闭此次上拉
    		    })
    		    
    	下拉刷新
    		(1)配置
    			 new BScroll('.x',{
        				click: true,   better scroll默认不能绑定点击事件,配置true才能绑定
        				probeType:n,
    					pullDownRefresh: { 默认为false,可以true开启或配置对象属性
    					  threshold: 50,   距离顶部距离
    					  stop: 20		   回弹停留距离
    					}
    
    			})
    		(2)监听
    			
    			scroll.on('pullingDown',()=>{
    		     
    		      scroll.finishPullDown();  在数据请求后调用该方法关闭此次下拉
    		    })
    	
    6、实例方法
        !!!当调用完滑动后,如果滑动有问题,scroll.refresh()刷新一下
        !!!监听图片加载完成后可以调用refresh/监听滚动条结束滚动事件中调用refresh
        
    	scroll.scrollTo(x坐标,y坐标,毫秒); 滚动坐标绝对位置
    	scroll.scrollBy(x坐标,y坐标,毫秒); 滚动相对坐标
    	scroll.refresh();  重新计算 better-scroll，当 DOM 结构发生变化的时候务必要调用确保滚动的效果正常。

代码时示例:  
这里是在actions.js中的异步请求函数得到数据后创建的实例

<template>
      <div class='goods'>
        <div class='glist'>
          <ul class='gul'>
            <li class='gli' v-for='(item,index) in goods' :key="index" @click='click(index)' :class='{on:gindex==index}'>
               <img :src="item.icon" alt="" v-if='index<=1'>
               <span class='gzk'>{ { item.name}}</span>
            </li>
          </ul>
        </div>
        <div class='flist'>
          <ul>
    
          <ul class='ful' v-for='(item,index) in goods' :key="index">
              <p class='fname'>{ { item.name}}</p>
            <li class='fli' v-for='(item2,index2) in item.foods' :key="index2">
                 <div class='fimg'>
                   <img :src="item2.image" alt="">
                 </div>
                 <div class='finfo'>
                   <p>{ { item2.name}}</p>
                   <p>{ { item2.description}}</p>
                   <p>{ { '月售'+item2.sellCount+'份'}}  { { '好评率'+item2.rating}}</p>
                   <p>￥{ { item2.price}}</p>
                  <div class='fcir'>
                     <div>+</div>
                   </div>
                 </div>
            </li>
    
          </ul>
         </ul>
        </div>
    
      </div>
    
    </template>
    
    <script>
      import { mapState} from 'vuex'
      import BScroll from 'better-scroll'
      export default { 
        data()
        { 
          return{ 
             gindex:0,
             scrollY:0,
             tops:[]
          }
        },
        methods: { 
          click(index) { 
            this.gindex=index;
          }
        },
        mounted()
        { 
          this.$store.dispatch('getShopGoods',()=>{ 
            this.$nextTick(()=>{ 
              //数据更新后,界面更新时创建
              new BScroll('.glist',{ 
                    scrollY: true,
                    click: true
              });
              let fscroll=new BScroll('.flist',{ 
                    scrollY: true,
                    probeType:3
                });
    
              //右侧列表绑定滚动监听
              fscroll.on('scroll',(point)=>{ 
                  console.log(point.x+'---'+point.y);
                  this.scrollY=point.y;  //收集实时滚动y值,与top值比较,触发对应的操作
              })
    
    
            })
          });
        },
        computed:{ 
          ...mapState(['goods'])
        }
      }
    </script>
    
    <style lang='less'>
      .on{ 
        background-color: white;
        color: #33CD41;
      }
      .goods{ 
        display: flex;
        overflow: hidden;
        .glist{ 
          width: 25%;
          height: 400px;
          background-color: #F3F5F7;
          overflow: auto;
          >.gul>.gli{ 
            height: 50px;
            line-height: 50px;
            display: flex;
            justify-content: center;
            align-items: center;
          }
          >.gul>.gli>img{ 
            width: 15px;
            height: 15px;
          }
        }
        .flist{ 
          width: 75%;
          height: 400px;
          overflow: auto;
          .ful>.fli{ 
            display: flex;
            padding:10px 0;
            border-bottom: solid 1px #eee;
          }
          .ful>.fname{ 
            background-color: #eee;
            color:#A9ADB0;
            padding-left: 10px;
            font-size: 12px;
            height: 20px;
            line-height: 20px;
          }
          .ful>.fli>.fimg{ 
            height: 88px;
          }
          .ful>.fli>.fimg>img{ 
            width: 50px;
            height: 50px;
            /* vertical-align: middle; */
            padding: 3px 10px;
          }
          .ful>.fli>.finfo{ 
            display: flex;
            flex-direction: column;
            justify-content:space-between;
            p:nth-child(2){ 
              color:#ccc;
              font-size: 12px;
            }
            p:nth-child(3){ 
              color:#ccc;
              font-size: 12px;
            }
            p:nth-child(4){ 
              color:red
            }
          }
          .ful>.fli>.finfo>.fcir{ 
            width: 100%;
            transform: translateX(150px);
            margin-top: -20px;
          }
          .ful>.fli>.finfo>.fcir>div{ 
            height: 30px;
            width: 30px;
            border-radius: 30px;
            background-color: green;
            text-align: center;
            line-height: 30px;
            font-size: 30px;
            color: white;
          }
        }
      }
    </style>