微信小程序微信小程序scroll-view实现滚动到锚点左侧导航栏点餐功能实现滚动到锚点左侧导航栏点餐功能(点击种点击种
类类,滚动到锚点滚动到锚点)
主要介绍了微信小程序scroll-view左侧导航栏点餐功能实现，点击种类，滚动到锚点；滚动到锚点，种类选中,本文通过实例
代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
1.wxml代码：
<view class="page">
<import src="../../components/catering-item/catering-item.wxml" />
<!-- 左侧滚动栏 -->
<view class='under_line'></view>
<view class="body">
<view style='float: left' class='left'>
<scroll-view scroll-y scroll-with-animation scroll-left="{{scrollLength}}" class='scrollY' style='height: {{winHeight}}px'>
<view class='all clear'>
<block wx:key="tabs" wx:for="{{tabs}}">
<view bindtap='jumpIndex' data-menuindex='{{index}}'data-anchor='{{item.anchor}}'>
<view class="text-style {{indexId==index?' activeView':''}}">
<text class="{{indexId==index?'active1':''}}">{{item.title}}</text>
</view>
</view>
</block>
</view>
</scroll-view>
</view>
<view class="right" style='height: {{winHeight}}px'>
<scroll-view scroll-y scroll-with-animation scroll-left="{{scrollLength}}" bindscroll="scrollToLeft" scroll-into-view="{{toTitle}}" class='scrollRight' style='height: {{winHeight}}px'>
<block wx:key="tabs" wx:for="{{tabs}}">
<view id="view-{{item.anchor}}">
<view class="title" id="title-{{item.anchor}}">{{item.title}}</view>
<view class="orders" wx:for="{{tabsList[item.anchor]}}">
<template is="cateringItem" data="{{...item}}" />
</view>
</view>
</block>
</scroll-view>
</view>
</view>
</view>
2.wxss代码：
@import "../../components/catering-item/catering-item.wxss";
/* pages/catering.wxss */
.page {
display: flex;
flex-direction: column;
width: 100%;
资源评论
weixin_473114822022-11-06资源不错，很实用，内容全面，介绍详细，很好用，谢谢分享。
