如何制作含方法/配料按钮的可滑动菜单？求推荐相关开发库

Web 前端场景 #

1. Swiper #

这是前端最常用的滑动组件库，完全能匹配你要的效果：

• 顶部的「方法」「配料」可通过Swiper的pagination自定义为按钮样式，绑定切换事件
• 下方内容区域作为Swiper的滑动容器，支持左右滑动切换
• 核心配置示例：

const swiper = new Swiper('.swiper-container', {
  pagination: {
    el: '.custom-pagination',
    clickable: true,
    renderBullet: function (index, className) {
      const titles = ['方法', '配料'];
      return `<button class="${className}">${titles[index]}</button>`;
    }
  },
  on: {
    slideChange: function () {
      document.querySelectorAll('.custom-pagination button').forEach((btn, idx) => {
        btn.classList.toggle('active', idx === this.activeIndex);
      });
    }
  }
});

• 优势：文档完善，自定义性强，支持响应式，原生适配触摸滑动

2. 轻量Tab切换库（如Tabulator） #

如果更侧重Tab切换与滑动的联动，这类轻量库更合适：

• 直接配置Tab项为「方法」「配料」，绑定对应内容面板
• 开启滑动切换功能，支持点击Tab或滑动内容区双向触发切换
• 体积小巧，适合不需要复杂动画的场景

移动端场景 #

1. React Native #

• 可以用react-native-swiper或官方ScrollView配合自定义Tab：
  • 顶部Tab用TouchableOpacity实现点击切换，监听ScrollView滚动位置同步Tab激活状态
  • 内容区开启horizontal属性实现横向滑动
• 也可选用react-native-tab-view，这是专门的Tab视图组件，滑动切换逻辑内置，配置简单

2. Flutter #

• 用TabBar+TabBarView组合直接实现：
  • TabBar设置「方法」「配料」两个Tab，可放在自定义容器或AppBar中
  • TabBarView作为内容滑动区域，绑定Tab控制器后，自动实现点击Tab与滑动内容的双向联动
  • 核心代码示例：

class RecipeTab extends StatefulWidget {
  @override
  _RecipeTabState createState() => _RecipeTabState();
}

class _RecipeTabState extends State<RecipeTab> with SingleTickerProviderStateMixin {
  late TabController _tabController;

  @override
  void initState() {
    super.initState();
    _tabController = TabController(length: 2, vsync: this);
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        TabBar(
          controller: _tabController,
          tabs: const [
            Tab(text: '方法'),
            Tab(text: '配料'),
          ],
        ),
        Expanded(
          child: TabBarView(
            controller: _tabController,
            children: const [
              Center(child: Text('方法内容')),
              Center(child: Text('配料内容')),
            ],
          ),
        ),
      ],
    );
  }
}

如果不想依赖第三方库，纯原生JS也能实现：监听内容区scroll事件同步顶部按钮状态，点击按钮时用scrollTo定位到对应内容区域，代码量不大且灵活度高。

内容的提问来源于stack exchange，提问作者Bilal Sabugar