您好,登錄后才能下訂單哦!
這篇文章主要介紹vue.js2.0如何實現better-scroll的滾動效果,文中介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們一定要看完!
什么是 better-scroll
better-scroll 是一個移動端滾動的解決方案,它是基于 iscroll 的重寫,它和 iscroll 的主要區別在這里 。better-scroll 也很強大,不僅可以做普通的滾動列表,還可以做輪播圖、picker 等等。
<template> <div> <div class="goods"> <div class="menu-wrapper" ref="menuWrapper"> </div> <div class="food-wrapper" ref="foodWrapper"> </div> </div> </div> </template>
與1.0版本不同的是,我們使用的是ref
<script type="text/ecmascript-6"> import BScroll from "better-scroll"; export default { data(){ return { currentIndex:1, goods:[] } }, created(){ this.classMap=['decrease','discount','special','invoice','guarantee']; this.$http.get('/api/goods').then((response)=>{ response=response.body; if (response.errno===ERR_OK) { this.goods=response.data; } //dom結構加載結束(nextTick這個接口是計算dom相關的,要確保原生dom已經渲染了) this.$nextTick(()=>{ this._initScroll(); }); }); }, methods:{ _initScroll(){ // 使用better-scroll實現的關鍵代碼 this.menuScroll=new BScroll(this.$refs.menuWrapper,{click:true}); this.foodScroll=new BScroll(this.$refs.foodWrapper,{click:true}); } } }; </script>
很簡單這樣頁面就可以滾動了,如下圖
但是,這樣左右兩個頁面并沒有聯動起來,需要我們再定義一個方法來計算滾動的高度,以及在計算屬性中計算左側當前索引在哪里
從而定義左側邊欄的位置
computed:{ //用來計算左側當前索引在哪,從而定位到左側邊欄的位置 currentIndex(){ for (let i = 0; i < this.listHeight.length; i++) { var height1=this.listHeight[i] ; var height2=this.listHeight[i+1]; if(!height2||(this.scrollY >= height1 && this.scrollY < height2)){ return i; } } return 0; } }, methods:{ _initScroll(){ // 使用better-scroll實現的關鍵代碼 this.menuScroll=new BScroll(this.$refs.menuWrapper,{click:true}); this.foodScroll=new BScroll(this.$refs.foodWrapper,{ click: true, //探針作用,實時監測滾動位置 probeType: 3 }); this.foodScroll.on('scroll',(pos)=>{ this.scrollY=Math.abs(Math.round(pos.y)) }); }, _calculateHeight(){ let foodList=this.$refs.foodWrapper.getElementsByClassName('food-list-hook'); let height=0; this.listHeight.push(height); for (var i = 0; i < foodList.length; i++) { let item=foodList[i]; height+=item.clientHeight; this.listHeight.push(height); } } } //dom結構加載結束(nextTick這個接口是計算dom相關的,要確保原生dom已經渲染了) this.$nextTick(()=>{ this._initScroll(); this._calculateHeight(); });
在dom渲染后,也是需要計算高度的.
滑動右邊,實現左邊聯動已經實現了,接下來就是,點擊左邊的菜單,右邊的食物相應滾動到具體的位置
給左邊菜單綁定一個事件:@click="selectMenu(index,$event)"
/左邊的菜單項的點擊事件 selectMenu(index,event){ //自己默認派發事件時(BScroll),_constructed默認為true.但原生的瀏覽器并沒有這個屬性 if (!event._constructed) { return; } //運用BScroll滾動到相應位置 //運用index去找到對應的右側位置 let foodList=this.$refs.foodWrapper.getElementsByClassName('food-list-hook'); //滾動到相應的位置 let el=foodList[index]; //設置滾動時間 this.foodScroll.scrollToElement(el,2000); }
至此,整個聯動實現的,完整代碼如下
<template> <div> <div class="goods"> <div class="menu-wrapper" ref="menuWrapper"> <ul> <li v-for="(item,index) in goods" class="menu-item" :class="{'current':currentIndex===index}" @click="selectMenu(index,$event)"> <span class="text border-1px"> <span v-show="item.type>0" class="icon" :class="classMap[item.type]"></span>{{item.name}} </span> </li> </ul> </div> <div class="food-wrapper" ref="foodWrapper"> <ul> <li v-for="(item,index) in goods" class="food-list food-list-hook"> <h2 class="title">{{item.name}}</h2> <ul> <li v-for="food in item.foods" class="food-item border-1px"> <div class="icon"> <img :src="food.icon" width="57" height="57" alt=""> </div> <div class="content"> <h3 class="name">{{food.name}}</h3> <p class="desc">{{food.description}}</p> <div class="extra"> <span class="count">月售{{food.sellCount}}份</span> <span>好評率{{food.rating}}%</span> </div> <div class="price"> <span class="now">¥{{food.price}}</span><span class="old" v-show="food.oldPrice">¥{{food.oldPrice}}</span> </div> </div> </li> </ul> </li> </ul> </div> </div> </div> </template> <script type="text/ecmascript-6"> import BScroll from "better-scroll"; const ERR_OK=0; export default { props:{ seller:{ type:Object } }, data(){ return { goods:[], listHeight:[], scrollY:0 } }, created(){ this.classMap=['decrease','discount','special','invoice','guarantee']; this.$http.get('/api/goods').then((response)=>{ response=response.body; if (response.errno===ERR_OK) { this.goods=response.data; } //dom結構加載結束(nextTick這個接口是計算dom相關的,要確保原生dom已經渲染了) this.$nextTick(()=>{ this._initScroll(); this._calculateHeight(); }); }); }, computed:{ //用來計算左側當前索引在哪,從而定位到左側邊欄的位置 currentIndex(){ for (let i = 0; i < this.listHeight.length; i++) { var height1=this.listHeight[i] ; var height2=this.listHeight[i+1]; if(!height2||(this.scrollY >= height1 && this.scrollY < height2)){ return i; } } return 0; } }, methods:{ _initScroll(){ // 使用better-scroll實現的關鍵代碼 this.menuScroll=new BScroll(this.$refs.menuWrapper,{click:true}); this.foodScroll=new BScroll(this.$refs.foodWrapper,{ click: true, //探針作用,實時監測滾動位置 probeType: 3 }); this.foodScroll.on('scroll',(pos)=>{ this.scrollY=Math.abs(Math.round(pos.y)) }); }, _calculateHeight(){ let foodList=this.$refs.foodWrapper.getElementsByClassName('food-list-hook'); let height=0; this.listHeight.push(height); for (var i = 0; i < foodList.length; i++) { let item=foodList[i]; height+=item.clientHeight; this.listHeight.push(height); } }, //左邊的菜單項的點擊事件 selectMenu(index,event){ //自己默認派發事件時(BScroll),_constructed默認為true.但原生的瀏覽器并沒有這個屬性 if (!event._constructed) { return; } //運用BScroll滾動到相應位置 //運用index去找到對應的右側位置 let foodList=this.$refs.foodWrapper.getElementsByClassName('food-list-hook'); //滾動到相應的位置 let el=foodList[index]; //設置滾動時間 this.foodScroll.scrollToElement(el,2000); } } }; </script> <style lang="stylus" rel="stylesheet/stylus"> @import "../../common/stylus/mixin.styl"; .goods display:flex position:absolute top:174px bottom:46px width:100% overflow:hidden .menu-wrapper flex:0 0 80px width: 80px background:#f3f5f7 .menu-item display:table height:54px width:56px padding:0 12px line-height:14px &.current position:relative z-index:10 margin-top:-1px background:#fff font-weight:700 .text border-none() .icon display:inline-block vertical-align:top margin-right:2px width:12px height:12px background-size:12px 12px background-repeat:no-repeat &.decrease bg-image('decrease_3') &.discount bg-image('discount_3') &.guarantee bg-image('guarantee_3') &.invoice bg-image('invoice_3') &.special bg-image('special_3') .text display:table-cell vertical-align:middle width:56px border-1px(rgba(7,17,27,0.1)) font-size:12px .food-wrapper flex:1 .title padding-left:14px font-size:12px color:rgb(147,153,159) height:26px border-left:2px solid #d9dde1 line-height:26px background:#f3f5f7 .food-item display:flex margin:18px padding-bottom:18px border-1px(rgba(7,17,27,0.1)) &:last-child border-none() margin-bottom:0 .icon flex:0 0 57px margin-right:10px .content flex:1 .name margin:2px 0 8px 0 height:14px line-height:14px font-size:14px color:rgb(7,17,27) .desc,.extra line-height:10px font-size:10px color:rgb(147,153,159) .desc margin-bottom:8px line-height:12px .extra .count margin-right:12px .price font-weight:700 line-height:24px .now margin-right:8px font-size:14px color:rgb(240,20,20) .old text-decoration:line-through font-size:10px color:rgb(147,153,159) </style>
Vue是一套用于構建用戶界面的漸進式JavaScript框架,Vue與其它大型框架的區別是,使用Vue可以自底向上逐層應用,其核心庫只關注視圖層,方便與第三方庫和項目整合,且使用Vue可以采用單文件組件和Vue生態系統支持的庫開發復雜的單頁應用。
以上是“vue.js2.0如何實現better-scroll的滾動效果”這篇文章的所有內容,感謝各位的閱讀!希望分享的內容對大家有幫助,更多相關知識,歡迎關注億速云行業資訊頻道!
免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。