文档章节

小程序左右滑动显示操作

o
 osc_y8yehimr
发布于 2019/03/20 17:40
字数 523
阅读 0
收藏 0

精选30+云产品,助力企业轻松上云!>>>

小程序左右滑动显示操作

开发使用的是mpvue框架,具体的事件名需要更改一下。

具体在小程序中事件名为:

mpvue 微信小程序
touchstart bindtouchstart
click bindtap
touchmove bindtouchmove

效果如下:

html/wxml 代码如下:

<div class="wrap">
	<div class="item" @touchstart="startX" @click="resetX" @touchmove="moveX" :style="{left: '-' + recordX + 'rpx'}">
		<div class="content">test</div>
	</div>
	<div class="test"></div>
</div>

css 文件如下

<style lang="less">
  .wrap{
    position: relative;
    z-index: 2;
    text-align: center;
    color: #fff;
    line-height: 150rpx;
    height: 150rpx;
    .item{
      background: #39c5bb;
      position: relative;
      transition: left .3s;
    }
    .test{  // 滑动滑块后出现的图标
      position: absolute;
      top: 50rpx;
      right: 20rpx;
      z-index: -1;
      width: 50rpx;
      height: 50rpx;
      background: #f6c;
    }
  }
</style>
  • HTML 结构: 父容器包裹初始时显示的内容和隐藏的操作图标。且他们为兄弟节点。
  • CSS 要点:显示内容采用position定位,进行滑动操作时使用left值进行相对位移。left的值通过v-bind:style实现响应。
  • 隐藏元素采用position: absolute;相对于父容器进行定位,并且层级低于显示元素。被其覆盖。
  • 优化:为了让滑动效果平滑一些,不那么生硬。使用CSS3 transition 将 left属性进行简单的动画处理

js 部分入下:

<script>
  export default {
    data () {
      recordX: 0
    },
    methods: {
      startX (e) {
        this.recordX = e.touches[0].clientX
      },
      resetX () {
        this.recordX = 0
      },
      moveX (e) {
        console.log(e)
      let currentX = e.touches[0].clientX
      if (currentX - this.recordX <= -60) {
        this.recordX = 100
      }
      if (currentX - this.recordX >= 60) {
        this.recordX = 0
      }
    }
  }
}
</script>
  • 首先 startX 函数记录 点击屏幕的X轴的值。
  • moveX 计算在X轴上移动屏幕的距离。
  • 当前位置 - 起始位置 <= -60 则表示左滑。因为屏幕的二维坐标是从上到下,从左到右递增的。因此向左移,后者坐标肯定小于前者,因此为负数。至于60,是值操作按钮所占的宽度的一半。超过一半则保持滑动状态
  • 当前位置 - 起始位置 >= 60.原理同上。这次代表向右滑。
  • resetX 重置位置。因为touchStart时也会调用一次click事件。若不进行初始化,则位置会被记录,第二次进行触碰时会使元素闪动。体验不佳。
o
粉丝 0
博文 500
码字总数 0
作品 0
私信 提问
加载中
请先登录后再评论。

暂无文章

Java线程池

前言 Java中对线程池的抽象是ThreadPoolExecutor类,Executors是一个工具类,内置了多种创建线程池的方法: newFixedThreadPool:固定长度线程池 newCachedThreadPool :可缓存线程池 newSin...

nullpointerxyz
5分钟前
9
0
Python笔记:用Python制作二维码

这些年,二维码在我国的日常使用频率特别大。因为其具有简单及安全性吧!除了用网络工具制作二维码,其实用JavaScript或Python也可以制作二维码,而且更有个性。 示例一(制作普通黑白二维码...

tengyulong
17分钟前
0
0
Redis-初体验/数据结构

定义: Redis 是 C 语言开发的一个开源的(遵从 BSD 协议)高性能键值对(key-value)的内存数据库,可以用作数据库、缓存、消息中间件等。它是一种 NoSQL(not-only sql,泛指非关系型数据库...

心田已荒
20分钟前
15
0
如何在保留订单的同时从列表中删除重复项? - How do you remove duplicates from a list whilst preserving order?

问题: Is there a built-in that removes duplicates from list in Python, whilst preserving order? 是否有内置的程序在保留顺序的同时从Python列表中删除重复项? I know that I can us...

fyin1314
58分钟前
29
0
以太坊智能合约开发常见的10个安全问题

本文介绍CheckMarx安全研究小组通过扫描公开的以太坊智能合约所发现的Solidity智能合约开发中常见的十大安全问题,其中__未检查的外部调用__ 和 高成本循环 分列排行榜前两名。该安全问题排行...

区块链教程
今天
17
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部