DDR爱好者之家 Design By 杰米

实现类似ios端微信的左滑显示置顶、删除按钮的功能,首先需将按钮部分设为绝对定位,并且right设为负值溢出屏幕。利用小程序事件处理的api,分别读取触摸开始,触摸移动时,触摸结束的X/Y坐标,根据差值来改变整个卡片的位置。

这里有一个细节,为了防止按钮的点击干扰到卡片主部分的滑动,需要将整个卡片分为两部分。

<View style={`${positionStyle[index]}`}>
  <View 
    onTouchStart={this.moveTaskStart}
    onTouchMove={this.moveTask}
    onTouchEnd={this.moveTaskEnd}
  >
    这是主要的卡片部分
  </View>

  <View style="right: -260px;">这是滑动后出现的按钮部分</View>
</View>

这里使用的是Taro框架,方法与原生事件api一样,在开始滑动时分别存入X,Y坐标,在手指移动过程中计算移动的距离,当X的移动距离大于整个按钮部分的一班,展开按钮。

核心功能的实现,只需要分析X坐标即可,但因为用户可能在上下滑动过程中x坐标也会偏移造成按钮的展开,所以需要在move与end两部分都计算垂直坐标的改变与水平坐标改变形成的角度,当角度过大,视为上下滑动,按钮不展开。
完整代码如下:

moveTaskStart(e) {
  if (e.touches.length == 1) {
    //触摸屏上只有一个触摸点
    this.setState({
      // 开始触摸屏幕的X坐标
      startX: e.touches[0].clientX,
      startY: e.touches[0].clientY
    });
  }
}

moveTask(e) {
  if (e.touches.length == 1) {
    let moveX = e.touches[0].clientX;
    let moveY = e.touches[0].clientY;
    // 移动距离
    let disX = this.state.startX - moveX;
    let disY = this.state.startY - moveY;
    let angle = disY > 0 "";
    if (disX == 0 || disX < 30) {
      //右滑动
      txtStyle = "left:0px";
    } else if(angle > 0.5) {
      return;
    } else if (disX > 30 && angle < 0.5) {
      txtStyle = `left: -${disX}px`;
      if (disX >= btnWidth) {
        //距离最大值
        txtStyle = `left: -${btnWidth}px`;
      }
    }
    let index = e.currentTarget.dataset.index;
    let list = this.state.positionStyle;
    this.setState({
      positionStyle: list
    });
  }
}

moveTaskEnd(e) {
  let txtStyle;
  if (e.changedTouches.length == 1) {
    let endX = e.changedTouches[0].clientX;
    let moveY = e.changedTouches[0].clientY;
    //移动距离
    let disX = this.state.startX - endX;
    let disY = this.state.startY - moveY;
    //移动角度
    let angle = disY > 0 "left:0px"
    }
    let index = e.currentTarget.dataset.index;
    let list = this.state.positionStyle;
    list[index] = txtStyle;
    this.setState({
      positionStyle: list
    });
  }
}

总结

以上所述是小编给大家介绍的微信小程序实现单个卡片左滑显示按钮并防止上下滑动干扰功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

DDR爱好者之家 Design By 杰米
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
DDR爱好者之家 Design By 杰米

《魔兽世界》大逃杀!60人新游玩模式《强袭风暴》3月21日上线

暴雪近日发布了《魔兽世界》10.2.6 更新内容,新游玩模式《强袭风暴》即将于3月21 日在亚服上线,届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。

艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕,并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时,他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中,玩家将会进入一个全新的海盗主题大逃杀式限时活动,其中包含极高的风险和史诗级的奖励。

《强袭风暴》不是普通的战场,作为一个独立于主游戏之外的活动,玩家可以用大逃杀的风格来体验《魔兽世界》,不分职业、不分装备(除了你在赛局中捡到的),光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式,玩家在加入海盗主题的预赛大厅区域前,可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹,《巨龙崛起》和《魔兽世界:巫妖王之怒 经典版》的玩家都可以获得奖励。