better-scroll x軸滾動事件
阿新 • • 發佈：2018-11-04
首先獲取 需要滾動的陣列資料
建一個關於滑動內容的template 類；設定 template 類中的對應div的ref（最外層例項化better-scroll，最裡面的寬度之和疊加成 中間div寬度）；
設定div樣式；
例項化物件（ps：本地資料可以直接在created中例項化；非同步載入資料需要在獲取資料渲染完畢再去例項化）
各步驟程式碼如下（ps：該程式碼純屬複製他人程式碼，如有侵權請聯絡）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <title>小熊正點</title> <script src="../3th/jquery-3.1.1.min.js"></script> <style> .tab { width: 100%;overflow: hidden; padding: 5px; } .tab_content { line-height: 1rem; display: flex; } .tab_item{ flex: 0 0 60px; width:60px; text-align: center; } </style> </head> <body><div id="app" v-cloak> <template> <div class="tab" ref="tab"> <ul class="tab_content" ref="tabWrapper"> <li class="tab_item" v-for="(item,index) in itemList" ref="tabitem" @click="change(index)"> {{item.title}} </li> </ul> </div> </template> </div> </body> <script src="../3th/vue.js"></script> <script src="../3th/better-scroll.js" ></script> <script> var Main = { data() { return{ itemList:[ { 'title':'關注' }, { 'title':'推薦' }, { 'title':'深圳' }, { 'title':'視訊' }, { 'title':'音樂' }, { 'title':'熱點' }, { 'title':'新時代' }, { 'title':'娛樂' }, { 'title':'頭條號' }, { 'title':'問答' }, { 'title':'圖片' }, { 'title':'科技' }, { 'title':'體育' }, { 'title':'財經' }, { 'title':'軍事' }, { 'title':'國際' } ] } }, created() { this.$nextTick(() => { this.InitTabScroll(); }); }, methods: { InitTabScroll() { let width = 0 debugger for (let i = 0; i < this.itemList.length; i++) { width += this.$refs.tabitem[0].getBoundingClientRect().width; //getBoundingClientRect() 返回元素的大小及其相對於視口的位置 } this.$refs.tabWrapper.style.width = width + 'px' this.$nextTick(() => { if (!this.scroll) { this.scroll = new BScroll(this.$refs.tab, { startX: 0, click: true, scrollX: true, scrollY: false, probeType:3, eventPassthrough: 'vertical' }); this.scroll.on('scroll',(pos)=>{ this.scrollY = Math.abs(Math.round(pos.y)); }); } else { this.scroll.refresh() } }); }, change(index){ let pointX = this.scroll.pointX; let width = $('body').width(); this.scroll.scrollTo(-300,0,300); if(width - pointX <60){ } } } } var Ctor = Vue.extend(Main) var app = new Ctor().$mount('#app') </script> </html>