1,首先 需要使用到 scroll-view 组件 左右2边 都需要滑动 直接上代码
scroll-into-view 值应为某子元素id(id不能以数字开头)。设置哪个方向可滚动,则在哪个方向滚动到该元素 id="scroll-{{index}}" 这个必须要有 不然实现不了左边联动右边的效果
{{item.name}}
{{item.name}}
{{items}}
2,本地data模拟json数据 渲染页面
左边点击事件 tabNav 控制点击那一个 改变该背景颜色 右边就滑动到该类别
右边滑动事件 scrollLink 实现滑动 到那一个类别 左边跟着一起变化 背景也是一样变化
详细 注释看代码
Page({
/**
* 页面的初始数据
*/
data: {
list: [{
name: '肉末豆腐',
list: [
'酱油10 克、细盐3 克、味精3 克',
'将豆腐切成2厘米见方块,放入沸水锅内,加少许细盐,煮沸待用。',
'将锅烧热,加猪油,投肉末下锅,加姜末、黄酒',
'营养价值: 豆腐作为食药兼备的食品,具有益气、补虚等多方面的功能',
'在买猪肉时,拔一根或数根猪毛,仔细看其毛根,如果毛根发红,则是病猪;'
]
}, {
name: '秘制风味鸡扒',
list: [
'首先将鸡腿洗净,去骨,然后将用料表里提到的配料全部放进去,拌匀,进行腌制。',
' 热锅下油,将腌制好的鸡扒放入锅中进行煎制。',
'中火煎至两面金黄且熟透即可。',
'最后撒上黑胡椒粉【风味鸡扒】就完成了~'
]
},
{
name: '烧花鸭',
list: [
'鸭子一只,经宰杀后切块,放开水冲',
'锅放中火上,加油放姜之味去来,放花椒,在放鸭肉,',
'爆炒大概5分钟,加老抽,水,盐,冰糖盖住鸭肉的水',
'烧花鸭是一道色香味俱全的地方名菜,属于河北菜。锅放中火上',
'加油放姜来去味,放花椒,在放鸭肉,爆炒大概5分钟,'
]
},
{
name: '清蒸八宝猪',
list: [
'肥瘦相间的鲜猪肉2000克',
'大米粉500克,料酒50克,精盐50克,姜30克,豆腐乳5块,鲜荷叶1张',
'将猪肉洗净,切成长方块状备用。',
'取米粉与配料搅拌均匀,将切好的猪肉与米粉配料混合拌匀,置于铺开的荷叶之上。',
'将盛有粉肉的荷叶放在蒸笼里,并加入老生姜、莲子、马蹄、红枣、鸡精粉, 肉面再盖上荷叶清蒸',
'肉质细嫩,入口清爽宜人。',
'一般人都可食用;湿热痰滞内蕴者慎服;肥胖、血脂较高者不宜多食。'
]
},
{
name: '红烧肘子',
list: [
'去掉猪肘子上的毛洗净。烧开半锅水加入3汤匙料酒和姜片',
'将猪肘子放入大碗里,倒入1汤匙白糖、3汤匙酱油',
'把腌好的猪肘子放入微波炉内高火加热5分钟后,放入'
]
}, {
name: '秘制风味鸡扒',
list: [
'首先将鸡腿洗净,去骨,然后将用料表里提到的配料全部放进去,拌匀,进行腌制。',
' 热锅下油,将腌制好的鸡扒放入锅中进行煎制。',
'中火煎至两面金黄且熟透即可。',
'最后撒上黑胡椒粉【风味鸡扒】就完成了~'
]
},
{
name: '烧花鸭',
list: [
'鸭子一只,经宰杀后切块,放开水冲',
'锅放中火上,加油放姜之味去来,放花椒,在放鸭肉,',
'爆炒大概5分钟,加老抽,水,盐,冰糖盖住鸭肉的水',
'烧花鸭是一道色香味俱全的地方名菜,属于河北菜。锅放中火上',
'加油放姜来去味,放花椒,在放鸭肉,爆炒大概5分钟,'
]
},
{
name: '秘制风味鸡扒',
list: [
'首先将鸡腿洗净,去骨,然后将用料表里提到的配料全部放进去,拌匀,进行腌制。',
' 热锅下油,将腌制好的鸡扒放入锅中进行煎制。',
'中火煎至两面金黄且熟透即可。',
'最后撒上黑胡椒粉【风味鸡扒】就完成了~'
]
},
{
name: '烧花鸭',
list: [
'鸭子一只,经宰杀后切块,放开水冲',
'锅放中火上,加油放姜之味去来,放花椒,在放鸭肉,',
'爆炒大概5分钟,加老抽,水,盐,冰糖盖住鸭肉的水',
'烧花鸭是一道色香味俱全的地方名菜,属于河北菜。锅放中火上',
'加油放姜来去味,放花椒,在放鸭肉,爆炒大概5分钟,'
]
},
],
scrollTops: 0, // 左边要滚动的高度
tabCur: 0, // 当前项
rightCur: 0, // 用于实现左边联动右边
},
// 切换左边菜单并联动右边
tabNav(e) {
let index = e.currentTarget.dataset.index;
// console.log(index);
this.setData({
tabCur: index,
rightCur: index,
// 实现左边自动滑动到某个位置 4表示自动滑动到 第五项 (4为索引值)
scrollTops: (index - 4) * 50
})
},
/**
* 滑动右边对应左边菜单切换
* 1、拿到该元素的高度,设定它的top和bottom
* 2、判断滑动的距离是否大于 设定的top并小于设定的bottom,然后对应左边菜单的滑动
*/
scrollLink(e) {
// console.log(e);
let list = this.data.list
let itemHeight = 0;
for (let i = 0; i < list.length; i++) {
//拿到每个元素
let els = wx.createSelectorQuery().select("#scroll-" + i);
// console.log(els);
els.fields({
size: true
}, function (res) {
list[i].top = itemHeight; // 节点顶部位置
itemHeight += res.height;// 节点高度
list[i].bottom = itemHeight;//节点底部位置
}).exec()
}
this.setData({
list:list
})
let scrollTop = e.detail.scrollTop; // 拿到滚动的高度
for (let i = 0; i < list.length; i++) {
console.log(list[i]);
if (scrollTop > list[i].top && scrollTop < list[i].bottom) {
this.setData({
tabCur: i,
scrollTops: (i - 4) * 50
})
return false
}
}
}
})
3,css样式
.link {
width: 100%;
height: 100%;
display: flex;
}
.left {
width: 220rpx;
/* 这里的高度可以写也可以不写,效果还是可以实现的,不过最好还是写上吧 */
height: 100vh;
background-color: rgb(229, 243, 243);
text-align: center;
color: #333;
}
.left .item {
width: 150rpx;
/* line-height: 50px; */
height: 100rpx;
font-size: 34rpx;
}
.active {
background-color: tomato;
color: #fff;
}
.right {
height: 100vh;
background-color: #f8f8f8;
padding: 0 30rpx;
}
.right-cont {
padding-bottom: 30rpx;
border-bottom: 1rpx solid #ccc;
border: 1rpx solid gold;
}
.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;
}