微信小程序滑动菜单（swiper）

最新推荐文章于 2025-07-08 11:27:21 发布

BadGuy..

最新推荐文章于 2025-07-08 11:27:21 发布

阅读量4.1k

点赞数 2

CC 4.0 BY-SA版权

分类专栏：微信小程序文章标签：小程序 mpvue vue swiper 滑动菜单

本文链接：https://blog.youkuaiyun.com/qq_41595212/article/details/90444445

本文介绍如何利用mpvue框架，基于vue语法在微信小程序中创建滑动菜单。通过确定每页数据量、数据截取和渲染三个步骤，详细讲解了滑动菜单的实现过程，并提供了代码示例。对于不熟悉的部分，作者建议查阅小程序官方文档中关于swiper组件的内容。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在这里插入图片描述
今天教大家写一下滑动菜单
我这里使用的mpvue的写法，基于vue语法开发的小程序框架。

明确思路
1 确定每页所需的数据这里是10条
2 进行数据截取
3 进行渲染
下面给大家分享下代码有不明白的可以私信我

1 数据
注意：我是用mpvue 所以数据直接放在了
data(){
return{
}
} 里

type: [
        {
          id: 0,
          name: '餐饮'
        },
        {
          id: 1,
          name: '零食烟酒'
        },
        {
          id: 2,
          name: '购物'
        },
        {
          id: 3,
          name: '住房'
        },
        {
          id: 4,
          name: '交通'
        },
        {
          id: 5,
          name: '娱乐'
        },
        {
          id: 6,
          name: '汽车'
        },
        {
          id: 7,
          name: '通讯'
        },
        {
          id: 8,
          name: '育儿'
        },
        {
          id: 9,
          name: '人情'
        },
        {
          id: 10,
          na