微信小程序?qū)崿F(xiàn)菜單左右聯(lián)動

更新時(shí)間：2020年05月19日 10:57:55 作者：小書包大夢想

這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)菜單左右聯(lián)動，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了微信小程序?qū)崿F(xiàn)菜單左右聯(lián)動的具體代碼，供大家參考，具體內(nèi)容如下

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

下面是效果圖：

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

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

Page({
 data: {
 select_index:0,
 scroll_height:0,
 left: [{
 id: 1,
 title: '選項(xiàng)一'
 },
 {
 id: 2,
 title: '選項(xiàng)二'
 },
 {
 id: 3,
 title: '選項(xiàng)三'
 },
 {
 id: 4,
 title: '選項(xiàng)四'
 },
 {
 id: 5,
 title: '選項(xiàng)五'
 },
 {
 id: 6,
 title: '選項(xiàng)六'
 },
 {
 id: 7,
 title: '選項(xiàng)七'
 }
 ],
 right:[
 {
 id: 1,
 title: '選項(xiàng)一',
 content:[
  {
  title:"產(chǎn)品一"
  },
  {
  title: "產(chǎn)品二"
  },
  {
  title: "產(chǎn)品三"
  },
  {
  title: "產(chǎn)品四"
  },
 ]
 },
 {
 id: 2,
 title: '選項(xiàng)二',
 content: [
  {
  title: "產(chǎn)品一"
  },
  {
  title: "產(chǎn)品二"
  },
  {
  title: "產(chǎn)品三"
  },
  {
  title: "產(chǎn)品四"
  },
 ]
 },
 {
 id: 3,
 title: '選項(xiàng)三',
 content: [
  {
  title: "產(chǎn)品一"
  },
  {
  title: "產(chǎn)品二"
  },
  {
  title: "產(chǎn)品三"
  },
  {
  title: "產(chǎn)品四"
  },
 ]
 },
 {
 id: 4,
 title: '選項(xiàng)四',
 content: [
  {
  title: "產(chǎn)品一"
  },
  {
  title: "產(chǎn)品二"
  },
  {
  title: "產(chǎn)品三"
  },
  {
  title: "產(chǎn)品四"
  },
 ]
 },
 {
 id: 5,
 title: '選項(xiàng)五',
 content: [
  {
  title: "產(chǎn)品一"
  },
  {
  title: "產(chǎn)品二"
  },
  {
  title: "產(chǎn)品三"
  },
  {
  title: "產(chǎn)品四"
  },
 ]
 },
 {
 id: 6,
 title: '選項(xiàng)六',
 content: [
  {
  title: "產(chǎn)品一"
  },
  {
  title: "產(chǎn)品二"
  },
  {
  title: "產(chǎn)品三"
  },
  {
  title: "產(chǎn)品四"
  },
 ]
 },
 {
 id: 7,
 title: '選項(xiàng)七',
 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,
 });
 },
 
 //左邊點(diǎn)擊事件
 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,
 });
 }
})

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

<view class='main'>
 
 <view class='left'>
 <scroll-view scroll-y="true" scroll-with-animation="true">
 <block wx:for="{{left}}" wx:for-index="index">
 <view class='{{select_index==index?"active":""}}' data-index="{{index}}" bindtap='left_tap'>{{item.title}}</view>
 </block>
 </scroll-view>
 </view>
 
 <view class='right'>
 <scroll-view scroll-y="true" scroll-top="{{scroll_height}}" bindscroll="scroll" scroll-with-animation="true">
 <block wx:for="{{right}}">
 <view class='block'>
  <view style='background: lightgrey;'>{{item.title}}</view>
  <view class='list'>
  <block wx:for="{{item.content}}">
  <view>{{item.title}}</view>
  </block>
  </view>
 </view>
 </block>
 
 </scroll-view>
 </view>
 
</view>

注：純個(gè)人編寫，用于記錄

為大家推薦現(xiàn)在關(guān)注度比較高的微信小程序教程一篇：《微信小程序開發(fā)教程》小編為大家精心整理的，希望喜歡。

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: