使用better-scroll怎么實(shí)現(xiàn)菜單和內(nèi)容聯(lián)動(dòng)效果

這篇文章給大家介紹使用better-scroll怎么實(shí)現(xiàn)菜單和內(nèi)容聯(lián)動(dòng)效果，內(nèi)容非常詳細(xì)，感興趣的小伙伴們可以參考借鑒，希望對(duì)大家能有所幫助。

創(chuàng)新互聯(lián)公司于2013年開始，是專業(yè)互聯(lián)網(wǎng)技術(shù)服務(wù)公司，擁有項(xiàng)目成都網(wǎng)站設(shè)計(jì)、網(wǎng)站制作網(wǎng)站策劃，項(xiàng)目實(shí)施與項(xiàng)目整合能力。我們以讓每一個(gè)夢想脫穎而出為使命，1280元定南做網(wǎng)站,已為上家服務(wù),為定南各地企業(yè)和個(gè)人服務(wù),聯(lián)系電話:18982081108

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <link href="https://unpkg.com/element-ui/lib/theme-chalk/index.css" rel="stylesheet">
  <style>
    *{
      margin: 0;
      padding: 0;
      border: 0;
      outline: none;
      font-family: Arial;
      list-style: none;
      -webkit-font-smoothing: antialiased;
    }
    html, body, #app{
      height: 100%;
    }
    #app{
      padding: 20px 0;
      box-sizing: border-box;
    }
    .wrapper{
      display: flex;
      height: 100%;
      overflow: hidden;
      max-width: 1200px;
      margin: 0 auto;
    }
    .menu{
      width: 100px;
      height: 100%;
      padding-right: 20px;
    }
    .content{
      flex: 1;
      height: 100%;
      overflow: hidden;
      position: relative;
    }
    .menu-item{
      margin-bottom: 10px;
    }
    .menu-item-content{
      width: 100%;
      padding: 7px 0;
      text-align: center;
      border: 1px solid #ddd;
      border-radius: 2px;
      color: #333;
      cursor: pointer;
    }
    .active{
      border-color: #409EFF;
      background: #409EFF;
      color: #fff;
    }
    .content-item{
      margin-bottom: 20px;
    }
    .content-item-text{
      border-radius: 2px;
      border: 1px solid #ddd;
    }
    .content-item-text>img{
      width: 100%;
      vertical-align: middle;
    }
  </style>
</head>
<body>
    <div id="app">
      <div class="wrapper">
        <div class="menu">
          <ul>
            <li class="menu-item" v-for="(item, index) in menu" :key="index" @click="handleClick(index)">
              <div class="menu-item-content" :class="{'active': getCurrentIndex() == index}" v-text="item.label"></div>
            </li>
          </ul>
        </div>
        <div class="content" ref="content">
          <ul>
            <li class="content-item" v-for="(item, index) in content" :key="index">
              <div class="content-item-text">
                <img :src="item" alt="">
              </div>
            </li>
          </ul>
        </div>
      </div>
    </div>
  <script src="https://cdn.jsdelivr.net/npm/better-scroll"></script>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script src="https://unpkg.com/element-ui/lib/index.js"></script>
  <script>
    new Vue({
      el: '#app',
      data: {
        contentScroll: null,
        listHeight: [], // 用來存儲(chǔ)每一個(gè)子盒子的高度
        currentIndex: 0,
        scrollY: 0,
        menu: [
          {
            label: '圖片一',
            id: 0,
          },
          {
            label: '圖片二',
            id: 1,
          },
          {
            label: '圖片三',
            id: 2,
          },
          {
            label: '圖片四',
            id: 3,
          },
          {
            label: '圖片五',
            id: 4,
          },
        ],
        content: [
          'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1575539093143&di=d3d787658bd0b0f21d2459d90b3bd19b&imgtype=jpg&src=http%3A%2F%2Fimg4.imgtn.bdimg.com%2Fit%2Fu%3D1735688044%2C4235283864%26fm%3D214%26gp%3D0.jpg',
          'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1575539192878&di=f46b69a4c2db2ba2f07f0fe1cc7af952&imgtype=0&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201210%2F04%2F20121004231502_NrBQG.jpeg',
          'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1575539157019&di=122152eaee12d6ea019b2cec2b80e468&imgtype=0&src=http%3A%2F%2Fpic44.nipic.com%2F20140723%2F18505720_094503373000_2.jpg',
          'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1575539175569&di=d33d35a826cc700add7b7bd53f9282c0&imgtype=0&src=http%3A%2F%2Fpic37.nipic.com%2F20140103%2F10616010_215644481373_2.jpg',
          'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1575539212191&di=ec438ea6559d06cc1a49a27b122e8edf&imgtype=0&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fblog%2F201312%2F09%2F20131209151602_evtcw.jpeg',
        ]
      },
      methods: {
        initScroll() {
          const content = this.$refs.content;
          this.contentScroll = new BScroll(content, {
            click: true, // 因?yàn)閎etterscroll默認(rèn)會(huì)阻止點(diǎn)擊事件。這里要設(shè)置一下
            mouseWheel: true, // 鼠標(biāo)滾輪滾動(dòng)
            probeType: 3,
            scrollY: true,
            scrollbar: {
              fade: true, // 是否顯示滾動(dòng)條
              interactive: false, // 1.8.0 新增
            },
            preventDefault: false, // 阻止了瀏覽器默認(rèn)選中行為
          });
          // 獲取滾動(dòng)的值，賦值給scrollY
          this.contentScroll.on('scroll', pos => {
            this.scrollY = Math.abs(Math.round(pos.y));
          });
        },
        getCurrentIndex() {
          for (let i = 0; i < this.listHeight.length; i++) {
            const height = this.listHeight[i];
            const height1 = this.listHeight[i + 1];
            // 解決當(dāng)滾動(dòng)到最后時(shí)，內(nèi)容不足盒子高度時(shí)，菜單顯示問題。當(dāng)滾動(dòng)到最后，選中最后一個(gè)菜單
            // maxScrollY：最大縱向滾動(dòng)位置
            if (Math.abs(this.contentScroll.maxScrollY) === Math.abs(this.scrollY)) {
              return this.content.length - 1;
            }
            if (!height1 || (this.scrollY < height1 && this.scrollY >= height)) {
              return i;
            }
          }
        },
        handleClick(index) {
          const content = this.$refs.content;
          const contentList = content.getElementsByClassName('content-item');
          const el = contentList[index];
          // scrollToElement：滾動(dòng)到目標(biāo)元素
          this.contentScroll.scrollToElement(el, 300);
        },
        getHeightList() {
          this.listHeight = [];
          let height = 0;
          this.listHeight.push(height);
          const content = this.$refs.content;
          const contentList = content.getElementsByClassName('content-item');
          for (let i = 0; i < contentList.length; i++) {
            const item = contentList[i];
            height += item.clientHeight;
            this.listHeight.push(height);
          }
          this.initScroll();
        }
      },
      mounted() {
        this.$nextTick(function() {
          // 由于圖片太大，加載比較慢，造成還沒有完全加載完就初始化了，導(dǎo)致滾動(dòng)不了，所以這里加個(gè)定時(shí)器延遲下
          setTimeout(() => {
            this.getHeightList();
          }, 400);
        });
      },
    });
  </script>
</body>
</html>

關(guān)于使用better-scroll怎么實(shí)現(xiàn)菜單和內(nèi)容聯(lián)動(dòng)效果就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，可以學(xué)到更多知識(shí)。如果覺得文章不錯(cuò)，可以把它分享出去讓更多的人看到。

分享文章：使用better-scroll怎么實(shí)現(xiàn)菜單和內(nèi)容聯(lián)動(dòng)效果
網(wǎng)頁地址：http://www.jbt999.com/article28/pdpocp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供建站公司、動(dòng)態(tài)網(wǎng)站、品牌網(wǎng)站設(shè)計(jì)、企業(yè)建站、微信公眾號(hào)、品牌網(wǎng)站制作

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

猜你還喜歡下面的內(nèi)容