使用better-scroll實現(xiàn)左右聯(lián)動的方法-創(chuàng)新互聯(lián)

創(chuàng)新互聯(lián)www.cdcxhl.cn八線動態(tài)BGP香港云服務(wù)器提供商，新人活動買多久送多久，劃算不套路！

站在用戶的角度思考問題，與客戶深入溝通，找到黃龍網(wǎng)站設(shè)計與黃龍網(wǎng)站推廣的解決方案，憑借多年的經(jīng)驗，讓設(shè)計與互聯(lián)網(wǎng)技術(shù)結(jié)合，創(chuàng)造個性化、用戶體驗好的作品，建站類型包括：做網(wǎng)站、成都網(wǎng)站建設(shè)、企業(yè)官網(wǎng)、英文網(wǎng)站、手機(jī)端網(wǎng)站、網(wǎng)站推廣、國際域名空間、雅安服務(wù)器托管、企業(yè)郵箱。業(yè)務(wù)覆蓋黃龍地區(qū)。

這篇文章主要介紹使用better-scroll實現(xiàn)左右聯(lián)動的方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們一定要看完！

一、首先需要在項目中引入better-scroll

1. 在package.json 直接寫入 "better-scroll":"^1.15.1"  版本以github上為準(zhǔn)（目前最新）

2.cpnm install  在node_modules  可以查看版本是否安裝

3.直接在你的組件里面寫入import BScroll from 'better-scroll';

二、better-scroll優(yōu)點

1.體驗像原生：滾動非常流暢，而且沒有滾動條。

2.滾動位置固定：在vue中通過路由切換頁面時組件會自動滾動到頂部，需要監(jiān)聽滾動行為才能讓滾動位置固定，better-scroll解決了這個問題。

三、下面是在項目中的使用

移動端很常見的效果，當(dāng)滑動右邊部分的時候，左邊會聯(lián)動顯示與當(dāng)前內(nèi)容相符合的標(biāo)題高亮，當(dāng)點擊左邊某一個標(biāo)題的時候，右邊會自動滑動到相應(yīng)的內(nèi)容。

項目如下圖：

實現(xiàn)及說明

1.滾動效果

better-scroll在使用的時候需要在dom元素渲染完成之后初始化better-scroll的實例，初始化的時候，先要獲取需要滑動的元素，然后在初始化的時候?qū)@取到的元素傳遞給初始化函數(shù)，此時便可實現(xiàn)滑動效果

2.左右聯(lián)動效果

左右聯(lián)動效果的實現(xiàn)，是better-scroll通過監(jiān)聽事件實現(xiàn)的。

首先獲取到右邊內(nèi)容盒子的高度，然后獲取到該盒子中每一項的高度并做前n項高度累加（第n項的高度是前n項的高度和）存儲到listHeight數(shù)組中。在初始化的時候傳遞屬性probeType=3 （探針的效果，時時獲取滾動高度），并給右邊的內(nèi)容盒子對象監(jiān)聽scroll事件，從而時時獲取Y軸位置，來與listHeight數(shù)組中的數(shù)據(jù)做比較，時時計算當(dāng)前的索引值，并給對邊對應(yīng)索引值的項添加背景色高亮，從而實現(xiàn)右邊滑動，聯(lián)動左邊。

當(dāng)點擊左邊的每一項的時候，獲取到當(dāng)前的索引值，并根據(jù)當(dāng)前的索引值獲取到與右邊內(nèi)容盒子中對應(yīng)索引的元素，右邊的盒子元素通過監(jiān)聽scrollToElement，并傳遞獲取到的對應(yīng)索引元素和動畫時間，從而實現(xiàn)點擊左邊，實現(xiàn)右邊聯(lián)動；

實現(xiàn)代碼如下：

<template>
 <section class="box">
 <div class="head">
 head
 </div>
 <div class="content">
 <div class="left" ref="left">
 <ul>
  <li v-for="(item, index) in left" :key="item" :class="{current: currentIndex == index}" @click="selectItem(index, $event)">
  <span class="left-item">{{item}}</span>
  </li>
 </ul>
 </div>
 <div class="right" ref="right">
 <ul>
  <li class="right-item right-item-hook" v-for="item in right" :key="item.name">
  <h3>{{item.name}}</h3>
  <ul>
  <li v-for="num in item.content" :key="num.name">
  <div>{{item.name+num}}</div>
  </li>
  </ul>
  </li>
 </ul>
 </div>
 </div>
 </section>
</template>
<script>
import BScroll from 'better-scroll'
export default {
 data () {
 return {
 left: ['a', 'b', 'c', 'd', 'e', 'f'],
 right: [
 {
  name: 'a',
  content: ['1', '2', '3', '4', '5']
 },
 {
  name: 'b',
  content: ['1', '2', '3', '4', '5']
 },
 {
  name: 'c',
  content: ['1', '2', '3', '4', '5']
 },
 {
  name: 'd',
  content: ['1', '2', '3', '4', '5']
 },
 {
  name: 'e',
  content: ['1', '2', '3', '4', '5']
 },
 {
  name: 'f',
  content: ['1', '2', '3', '4', '5']
 },
 ],
 listHeight: [],
 scrollY: 0, //實時獲取當(dāng)前y軸的高度
 clickEvent: false
 }
 },
 methods: {
 _initScroll () {
 //better-scroll的實現(xiàn)原理是監(jiān)聽了touchStart,touchend事件，所以阻止了默認(rèn)的事件（preventDefault）
 //所以在這里做點擊的話，需要在初始化的時候傳遞屬性click,派發(fā)一個點擊事件
 //在pc網(wǎng)頁瀏覽模式下，點擊事件是不會阻止的，所以可能會出現(xiàn)2次事件，所以為了避免2次，可以在綁定事件的時候把$event傳遞過去
 this.lefts = new BScroll(this.$refs.left, {
 click: true
 })
 this.rights = new BScroll(this.$refs.right, {
 probeType: 3 //探針的效果，實時獲取滾動高度
 })
 //rights這個對象監(jiān)聽事件，實時獲取位置pos.y
 this.rights.on('scroll', (pos) => {
 this.scrollY = Math.abs(Math.round(pos.y))
 })
 },
 _getHeight () {
 let rightItems = this.$refs.right.getElementsByClassName('right-item-hook')
 let height = 0
 this.listHeight.push(height)
 for(let i = 0; i < rightItems.length; i++){
 let item = rightItems[i]
 height += item.clientHeight
 this.listHeight.push(height)
 }
 },
 selectItem(index,event){
 this.clickEvent = true
 //在better-scroll的派發(fā)事件的event和普通瀏覽器的點擊事件event有個屬性區(qū)別_constructed
 //瀏覽器原生點擊事件沒有_constructed所以當(dāng)時瀏覽器監(jiān)聽到該屬性的時候return掉
 if(!event._constructed){
 return
 }else{
 let rightItems = this.$refs.right.getElementsByClassName('right-item-hook')
 let el = rightItems[index]
 this.rights.scrollToElement(el, 300)
 }
 }
 },
 mounted () {
 this.$nextTick(() => {
 this._initScroll()
 this._getHeight()
 })
 },
 computed: {
 currentIndex () {
 for(let i = 0; i < this.listHeight.length; i ++){
 let height = this.listHeight[i]
 let height2 = this.listHeight[i + 1]
 //當(dāng)height2不存在的時候，或者落在height和height2之間的時候，直接返回當(dāng)前索引
 //>=height，是因為一開始this.scrollY=0,height=0
 if(!height2 || (this.scrollY >= height && this.scrollY < height2)){
  return i
 }
 if(this.listHeight[this.listHeight.length - 1] - this.$refs.right.clientHeight <= this.scrollY){
  if(this.clickTrue){
  return this.currentNum
  }else{
  return (this.listHeight.length - 1)
  }
 }
 }
 //如果this.listHeight沒有的話，就返回0
 return 0
 }
 }
}
</script>
<style scoped>
.content{
 display: flex;
 position: absolute;
 top:100px;
 bottom:100px;
 width:100%;
 overflow: hidden;
 background: #eee;
}
.left{
 flex: 0 0 80px;
 width:80px;
 background-color: #f3f5f7;
}
 .left li{
 width: 100%;
 height: 100%;
 }
 .current{
 background-color: red;
 }
 .left-item{
 display: block;
 width:100%;
 height:100px;
 line-height: 50px;
 text-align: center;
 border-bottom:1px solid yellow;
 }
 .right{
 flex: 1;
 }
 .right-item li{
 width:100%;
 height:100px;
 line-height:100px;
 text-align: center;
 border-bottom: 1px solid yellow;
 }
 *{
 list-style: none;
 margin: 0;
 padding: 0;
 }
</style>

文章題目：使用better-scroll實現(xiàn)左右聯(lián)動的方法-創(chuàng)新互聯(lián)
標(biāo)題鏈接：http://bm7419.com/article8/gjoop.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供面包屑導(dǎo)航、網(wǎng)站策劃、電子商務(wù)、網(wǎng)站設(shè)計、手機(jī)網(wǎng)站建設(shè)、定制網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)