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

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

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

数据准备

首先我们在 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="true" duration="300"           bindchange="swiperChange" current="{{index}}">    <swiper-item class="swiper-item"           wx:for="{{list}}" wx:key="index" wx:for-item="bias">      <view class="article">        <view class="article__title">          <text>{{bias.title}}text>        view>        <text class="article__subtitle" wx:if="{{!!bias.alias}}">({{bias.alias}})text>        <view class=" article__body">          <text>{{bias.desc}}text>        view>        <view class="article__illustration">          <image class="lazy" data-src="../../images/{{bias.illustration}}" mode="aspectFit" />        view>        <view class="article__caption">          <text>{{bias.ext}}text>        view>      view>    swiper-item>  swiper>view>

结构非常简单：

-     -         - 

CSS 样式代码

我们来逐一分析下每个 css 类的用法。

首先是根元素的 CSS 类 .page：

.page {  height: 100%;}

然后是 的类 swiper：

.swiper {  height: 100vh;  width: 100vw;  position: fixed;  top: 0;  left: 0;  overflow: hidden;  transform: translate3d(0, 0, 0);}

以上 CSS 代码让 元素填充整个视口并保持固定位置，让我们逐行解释每个部分的含义：

对 CSS 不熟悉的读者，可以参考我写的 CSS 全系列教程。

再来看 .swiper-item：

.swiper-item {  height: 100vh;  background-color: white;  display: flex;  align-items: flex-start;  justify-content: center;}

也就是说，swiper-item 的高度将填满 swiper，背景色是 white，其子元素的布局为 flex。

JS 交互代码

CSS 分析完了，我们再看来每个元素的 JS 代码：

首先是 swiper：

<swiper wx:if="{{index >= 0}}"         class="swiper"         vertical="true" duration="300"         bindchange="swiperChange" current="{{index}}">

其中 swiperChange 用于监听滑动事件：

swiperChange(e) {  const index = e.detail.current  this.setData({    index,  })  wx.setNavigationBarTitle({    title: `No.${index + 1}`,  })},

以上代码可以看出，通过 e.detail.current 可以获取当前元素下标。

最后来看子元素 swiper-item：

<swiper-item class="swiper-item"              wx:for="{{list}}" wx:key="index" wx:for-item="bias">

代码含义：为每个 list 的元素创建一个 swiper-item。

以上就是在微信小程序中实现上下滑动翻页的效果的全部代码，希望对你有所帮助。

• 扫码体验
  
• 代码仓库：self-discipline-toolbox-weapp

来源地址：https://blog.csdn.net/FeeLang/article/details/131414880