介绍页面({
数据:{
select_index: 0,
scroll_height: 0,
左:[{
id: 1、
标题:& # 39;选项一& # 39;
},
{
id: 2
标题:& # 39;选项二& # 39;
},
{
id: 3,
标题:& # 39;选项三& # 39;
},
{
id: 4
标题:& # 39;选项四& # 39;
},
{
id: 5
标题:& # 39;选项五& # 39;
},
{
id: 6,
标题:& # 39;选项六& # 39;
},
{
id: 7,
标题:& # 39;选项七& # 39;
}
]，
右:[
{
id: 1、
标题:& # 39;选项一& # 39;,
内容:(
{
标题:“产品一“
},
{
标题:“产品二“;
},
{
标题:“产品三“;
},
{
标题:“产品四“;
},
]
},
{
id: 2
标题:& # 39;选项二& # 39;,
内容:(
{
标题:“产品一“
},
{
标题:“产品二“;
},
{
标题:“产品三“;
},
{
标题:“产品四“;
},
]
},
{
id: 3,
标题:& # 39;选项三& # 39;,
内容:(
{
标题:“产品一“
},
{
标题:“产品二“;
},
{
标题:“产品三“;
},
{
标题:“产品四“;
},
]
},
{
id: 4
标题:& # 39;选项四& # 39;,
内容:(
{
标题:“产品一“
},
{
标题:“产品二“;
},
{
标题:“产品三“;
},
{
标题:“产品四“;
},
]
},
{
id: 5
标题:& # 39;选项五& # 39;,
内容:(
{
标题:“产品一“
},
{
标题:“产品二“;
},
{
标题:“产品三“;
},
{
标题:“产品四“;
},
]
},
{
id: 6,
标题:& # 39;选项六& # 39;,
内容:(
{
标题:“产品一“
},
{
标题:“产品二“;
},
{
标题:“产品三“;
},
{
标题:“产品四“;
},
]
},
{
id: 7,
标题:& # 39;选项七& # 39;,
内容:(
{
标题:“产品一“
},
{
标题:“产品二“;
},
{
标题:“产品三“;
},
{
标题:“产品四“;
},
]
}
]
},//右边滚动视图滑动事件
滚动:函数(e) {
var h=e.detail.scrollTop
var scroll_height=0;
var select_index;
(var=0;我& lt;this.data.right.length;我+ +){
如果(scroll_height祝辞=h) {
select_index=我;
打破;
}
scroll_height +=this.data.right[我].content。长度* 64 + 48;
}
this.setData ({
select_index:我,
});
},//左边点击事件
left_tap:函数(e) {
var scroll_height=0;
(var=0;我& lt;e.target.dataset.index;我+ +){
scroll_height +=this.data.right[我].content。长度* 64 + 48;
}
console.log (scroll_height)
this.setData ({
scroll_height: scroll_height,
select_index: e.target.dataset.index,
});
}
}) & lt;视图类=& # 39;主要# 39;比;
& lt;视图类=& # 39;左# 39;比;
& lt;滚动视图scroll-y=皌rue"scroll-with-animation=皌rue"比;
& lt;块wx:=皗{左}},天气:对于指数=癷ndex"比;
& lt;视图类=& # 39;{{select_index==index& # 63;“active":““}} & # 39;材料指数=皗{指数}},bindtap=& # 39; left_tap& # 39;在{{item.title}} & lt;/view>
& lt;/block>
& lt;/scroll-view>
& lt;/view>
& lt;视图类=& # 39;对# 39;比;
& lt;滚动视图scroll-y=皌rue"scroll-top=皗{scroll_height}},bindscroll=皊croll"scroll-with-animation=皌rue"比;
& lt;块wx:=皗{右}}“比;
& lt;视图类=& # 39;块# 39;比;
& lt;视图风格=& # 39;背景:lightgrey; & # 39;在{{item.title}} & lt;/view>
& lt;视图类=& # 39;列表# 39;比;
& lt;块wx:=皗{item.content}}“比;
& lt; view> {{item.title}} & lt;/view>
& lt;/block>
& lt;/view>
& lt;/view>
& lt;/block>
& lt;/scroll-view>
& lt;/view>
& lt;/view>
小编这次要给大家分享的是微信小程序如何实现菜单左右联动,文章内容丰富,感兴趣的小伙伴可以来了解一下,希望大家阅读完这篇文章之后能够有所收获。
今天记录一个个人写的二级联动示例。
下面是效果图:
功能实现关键是使用控件滚动视图、下面直接上示例代码。
页面对应的js文件:
页面对应的wxml文件:
