微信小程序點單左右聯(lián)動的效果實現(xiàn)

原理解析：
??點擊左邊標(biāo)簽會跳到右邊相應(yīng)位置：點擊改變rightCur值，轉(zhuǎn)跳相應(yīng)位置滑動右邊，左邊標(biāo)簽會跳到相應(yīng)的位置：監(jiān)聽并且設(shè)置每個右邊元素的top和bottom，再判斷當(dāng)前滑動高度在那個元素之間，再改變左邊的標(biāo)簽的tabCur，并且轉(zhuǎn)跳相應(yīng)位置

linkageLeftRight.wxml文件

右邊列表循環(huán)的那一項必須要加上 id=“scroll-{{index}}” ，少了這個是無法實現(xiàn)左邊聯(lián)動右邊的效果的文章來源地址http://www.zghlxwxcb.cn/news/detail-738288.html

<!-- 實現(xiàn)左右聯(lián)動效果 -->
<view class="link">
  <!-- 左邊 -->
  <scroll-view class="left" scroll-y scroll-with-animation scroll-top="{{scrollTops}}">
    <view class="item {{tabCur===index?'active':''}}" wx:for="{{list}}" wx:key="index" data-index="{{index}}" bindtap="tabNav">
      {{item.name}}
    </view>
  </scroll-view>
  <!-- 右邊 -->
  <scroll-view class="right" scroll-y scroll-with-animation scroll-into-view="scroll-{{rightCur}}" bindscroll="scrollLink">
    <!-- 重點： id="scroll-{{index}}"  這個必須要有 不然實現(xiàn)不了左邊聯(lián)動右邊的效果 -->
    <view wx:for="{{list}}" wx:key="index" class="right-cont" id="scroll-{{index}}">
      <view class="title">{{item.name}}</view>
      <view class="content">
        <view class="list-item" wx:for="{{item.list}}" wx:key="index" wx:for-index="indexs" wx:for-item="items">
          {{items}}
        </view>
      </view>
    </view>
  </scroll-view>
</view>

linkageLeftRight.wxss文件

.link {
  width: 100%;
  height: 100%;
  display: flex;
}

.left {
  width: 220rpx;
  /* 這里的高度可以寫也可以不寫，效果還是可以實現(xiàn)的，不過最好還是寫上吧 */
  height: 100vh;
  background-color: rgb(229, 243, 243);
  text-align: center;
  color: #333;
}

.left .item {
  line-height: 50px;
  font-size: 34rpx;
}

.active {
  background-color: tomato;
  color: #fff;
}

.right {
  /* 這里的高度可寫也可不寫，效果還是可以實現(xiàn)的，不過最好還是寫上吧 */
  height: 100vh;
  background-color: #f8f8f8;
  padding: 0 30rpx;
}

.right-cont {
  padding-bottom: 30rpx;
  border-bottom: 1rpx solid #ccc;
}

.title {
  text-align: center;
  font-size: 36rpx;
  color: #333;
  padding-top: 60rpx;
  padding-bottom: 20rpx;
}

.content {
  padding: 0 5rpx 0 20rpx;
}

.list-item{
  font-size: 32rpx;
  color: #333;
  line-height: 50rpx;
}

linkageLeftRight.js文件

import category from '../../public/json/category.js'

Page({

  /**
   * 頁面的初始數(shù)據(jù)
   */
  data: {
    list: category,
    scrollTops: 0, // 要滾動的高度
    tabCur: 0, // 左邊當(dāng)前項
    rightCur: 0, // 用于實現(xiàn)左邊聯(lián)動右邊
  },
  // 切換左邊菜單并聯(lián)動右邊
  tabNav(e) {
    let index = e.currentTarget.dataset.index;
    this.setData({
      tabCur: index,
      rightCur: index,
      // 實現(xiàn)左邊自動滑動到某個位置 4表示自動滑動到 第五項 （4為索引值）
      scrollTops: (index - 4) * 50
    })
  },
  /**
   * 滑動右邊對應(yīng)左邊菜單切換
   * 1、拿到該元素的高度，設(shè)定它的top和bottom
   * 2、判斷滑動的距離是否大于 設(shè)定的top并小于設(shè)定的bottom，然后對應(yīng)左邊菜單的滑動
   */
  scrollLink(e) {
    let list = this.data.list
    let itemHeight = 0;
    for (let i = 0; i < list.length; i++) {
      //拿到每個左邊的元素 并且設(shè)置他們的上下高度 
      let els = wx.createSelectorQuery().select("#scroll-" + i);
      els.fields({
        size: true
      }, function (res) {
        list[i].top = itemHeight;
        // 設(shè)置每一個右邊元素在整個菜單的高度再加上元素本身的高度設(shè)置為bottom的高度
        itemHeight += res.height;
        list[i].bottom = itemHeight
      }).exec()
    }

    this.setData({
      list
    })

    // 拿到滾動的高度
    let scrollTop = e.detail.scrollTop;
    for (let i = 0; i < list.length; i++) {
      if (scrollTop > list[i].top && scrollTop < list[i].bottom) {
        // 判斷當(dāng)前的高度在那個右邊的某個元素之間 
        // 如果判斷在i元素之中，就改變左邊當(dāng)前項，并且轉(zhuǎn)跳左邊的位置
        this.setData({
          tabCur: i,
          scrollTops: (i - 4) * 50
        })
        return false
      }
    }
  }
})

category.js文件

const category = [{
  name: '梨花雪',
  list: [
    '時光年輪一圈圈轉(zhuǎn)著。',
    '現(xiàn)在，他站在原地，回首望去，從前點點滴滴，瑣瑣碎碎。',
    '猛然發(fā)現(xiàn)，自己已走過了這么多。',
    '他想，如果再次遇到下雪天，他會毫不猶豫迎上去，',
    '因為那里，有舊時光味道。他仍在懷念，仍在留戀。懷念，白雪紛揚日子。'
  ]
}, {
  name: '冰雪消融',
  list: [
    '友情是每個人都應(yīng)有的東西，而且相當(dāng)?shù)恼滟F，',
    '在朋友之間，難免會產(chǎn)生分歧，讓友情結(jié)冰，',
    '但我現(xiàn)在知道，友情上消融的冰雪是暖的。'
  ]
},
{
  name: '境由心造',
  list: [
    '有人安于某種生活，有人不能。',
    '因此能安于自已目前處境的不妨就如此生活下去，不能的只好努力另找出路。',
    '你無法斷言哪里才是成功的，也無法肯定當(dāng)自已到達(dá)了某一點之后，會不會快樂。',
    '有些人永遠(yuǎn)不會感到滿足，他的快樂只建立在不斷地追求與爭取的過程之中，',
    '因此，他的目標(biāo)不斷地向遠(yuǎn)處推移。這種人的快樂可能少，但成就可能大。'
  ]
},
{
  name: '處世之道',
  list: [
    '有一群豪豬，就是野豬啊，身上長刺的那種野豬，',
    '大家擠在一起過冬，它們老有一個困惑，',
    '就是不知道大家在一起以什么樣的距離最好，',
    '離得稍微遠(yuǎn)一點，冬天就冷，互相借不著熱氣，大家就往一起湊湊。',
    '結(jié)果一旦湊近了，彼此的刺都扎著對方了。',
    '就又開始遠(yuǎn)離。',
    '但是再遠(yuǎn)的話大家又覺得寒冷，',
    '又想借助別人的溫暖，就再湊，湊著湊著又受傷了，',
    '然后再拉遠(yuǎn)，多少次磨合以后豪豬們終于找到了一種最最恰如其分的距離，',
    '那就是在彼此不傷害的前提下，保持著群體的溫暖'
  ],
},
{
  name: '夏天',
  list: [
    '夏天的夜色很美，清爽的晚風(fēng)哼著小曲來到了我們身邊，',
    '給我們送來了一絲絲涼意。',
    '夜空中，星星眨著眼睛，靜靜地聽著月亮姐姐講故事。',
    '這動聽的故事，激發(fā)了星星們的想象，',
    '星星們都在竊竊私語地討論著，難道是在討論演講稿，到哪里發(fā)表演講嗎？',
    '周圍一片寧靜，只有晚風(fēng)在低低地吟唱，',
    '月光灑向永不停息的小河，灑向盛開在夜晚的流星花，仿佛一切都活了。',
    '螢火蟲提著小燈籠，殷勤地照看著花兒、草兒，讓他們快快長大、開花。'
  ]
}, {
  name: '風(fēng)箏',
  list: [
    '一只跌落在腳邊的風(fēng)箏把我拉回到現(xiàn)實。',
    '是啊！無論風(fēng)箏飛的多高、多遠(yuǎn)，但都離不開手中的絲線，',
    '最后還是要回到地面。人不也一樣嗎？',
    '長大了，成家了，但無論離開故鄉(xiāng)多遠(yuǎn)，離開親人多遠(yuǎn)，你的心還在故鄉(xiāng)，還在父母親人的身邊啊！'
  ]
}, {
  name: '春雨',
  list: ['我赤腳站到院中，踩在青石板上，',
    '任雨水在我臉上流淌，我不禁抬起頭望著那天空，',
    '努力的想要看清春雨的樣子，卻怎么也看不清，',
    '只聽得見耳邊的聲音，那么清晰那么讓人心情舒暢。',
    '這溫柔的春雨，帶來他最動聽的聲音，擊打著石臺，',
    '發(fā)出清脆的響聲，聲音透過雨簾，透進了我的心。'
  ]
}, {
  name: '擁有',
  list: [
    '擁有誠實，就舍棄了虛偽；',
    '擁有充實，就舍棄了無聊；擁有踏實，就舍棄了浮躁。',
    '不論是有意的丟棄，還是意外的失去，只要曾經(jīng)真實的擁有，在一些時候，大度的舍棄不也是一種境界嗎？',
    '在不經(jīng)意所失去的， 你還可以重新去爭取。 ',
    '丟掉了愛心， 你可以在春天里尋覓， 丟掉了意志， 你要在冬天重新磨礪。 ',
    '但是丟掉了懶惰， 你卻不能把它拾起。 ',
    '欲望太多， 反成了累贅， 還有什么比擁有淡泊的心胸， 更能讓自己充實、 滿足呢？ '
  ]
}, {
  name: "信任",
  list: [
    '信任一個人有時需要許多年的時間。',
    '因此，有些人甚至終其一生也沒有真正信任過任何一個人，',
    '倘若你只信任那些能夠討你歡心的人，那是毫無意義的；',
    '倘若你信任你所見到的每一個人，那你就是一個傻瓜；',
    '倘若你毫不猶疑、匆匆忙忙地去信任一個人，那你就可能也會那么快地被你所信任的那個人背棄；',
    '倘若你只是出于某種膚淺的需要去信任一個人，那么旋踵而來的可能就是惱人的猜忌和背叛；',
    '但倘若你遲遲不敢去信任一個值得你信任的人，那永遠(yuǎn)不能獲得愛的甘甜和人間的溫暖，你的一生也將會因此而黯淡無光。'
  ]
}, {
  name: '生命',
  list: [
    '應(yīng)當(dāng)承認(rèn)，生命就是希望。',
    '應(yīng)當(dāng)說，卑鄙和庸俗不該得意過早，不該誤認(rèn)為它們已經(jīng)成功地消滅了高尚和真純。',
    '偽裝也同樣不能持久，因為時間像一條長河在滔滔沖刷，',
    '卑鄙者、奸商和俗棍不可能永遠(yuǎn)戴著教育家、詩人和戰(zhàn)士的桂冠。',
    '在他們暢行無阻的生涯盡頭，他們的后人將長久地感到羞辱。'
  ]
}, {
  name: '閑情',
  list: [
    '終日休息著，睡和醒的時間界限，便分得不清。',
    '有時在中夜，覺得精神很圓滿。',
    '——聽得疾雷雜以疏雨，每次電光穿入，',
    '將窗臺上的金鐘花，輕淡清澈的映在窗簾上，又急速的隱抹了去。',
    '而余影極分明的，印在我的腦膜上。我看見“自然”的淡墨畫，這是第一次。'
  ]
}, {
  name: '背影',
  list: [
    '我與父親不相見已二年余了，我最不能忘記的是他的背影。',
    '那年冬天，祖母死了，父親的差使也交卸了，正是禍不單行的日子，',
    '我從北京到徐州，打算跟著父親奔喪回家。',
    '到徐州見著父親，看見滿院狼藉的東西，又想起祖母，不禁簌簌地流下眼淚。',
    '父親說，“事已如此，不必難過，好在天無絕人之路！”'
  ]
}, {
  name: '鄉(xiāng)愁',
  list: [
    '經(jīng)過多年的風(fēng)雨磨礪，我們突然意識到：',
    '那些曾在生命中撫慰過我們的精神驛站，',
    '那些曾溫暖和光明過我們的貧寒童年的火光，',
    '卻在不經(jīng)意間，漸漸地離我們遠(yuǎn)了，',
    '模糊了——譬如母親、譬如童年的老屋、隔壁家羊角辮搖搖擺擺的阿嬌一種難以驅(qū)遣的巨大空虛和孤寂襲來，',
    '淚水頓時涌上來。這時，我們患了一種蔓延了幾個世紀(jì)的病——鄉(xiāng)愁'
  ]
}, {
  name: '天池',
  list: [
    '從第一眼瞥見天池到和她告別，我一直沉默不語。',
    '我不愿用一點聲音，來彈破這寧靜。',
    '天池一日我的心情是寧靜的，這是我最珍愛的心境。',
    '山光湖色隨著日影的移動而變幻。',
    '午餐后，睡了一會兒，一陣?yán)錃庖u來，就像全身浴在冰山雪水之中。',
    '我悄悄起來，不愿驚醒別人，獨自走到廊上，',
    '再次仔細(xì)觀察天池：雪峰與杉林，白與黑相映，格外分明，',
    '雪山后涌起的白云給強烈陽光照得白銀一樣刺眼。'
  ]
}, {
  name: '秋天',
  list: [
    '秋姑娘又來到了果園里。',
    '果園里的果子成熟了，葡萄架上掛滿了一串串紫里透紅的大葡萄，',
    '它們相互掩映著自己的身體，太陽出來了，',
    '照射在葡萄上就像一顆顆透明的紫色寶石。',
    '桔樹上，一個個金黃色的桔子，讓人看了忍不住想咬一口。',
    '假如你剝開桔皮，你就可以看見一瓣瓣桔子就像一彎彎虧月時的月亮，晶瑩剔透。'
  ]
}, {
  name: '早晨',
  list: [
    '清晨的江邊，沒有車水馬龍的喧囂，',
    '沒有人聲鼎沸的吵雜，也沒有讓人深感壓抑的匆匆人群。',
    '清晨的江邊，有的只是垂柳的迎風(fēng)飄拂，',
    '有的只是枝頭小鳥的婉轉(zhuǎn)歌唱，',
    '有的只是江風(fēng)中蘊含著的淡淡的腥味。',
    '清晨的江邊，很靜，',
    '靜的可以撫平內(nèi)心的煩躁，',
    '清晨的江邊，很美，綠樹紅花、微風(fēng)拂面，不允許你攜帶任何憂傷。'
  ]
}, {
  name: '夏天',
  list: [
    '夏天是萬物生機勃勃的季節(jié)，百花爭奇斗艷，',
    '那么你知道都有哪些花是夏季開放的嗎？跟隨美文網(wǎng)小編一起來看看吧。',
    ' 描寫夏天植物的美文摘抄：荷花吟 微風(fēng)拂過平靜的湖面，給湖面留下片片',

  ]
}, {
  name: '欒樹',
  list: [
    '欒樹 十二月初，深圳，我在校園的青石板小路上撿到了欒樹的蒴果。',
    ' 欒樹蒴果看上去有種似曾相識的漂亮--三瓣又薄又脆的果皮圍攏成三棱形，',
    '前端小心翼翼地開著口'
  ]
}, {
  name: '荷塘',
  list: [
    '又是一年荷塘色 初夏早上六點，',
    '清亮透明的月兒還躲藏在云朵里，不忍離去，',
    '校園內(nèi)行人稀少，我騎著單車，晃晃悠悠的耷拉著星松的睡眼。',
    '校園內(nèi)景色如常，照樣是綠'
  ]
}
]

export default category;

到了這里，關(guān)于微信小程序點單左右聯(lián)動的效果實現(xiàn)的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！