微信小程序 |从零实现酷炫纸质翻页效果

简介: 微信小程序 |从零实现酷炫纸质翻页效果

一、效果展示

image.gif


二、需求背景

  • 在传统的·电子书应用中,我们体验往往是非常生硬。每个页面之间的切换仅仅是简单的切入切出,没有任何的生动感。这使得我们在看电子书的同时仍然会觉得,我们真的只是在玩手机,除了简单的文字输入没有任何美和动效的享受!
  • 在传统的相册应用中,我们也是是简单的左右划入划出,也显得略微生硬。

于是,就有了今天所分享的类纸感的翻页动画,在手机上实现物理纸质书或者纸质相册的翻页效果,大幅度提升用户观感度!


三、实现代码

3.1 核心事件的监听

对于鼠标点击然后拖动时纸张的动画会随着鼠标的位置进行移动,所以我们需要实时去监听鼠标点击进入和点击离开的事件,这样就可以明确地给动画元素传达开始和结束的指令。

  • 使用@引入相应的鼠标事件
<view id='magazine'
      v-on:swipeleft="touchl" v-on:swiperight="touchr" 
      @mousedown="pcmousedown" @mouseup="pcmouseup"
    >
    <slot></slot>
</view>


  • 定义相应的鼠标事件的动作内容
pcmousedown(event) {
        this.mDown = event.clientX;
      },
      pcmouseup(event) {
      this.mUp = event.clientX;
      if ((this.mDown - this.mUp) > 70) {
        touchLeft('#magazine');
      }
      if ((this.mUp - this.mDown) > 70) {
          touchRight('#magazine');
      }
}


3.2 使用Slot插槽技术为内容预留空位

为了实现在页面中可以放入自己的页面内容时,我们在定义页面模板的时候需要使用<slot>标签对后续的内容进行留白操作!

  • 如果我们要放置的内容比较单一的时候,我们可以直接使用匿名slot

(1) 匿名slot—子组件

<div class="child">
    <h1>子组件</h1>
    <slot>这是个匿名插槽(没有name属性),这串字符是匿名插槽的默认值。</slot>
</div>


(2)匿名slot — 父组件

<div class="parent">
 <h1>父组件</h1>
 <child>
     <p>我是其他内容!!!!!</p>
 </child>
 </div>


(3)效果

父组件
子组件
我是其他内容!!!!! (匿名插槽的默认值被覆盖)


  • 若我们想要在页面中所放的内容较多且有多个模块的时候,我们这个时候可以使用命名slot
    (1) 命名slot—子组件
<div class="child">
    <h1>子组件</h1>
      <slot name="body">主体默认值</slot>
</div>


(2)命名slot — 父组件

<div class="parent">
 <h1>父组件</h1>
 <child>
     <p slot="body">我是主体</p>
 </child>
 </div>


(3)效果

父组件
子组件
我是主体 (具名插槽<slot name="body">的默认值被覆盖)


3.3 引入CSS动画实现纸张折叠效果

为了使动画效果更好的控制,我们首先要定位到相应的元素,所以这里我们需要引入JQuery,然后我们将动画通过js代码的形式进行控制。

(1)向左翻页控制函数

export const touchLeft = function (magazineId){
  var pageCount = $(magazineId).turn("pages"); //total page
  var currentPage = $(magazineId).turn("page"); //now page
  if (currentPage >= pageCount) {
    return;
  }
  if (currentPage <= pageCount) {
    $(magazineId).turn('page', currentPage + 1);
  }
}


(2)向右翻页控制函数

export const touchRight = function (magazineId){
  var pageCount = $(magazineId).turn("pages"); 
  var currentPage = $(magazineId).turn("page");
  if (currentPage <= pageCount) {
    if (currentPage <= 1) {
      return;
    }
    $(magazineId).turn('page', currentPage - 1);
  }
}


四、源码下载

目录
打赏
0
0
0
0
7
分享
相关文章
微信小程序:免费翻页时钟和todolist
微信小程序:免费翻页时钟和todolist
微信小程序:免费翻页时钟和todolist
如何在微信小游戏制作工具中实现关卡翻页功能?
如何在微信小游戏制作工具中实现关卡翻页功能?
101 0
AstrBot:轻松将大模型接入QQ、微信等消息平台,打造多功能AI聊天机器人的开发框架,附详细教程
AstrBot 是一个开源的多平台聊天机器人及开发框架,支持多种大语言模型和消息平台,具备多轮对话、语音转文字等功能。
426 13
AstrBot:轻松将大模型接入QQ、微信等消息平台,打造多功能AI聊天机器人的开发框架,附详细教程
uni-app开发微信小程序的报错[渲染层错误]排查及解决
uni-app开发微信小程序的报错[渲染层错误]排查及解决
961 7
uni-app开发微信小程序:四大解决方案,轻松应对主包与vendor.js过大打包难题
uni-app开发微信小程序:四大解决方案,轻松应对主包与vendor.js过大打包难题
919 1
微信小程序的开发完整流程是什么?
微信小程序的开发完整流程是什么?
267 7
除了微信小程序,PHP 还可以用于开发哪些类型的小程序?
除了微信小程序,PHP 还可用于开发多种类型的小程序,包括支付宝小程序、百度智能小程序、抖音小程序、企业内部小程序及行业特定小程序。在电商、生活服务、资讯、工具、娱乐、营销等领域,PHP 能有效管理商品信息、订单处理、支付接口、内容抓取、复杂计算、游戏数据、活动规则等多种业务。同时,在企业内部,PHP 可提升工作效率,实现审批流程、文件共享、生产计划等功能;在医疗和教育等行业,PHP 能管理患者信息、在线问诊、课程资源、成绩查询等重要数据。
ly~
111 6
uni-app开发微信小程序时vant组件van-tabs的使用陷阱及解决方案
uni-app开发微信小程序时vant组件van-tabs的使用陷阱及解决方案
331 1
微信小程序全栈开发中的身份认证与授权机制
【10月更文挑战第3天】随着移动互联网的发展,微信小程序凭借便捷的用户体验和强大的社交传播能力,成为企业拓展业务的新渠道。本文探讨了小程序全栈开发中的身份认证与授权机制,包括手机号码验证、微信登录、第三方登录及角色权限控制等方法,并强调了安全性、用户体验和合规性的重要性,帮助开发者更好地理解和应用这一关键技术。
137 5
微信小程序全栈开发中的PWA技术应用
【10月更文挑战第3天】微信小程序作为新兴应用形态,凭借便捷体验与社交传播能力,成为企业拓展业务的新渠道。本文探讨了微信小程序全栈开发中的PWA技术应用,包括离线访问、后台运行、桌面图标及原生体验等方面,助力开发者提升小程序性能与用户体验。PWA技术在不同平台的兼容性、性能优化及用户体验是实践中需注意的关键点。
96 5

热门文章

最新文章

AI助理

你好,我是AI助理

可以解答问题、推荐解决方案等