better-scroll使用總結

參考：https://zhuanlan.zhihu.com/p/27407024

 

better-scroll使用小結

核心就是這4個

 1 <script>
 2 import BScroll from 'better-scroll'
 3 const ERR_OK=0;
 4 export default{
 5     props:['seller'],
 6     data(){
 7         return{
 8             goods:[],
 9             listHeight:[],
10             scrollY: 0
11         }
12     },
13     created(){
14         this.classMap = ['decrease', 'discount', 'special', 'invoice', 'guarantee'];
15         var _this=this;
16         this.$axios.get('/apis/goods').then(function(res){
17             var res=res.data;
18             if(res.errno===ERR_OK){
19                 _this.goods=res.data;
20                 console.log(_this.goods);
21                 /*Vue實現響應式並非數據發生變化以後DOM當即變化，而是按必定的策略進行DOM的更新*/
22                 /*$nextTick是在下次DOM更新循環結束以後執行延遲迴調，在修改數據以後使用 $nextTick，則能夠在回調中獲取更新後的 DOM*/
23                 _this.$nextTick(() => {
24           _this._initScroll();
25           _this._calculateHeight();
26         });
27             }
28         })
29     },
30     computed:{
31         currentIndex(){
32             for(let i=0;i<this.listHeight.length;i++){
33                 let height1=this.listHeight[i];
34                 let height2=this.listHeight[i+1];
35                 if(!height2 || (this.scrollY>=height1 && this.scrollY<height2)){
36                     //
37                     this._followScroll(i);
38                     return i;
39                 }
40             }
41             return 0;
42         }
43     },
44     methods:{
45         selectMenu(index,event){
46             /*爲了兼容PC*/
47             if (!event._constructed) {
48         return;
49       }
50       /**/
51             let foodList=this.$refs.foodList;
52             let el=foodList[index];
53             this.foodsScroll.scrollToElement(el,300);
54         },
55         _initScroll(){
56             this.menuScroll = new BScroll(this.$refs.menuWrapper,{
57                 click:true
58             })
59 
60             this.foodsScroll = new BScroll(this.$refs.foodsWrapper,{
61                 click:true,
62                 probeType:3
63             });
64             /*是否派發滾動事件*/
65             this.foodsScroll.on('scroll',(pos)=>{
66                 //Math.abs//取正數
67                 this.scrollY=Math.abs(Math.round(pos.y));
68             })
69             /*probeType類型：Number
70         默認值：0
71         可選值：一、二、3
72         做用：有時候咱們須要知道滾動的位置。當 probeType 爲 1 的時候，會非實時（屏幕滑動超過必定時間後）派發scroll 事件；當 probeType 爲 2 的時候，
　　　　　　會在屏幕滑動的過程當中實時的派發 scroll 事件；當 probeType 爲 3 的時候，不只在屏幕滑動的過程當中，
　　　　　　並且在 momentum 滾動動畫運行過程當中實時派發 scroll 事件。若是沒有設置該值，其默認值爲 0，即不派發 scroll 事件。*/
73         },
74         _calculateHeight(){
75             let foodList=this.$refs.foodList;
76             let height=0;
77             this.listHeight.push(height);
78             for(let i=0;i<foodList.length;i++){
79                 let item = foodList[i];
80           height += item.clientHeight;
81           this.listHeight.push(height);
82             }
83             
84         },
85         _followScroll(index){
86             let menuList=this.$refs.menuList;
87             let el=menuList[index];
88             this.menuScroll.scrollToElement(el,300);
89         }
90     }
91 }
92 </script>