当前位置:首页 > 编程教程 > javascript技术文章 > 微信小程序实现手势滑动效果

小程序中手势滑动效果实现方法

  • 发布时间:
  • 作者:码农之家
  • 点击:81

这篇文章主要知识点是关于微信小程序、手势滑动、移动手机APP手指滑动切换图片特效附源码下载 的内容,如果大家想对相关知识点有系统深入的学习,可以参阅以下电子书

微信小程序:开发入门及案例详解
  • 类型:微信小程序大小:31.4 MB格式:PDF作者:李骏,边思
立即下载

微信小程序实现手势滑动效果

本文实例为大家分享了微信小程序实现手势滑动的具体代码,供大家参考,具体内容如下

wxml:

<view 
bindtouchstart="touchStart" 
bindtouchmove="touchMove" 
bindtouchend="touchEnd" >
</view>

index.js:

var touchStartX = 0;//触摸时的原点 
var touchStartY = 0;//触摸时的原点 
var time = 0;// 时间记录,用于滑动时且时间小于1s则执行左右滑动 
var interval = "";// 记录/清理时间记录 
var touchMoveX = 0; // x轴方向移动的距离
var touchMoveY = 0; // y轴方向移动的距离

Page({

// 触摸开始事件 
 touchStart: function (e) {
  touchStartX = e.touches[0].pageX; // 获取触摸时的原点 
  touchStartY = e.touches[0].pageY; // 获取触摸时的原点 
  // 使用js计时器记录时间  
  interval = setInterval(function () {
   time++;
  }, 100);
 },
 // 触摸移动事件 
 touchMove: function (e) {
  touchMoveX = e.touches[0].pageX;
  touchMoveY = e.touches[0].pageY;
 },
 // 触摸结束事件 
 touchEnd: function (e) {
  var moveX = touchMoveX - touchStartX
  var moveY = touchMoveY - touchStartY
  if (Math.sign(moveX) == -1) {
   moveX = moveX * -1
  }
  if (Math.sign(moveY) == -1) {
   moveY = moveY * -1
  }
  if (moveX <= moveY) {// 上下
   // 向上滑动
   if (touchMoveY - touchStartY <= -30 && time < 10) {
    console.log("向上滑动")
   }
   // 向下滑动 
   if (touchMoveY - touchStartY >= 30 && time < 10) {
    console.log('向下滑动 ');
   }
  }else {// 左右
   // 向左滑动
   if (touchMoveX - touchStartX <= -30 && time < 10) {
    console.log("左滑页面")
   }
   // 向右滑动 
   if (touchMoveX - touchStartX >= 30 && time < 10) {
    console.log('向右滑动');
   }
  }
  clearInterval(interval); // 清除setInterval 
  time = 0;
 }, 
})

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持码农之家。

移动手机APP手指滑动切换图片特效附源码下载

这是一款效果非常炫酷的移动手机APP滑动手指切换图片特效。该APP特效在移动手机中用户可以通过手指的左右滑动来切换图片,在桌面设备中通过鼠标也可达到同样的效果。

移动手机APP手指滑动切换图片特效附源码下载

效果演示          源码下载

使用方法

HTML结构

这个移动手机APP切换图片特效的HTML结构采用嵌套<div>的HTML结构,每一张图片卡片都包裹在div.demo__card中,里面放置了图片,描述信息和一些额外的图层。

<div class="demo__card">
 <div class="demo__card__top brown">
 <div class="demo__card__img"></div>
 <p class="demo__card__name">Hungry cat</p>
 </div>
 <div class="demo__card__btm">
 <p class="demo__card__we">Whatever</p>
 </div>
 <div class="demo__card__choice m--reject"></div>
 <div class="demo__card__choice m--like"></div>
 <div class="demo__card__drag"></div>
</div> 

m--reject是向左移动图片时的图层,m--like是向右移动图片时的图层,demo__card__drag是拖动层。

JavaScript

在jQuery代码中,pullChange()函数用于设置向左和向右两个滑动层的旋转角度和透明度。release()函数用于判断用户是向左还是向右滑动手指,并为这些动作在DOM元素上添加相应的class。

function pullChange() {
 animating = true;
 deg = pullDeltaX / 10;
 $card.css('transform', 'translateX(' + pullDeltaX + 'px) rotate(' + deg + 'deg)');
 var opacity = pullDeltaX / 100;
 var rejectOpacity = opacity >= 0 ? 0 : Math.abs(opacity);
 var likeOpacity = opacity <= 0 ? 0 : opacity;
 $cardReject.css('opacity', rejectOpacity);
 $cardLike.css('opacity', likeOpacity);
}
;
function release() {
 if (pullDeltaX >= decisionVal) {
  $card.addClass('to-right');
 } else if (pullDeltaX <= -decisionVal) {
  $card.addClass('to-left');
 }
 if (Math.abs(pullDeltaX) >= decisionVal) {
  $card.addClass('inactive');
  setTimeout(function () {
   $card.addClass('below').removeClass('inactive to-left to-right');
   cardsCounter++;
   if (cardsCounter === numOfCards) {
    cardsCounter = 0;
    $('.demo__card').removeClass('below');
   }
  }, 300);
 }
 if (Math.abs(pullDeltaX) < decisionVal) {
  $card.addClass('reset');
 }
 setTimeout(function () {
  $card.attr('style', '').removeClass('reset').find('.demo__card__choice').attr('style', '');
  pullDeltaX = 0;
  animating = false;
 }, 300);
}; 

最后监听mousedown和touchstart事件,并对非.inactive的卡片元素执行卡片切换操作。

使用方法

 HTML结构

这个移动手机APP切换图片特效的HTML结构采用嵌套<div>的HTML结构,每一张图片卡片都包裹在div.demo__card中,里面放置了图片,描述信息和一些额外的图层。

<div class="demo__card">
 <div class="demo__card__top brown">
 <div class="demo__card__img"></div>
 <p class="demo__card__name">Hungry cat</p>
 </div>
 <div class="demo__card__btm">
 <p class="demo__card__we">Whatever</p>
 </div>
 <div class="demo__card__choice m--reject"></div>
 <div class="demo__card__choice m--like"></div>
 <div class="demo__card__drag"></div>
</div> 

m--reject是向左移动图片时的图层,m--like是向右移动图片时的图层,demo__card__drag是拖动层。

JavaScript

在jQuery代码中,pullChange()函数用于设置向左和向右两个滑动层的旋转角度和透明度。release()函数用于判断用户是向左还是向右滑动手指,并为这些动作在DOM元素上添加相应的class。

function pullChange() {
 animating = true;
 deg = pullDeltaX / 10;
 $card.css('transform', 'translateX(' + pullDeltaX + 'px) rotate(' + deg + 'deg)');
 var opacity = pullDeltaX / 100;
 var rejectOpacity = opacity >= 0 ? 0 : Math.abs(opacity);
 var likeOpacity = opacity <= 0 ? 0 : opacity;
 $cardReject.css('opacity', rejectOpacity);
 $cardLike.css('opacity', likeOpacity);
}
;
function release() {
 if (pullDeltaX >= decisionVal) {
  $card.addClass('to-right');
 } else if (pullDeltaX <= -decisionVal) {
  $card.addClass('to-left');
 }
 if (Math.abs(pullDeltaX) >= decisionVal) {
  $card.addClass('inactive');
  setTimeout(function () {
   $card.addClass('below').removeClass('inactive to-left to-right');
   cardsCounter++;
   if (cardsCounter === numOfCards) {
    cardsCounter = 0;
    $('.demo__card').removeClass('below');
   }
  }, 300);
 }
 if (Math.abs(pullDeltaX) < decisionVal) {
  $card.addClass('reset');
 }
 setTimeout(function () {
  $card.attr('style', '').removeClass('reset').find('.demo__card__choice').attr('style', '');
  pullDeltaX = 0;
  animating = false;
 }, 300);
};

最后监听mousedown和touchstart事件,并对非.inactive的卡片元素执行卡片切换操作。

$(document).on('mousedown touchstart', '.demo__card:not(.inactive)', function (e) {
 if (animating)
  return;
 $card = $(this);
 $cardReject = $('.demo__card__choice.m--reject', $card);
 $cardLike = $('.demo__card__choice.m--like', $card);
 var startX = e.pageX || e.originalEvent.touches[0].pageX;
 $(document).on('mousemove touchmove', function (e) {
  var x = e.pageX || e.originalEvent.touches[0].pageX;
  pullDeltaX = x - startX;
  if (!pullDeltaX)
   return;
  pullChange();
 });
 $(document).on('mouseup touchend', function () {
  $(document).off('mousemove touchmove mouseup touchend');
  if (!pullDeltaX)
   return;
  release();
 });
});    

以上就是本次给大家分享的关于java的全部知识点内容总结,大家还可以在下方相关文章里找到相关文章进一步学习,感谢大家的阅读和支持。

微信手势滑动 相关电子书
学习笔记
网友NO.778935

JS实现自动轮播图效果(自适应屏幕宽度+手机触屏滑动)

1、本文使用js+jQuery实现轮播图,需要引用jquery包,另种实现分别是animate实现自适应的轮播,以及transform平滑轮播(在注释代码中)。 2、代码中的图片大家自己更换就可以了,样式和逻辑均写在js里。 3、html标签代码,js代码 div class="slider" //轮播箭头 p class="lastpic"img src="../images/prev.png"/p p class="nextpic"img src="../images/next.png"/p //轮播图片 ul id="slides" class="slides clearfix" liimg class="responsive" src="../images/wrap-page.jpg" alt="暂无图片"/li liimg class="responsive" src="../images/wrap-page.jpg" alt="暂无图片"/li liimg class="responsive" src="../images/wrap-page.jpg" alt="暂无图片"/li liimg class="responsive" src="../images/wrap-page.jpg" alt="暂无图片"/li /ul/div script type="text/javascript" $(document).ready(function() { var len = $(".slider li").length-1; //给slider设置样式 $(".slider").css({ "width":"100%", "height": "inherit", "overflow": "hidden", "dis……

网友NO.446554

vue移动端实现手机左右滑动进入的实例

本文实例为大家分享了vue移动端实现手机左右滑动入场的具体代码,供大家参考,具体内容如下 app.vue template div id=app transition :name=transitionName keep-alive router-view v-if=$route.meta.keepAlive class=Router/router-view /keep-alive /transition transition :name=transitionName router-view v-if=!$route.meta.keepAlive class=Router/router-view /transition Play/Play /div/templatescriptimport Play from ./components/playexport default { name: App, data () { return { transitionName: slide-left } }, watch: { $route (to, from) { // 切换动画 let isBack = this.$router.isBack // 监听路由变化时的状态为前进还是后退 if (isBack === true) { this.transitionName = slide-right // from.meta.keepAlive = false // to.meta.keepAlive = true } else { // from.meta.keepAlive = true // to.meta.keepAlive = false // this.transitionName = slide-left if (this.$route.path.split(/).length 3) { this.transitionName = slide-fade } else { this.transitionName = slid……

网友NO.938064

微信小程序swiper禁止用户手动滑动代码实例

前言 最近做一个项目,由于用到了竖向swiper,导致占用屏幕过大,用户滑动总是滑动到swiper组件,页面无法向下拉动,于是找各种办法禁止用户手动滑动swiper组件。 经过网上一番查找,网友们也是闹洞大开,各种方法都想出来了,有用透明蒙层覆盖的,这不失为一种很好的解决办法,但是如果swiper上有元素需要点击就没有办法了。 继续查找,于是找到了用 catchtouchmove 事件来截获用户手动滑动事件,这样既解决了禁用用户手动滑动,有解决了有点击按钮不影响使用 代码: WXML: swiper class='yaohe' vertical='true' circular='true' autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}" block wx:for='{{yaohe}}' swiper-item catchtouchmove='catchTouchMove' !--重点这里-- block wx:for='{{item}}' view class='yaohe_item' view class='yaohe_img' image src='{{item.goods_icon}}'/image /view view class='yaohe_right' view class='……

<
1
>

Copyright 2018-2020 www.xz577.com 码农之家

投诉 / 推广 / 赞助:QQ:520161757