【小程序】小程序如何实现滑动翻页（类似刷短视频的交互效果）

feelang

已于 2023-06-27 16:34:14 修改

阅读量4.2k

点赞数 4

CC 4.0 BY-SA版权

分类专栏：小程序文章标签：小程序

于 2023-06-27 13:25:31 首次发布

本文链接：https://blog.youkuaiyun.com/FeeLang/article/details/131414880

该文详细介绍了如何在微信小程序中使用swiper组件和数据绑定实现上下滑动切换页面的效果，包括数据准备、wxml布局、CSS样式和JS交互代码的编写，提供了一个简单的示例来帮助开发者快速掌握这一功能。

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

在微信小程序中实现上下滑动翻页的效果其实非常简单，可以说一学就会。

这篇文章将非常详细地教大家如何实现这一交互：

数据准备

首先我们在 Page 的 data 属性中添加两个变量：

data: {
   
   
    biases: [
      {
   
   
        "title": "Fundenmental Attribution Error",
        "desc": "We judge others on their personality or fundamental character, but we judge ourselves on the situation.",
        "ext": "Sally is late to class; she's lazy. You're late to class; it was a bad morning.",
        "illustration": "biases/fundamental-attribution-error.jpg",
      },
      {
   
   
        "title": "Self-Serving Bias",
        "desc": "Our failures are situational, but our successes are our responsibility.",
        "ext": "You won that award due to hard work rather than help or luck. Meanwhile, you failed a test because you hadn't gotten enough sleep.",
        "illustration": "biases/self-serving-bias.jpg",
      },

      // ...
    ],
  index: -1,
}

其中 biases 是个数组，我们要实现的效果就是每次展示 biases 的一个元素，上划切换到上一个元素，下划切换到下一个元素。

index 变量则用来表示当前元素的数组下标。

布局文件

数据准备完成之后，我们先来定义 wxml 文件：

<view class="page">
  <swiper wx:if="{
    
    {index >= 0}}" 
          class="swiper" 
          vertical<

最低0.47元/天解锁文章

200万优质内容无限畅学