微信小程序 左右滑动切换页面(炫酷效果)以及点赞特效

#效果图

微信小程序 左右滑动切换页面(炫酷效果)以及点赞特效_第1张图片

  • gif放不上来。。我就直接口述了。。需要看具体效果戳GitHub>>>>>demo地址
  • 首先左右滑动的时候整个页面会以动画效果切换(demo里是反转和水平淡出)
  • 然后那个红色的小心心是点赞之后的状态,过程也是动画
  • 划重点–大家一定用过animate.css,微信小程序里可以用ripples.wxss来代替,具体怎么用,取决于你

#思路

  • 滑动 根据滑动角度判断滑动方向 然后决定显示哪个页面
  • 点赞 每个页面的点赞都对应他自己的数据里的标志值 以此来分别控制小心心

#结语
其实我只是喜欢这个页面而已。。

个人链接

  • github:https://github.com/webxing
  • 简书:https://www.jianshu.com/u/489662a091fd

wepy常用封装

由于我平时主要使用wepy开发项目 所以这些常用封装及项目架子都是使用的wepy
覆盖了一些常用操作与封装、登录流程、保存图片至相册及相关授权流程

所有常用封装及流程实现请点我前往GitHub查看https://github.com/webxing/wepy_skeleton

项目目录结构

.
├── README.md
└── wepy_skeleton
    ├── package.json  // 配置启动脚本 (debug/dev/build)
    ├── project.config.json
    ├── src
    │   ├── app.wpy // networkTimeout plugins  this.use('promisify')  拦截request请求
    │   ├── common
    │   │   ├── animate.wxss  // 动画支持
    │   │   ├── api.js  // 所有api
    │   │   ├── collectFormId.js  // 收集formId
    │   │   ├── common.js  // 封装一些公用方法
    │   │   ├── decorator.js  // 封装trycatch装饰器 实现对函数的错误监控
    │   │   ├── http.js  // 封装小程序request请求
    │   │   ├── bindEvent.js  // 当n个触发条件均满足时 触发函数
    │   │   └── storage.js  // 封装storage为promise
    │   ├── components
    │   │   └── Modal.wpy  // 错误弹窗
    │   └── pages
    │       └── index.wpy  // 登录流程 引入装饰器trycatch 配置错误处理handleError 
    │       └── sign.wpy  // 保存图片至相册及相关授权处理
    │       └── auth.wpy  // 授权页
    └── wepy.config.js  // 配置rootURL  配置Less autoprefix  配置drop_console drop_debugger

本人两年纯小程序开发经验 新建了一个交流群 欢迎加入

微信小程序 左右滑动切换页面(炫酷效果)以及点赞特效_第2张图片

以下是我独立开发的小程序 第一次Pro 欢迎使用 欢迎吐槽

你可能感兴趣的:(CSS,微信小程序)