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

这篇具有很好参考价值的文章主要介绍了【小程序】小程序如何实现滑动翻页(类似刷短视频的交互效果)。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

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

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

微信小程序滑动翻页,小程序,小程序

数据准备

首先我们在 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 src="../../images/{{bias.illustration}}" mode="aspectFit" />
        </view>
        <view class="article__caption">
          <text>{{bias.ext}}</text>
        </view>
      </view>
    </swiper-item>
  </swiper>
</view>

结构非常简单:

- <view class="page">
    - <swiper class="swiper">
        - <swiper-item class="swiper-item">

CSS 样式代码

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

首先是根元素的 CSS 类 .page

.page {
  height: 100%;
}

然后是 <swiper> 的类 swiper

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

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

规则 含义
height: 100vh; 这将元素的高度设置为 100 视口高度单位。vh 单位表示相对于视口高度的百分比,因此此规则确保元素将占满整个视口的高度。
width: 100vw; 这将元素的宽度设置为 100 视口宽度单位。vw 单位表示相对于视口宽度的百分比,因此此规则确保元素将占满整个视口的宽度。
position: fixed; 这将元素的定位方式设置为 “fixed”。固定定位将元素从正常文档流中移除,并相对于视口进行定位。即使用户滚动页面,元素仍将保持在相同的位置。
top: 0; 这将元素的顶部位置设置为 0,即与视口顶部对齐。
left: 0; 这将元素的左侧位置设置为 0,即与视口左侧对齐。
overflow: hidden; 这将隐藏超出元素边界的任何内容。如果内容超出元素的尺寸,这将防止出现滚动条。
transform: translate3d(0, 0, 0); 这将对元素应用一个 3D 平移变换。在这种情况下,它将元素在 X 和 Y 轴上平移 0 像素。这可以用于在某些设备上触发硬件加速。

对 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}}">
CSS 规则 含义
vertical="true" 竖向滑动
duration="300" 滑动动画耗时 300ms
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

以上就是在微信小程序中实现上下滑动翻页的效果的全部代码,希望对你有所帮助。文章来源地址https://www.toymoban.com/news/detail-685713.html


  • 扫码体验
    微信小程序滑动翻页,小程序,小程序
  • 代码仓库:self-discipline-toolbox-weapp

到了这里,关于【小程序】小程序如何实现滑动翻页(类似刷短视频的交互效果)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 如何实现小程序滑动删除组件+全选批量删除组件

    如何实现小程序滑动删除组件+全选批量删除组件 采用 uni-app 实现,可以适用微信小程序、其他各种小程序以及 APP、Web等多个平台 具体实现步骤如下: 下载开发者工具 HbuilderX 进入 【 Dcloud 插件市场 】 搜索 【滑动删除组件+左滑删除+全选批量删除组件】,一键导入示例 运行

    2024年04月13日
    浏览(36)
  • Android 使用ViewPager2+ExoPlayer+VideoCache 实现仿抖音视频翻页播放

    1. 实现效果    效果图中,视频没有铺满 是因为使用了ExoPlayer的RESIZE_MODE_FIT模式, 虽然使用RESIZE_MODE_FILL模式可以填充整个父布局,但是本Demo中使用的视频源本身就不适合全屏,会把视频拉伸,效果不好。 抖音上的视频源应该都有严格的宽高尺寸,才能做到全屏有很好的效

    2023年04月09日
    浏览(41)
  • [MAUI]模仿iOS多任务切换卡片滑动的交互实现

    @ 目录 原理 创建布局 创建分布函数 创建动效 创建绑定数据 细节调整 首张卡片的处理 为卡片添加裁剪 跳转到最后一张卡片 项目地址 看了上一篇博文的评论,大家对MAUI还是比较感兴趣的,非常感谢大家的关注,这个专栏我争取周更😉。 App之间的多任务切换相信你们都很熟

    2024年02月02日
    浏览(92)
  • IOS 类似探探卡片滑动效果

    IOS 类似探探卡片滑动效果 之前写的类似的效果,现在整理一下demo,方便之后可能会用到。 卡片要实现 1、实现左右滑动 2、滑动之后删除或者还原 首先有数据Cards数组,以及CardViews数组,一次性只显示三个卡片,当滑动删除第一个后,从cards数组中取出数据,创建一个新的

    2024年02月13日
    浏览(39)
  • WebView引入的页面如何实现交互。通过webview方式嵌套在小程序里面的页面如何实现保存到相册的功能

    通过 WebView 方式嵌套在小程序中的页面,保存图片到相册的功能需要借助 WebView 的内部通信机制。以下是实现步骤: 1. 小程序端,给 WebView 组件添加一个监听事件,以便接收来自 WebView 页面的消息: ```html web-view src=\\\"your-website.com domain name is for sale. Inquire now.\\\" bindmessage=\\\"handle

    2024年01月17日
    浏览(39)
  • 省钱兄短剧短视频视频滑动播放模块源码支持微信小程序h5安卓IOS

    # 开源说明 开源省钱兄短剧系统的播放视频模块(写了测试弄了好久才弄出来、最核心的模块、已经实战了),使用uniapp技术,提供学习使用,支持IOS+Android+H5+微信小程序,使用Hbuilder导入即可运行 #注意:由于app环境下ios跟Android存在差异,故需要分别适配 ##index.nvue文件默认

    2024年02月07日
    浏览(46)
  • unity导入视频并实现播放及进度条滑动

    1.创建如下所示unity界面 button1:上一个视频 button2:播放/暂停 button3:下一个视频 vidotime:是一个text,显示视频时间 videoname:视频名称 2.具体界面如下所示 二、导入脚本 1.在RawImage中导入脚本,实现对视频播放/暂停,及切换视频功能 using System.Collections; using System.Collections.Ge

    2024年02月15日
    浏览(66)
  • uniapp实战仿写网易云音乐(三)—视频页面(scroll-view组件实现横线滑动,mescroll-uni实现视频列表,向下滑动刷新当前页面)

    接着上篇文章继续完成剩下的部分,本篇文章是完成第二个页面——视频页面的部分,视频还是没有做播放的效果,主要是做展示效果。下面附上两篇文章链接,没看过的同学可以回头看看: uniapp实战仿写网易云音乐(一)—底部工具栏以及首页轮播图swiper的实现 uniapp实战仿写

    2023年04月25日
    浏览(47)
  • vue3 - swiper插件 实现PC端的 视频滑动功能(仿抖音短视频)

     swiper官网 ​​​​​​swiper属性/组件查询 步骤: ① npm install swiper 安装 ② 基础模板:   如图: 属性: direction = \\\" \\\'vertical\\\' \\\" ,滑动方向,vertical 垂直方向。(注:一定要两对引号包裹着,否则不生效,还要给swiper设置实高) modules = \\\"modules\\\" grabCursor=\\\"true\\\" ,鼠标手掌形状

    2024年02月03日
    浏览(89)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包