小編這次要給大家分享的是微信小程序如何實現(xiàn)菜單左右聯(lián)動，文章內(nèi)容豐富，感興趣的小伙伴可以來了解一下，希望大家閱讀完這篇文章之后能夠有所收獲。

站在用戶的角度思考問題，與客戶深入溝通，找到北侖網(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)站推廣、域名注冊、虛擬主機(jī)、企業(yè)郵箱。業(yè)務(wù)覆蓋北侖地區(qū)。

今天記錄一個個人寫的二級聯(lián)動示例。

下面是效果圖：

功能實現(xiàn)關(guān)鍵是使用控件scroll-view，下面直接上示例代碼。

頁面對應(yīng)的js文件：

Page({
 data: {
 select_index:0,
 scroll_height:0,
 left: [{
 id: 1,
 title: '選項一'
 },
 {
 id: 2,
 title: '選項二'
 },
 {
 id: 3,
 title: '選項三'
 },
 {
 id: 4,
 title: '選項四'
 },
 {
 id: 5,
 title: '選項五'
 },
 {
 id: 6,
 title: '選項六'
 },
 {
 id: 7,
 title: '選項七'
 }
 ],
 right:[
 {
 id: 1,
 title: '選項一',
 content:[
  {
  title:"產(chǎn)品一"
  },
  {
  title: "產(chǎn)品二"
  },
  {
  title: "產(chǎn)品三"
  },
  {
  title: "產(chǎn)品四"
  },
 ]
 },
 {
 id: 2,
 title: '選項二',
 content: [
  {
  title: "產(chǎn)品一"
  },
  {
  title: "產(chǎn)品二"
  },
  {
  title: "產(chǎn)品三"
  },
  {
  title: "產(chǎn)品四"
  },
 ]
 },
 {
 id: 3,
 title: '選項三',
 content: [
  {
  title: "產(chǎn)品一"
  },
  {
  title: "產(chǎn)品二"
  },
  {
  title: "產(chǎn)品三"
  },
  {
  title: "產(chǎn)品四"
  },
 ]
 },
 {
 id: 4,
 title: '選項四',
 content: [
  {
  title: "產(chǎn)品一"
  },
  {
  title: "產(chǎn)品二"
  },
  {
  title: "產(chǎn)品三"
  },
  {
  title: "產(chǎn)品四"
  },
 ]
 },
 {
 id: 5,
 title: '選項五',
 content: [
  {
  title: "產(chǎn)品一"
  },
  {
  title: "產(chǎn)品二"
  },
  {
  title: "產(chǎn)品三"
  },
  {
  title: "產(chǎn)品四"
  },
 ]
 },
 {
 id: 6,
 title: '選項六',
 content: [
  {
  title: "產(chǎn)品一"
  },
  {
  title: "產(chǎn)品二"
  },
  {
  title: "產(chǎn)品三"
  },
  {
  title: "產(chǎn)品四"
  },
 ]
 },
 {
 id: 7,
 title: '選項七',
 content: [
  {
  title: "產(chǎn)品一"
  },
  {
  title: "產(chǎn)品二"
  },
  {
  title: "產(chǎn)品三"
  },
  {
  title: "產(chǎn)品四"
  },
 ]
 }
 ]
 },
 
 // 右邊scroll-view滑動事件
 scroll:function(e){
 var h = e.detail.scrollTop
 var scroll_height = 0;
 var select_index;
 for (var i = 0; i < this.data.right.length; i++) {
 if (scroll_height >= h){
 select_index = i;
 break;
 }
 scroll_height += this.data.right[i].content.length * 64 + 48;
 }
 this.setData({
 select_index: i,
 });
 },
 
 //左邊點擊事件
 left_tap:function(e){
 var scroll_height = 0;
 for (var i = 0; i < e.target.dataset.index;i++){
 scroll_height += this.data.right[i].content.length * 64 + 48;
 }
 console.log(scroll_height)
 this.setData({
 scroll_height: scroll_height,
 select_index: e.target.dataset.index,
 });
 }
})

當(dāng)前標(biāo)題：微信小程序如何實現(xiàn)菜單左右聯(lián)動-創(chuàng)新互聯(lián)
新聞來源：http://weahome.cn/article/dppcep.html