小程序实现滑动吸附效果

àì夳堔傛蜴生んèń 2022-10-11 15:54 246阅读 0赞

## wxml ##

<view class="container">
      <view class="header-top"></view>
      <view class="content-wrapper" bindtouchstart="handletouchstart" bindtouchmove="handletouchmove" bindtouchend="handletouchend" style="transform: { { coverTransform}}; transition: { { coverTransiton}}">
      </view>
    </view>

## wxss ##

page { 
      width: 100%;
      height: 100%;
    }
    
    .container { 
      width: 100%;
      height: 100%;
      box-sizing: border-box;
    }
    
    .header-top { 
      width: 100%;
      height: 400rpx;
      background: #1496f1;
    }
    
    .header-top image { 
      width: 100%;
      height: 100%;
    }
    
    .content-wrapper { 
      width: 100%;
      height: 500rpx;
      background: #eee;
      position: relative;
      top: -80px;
    }
    
    .content-wrapper::after { 
      content: '';
      width: 100%;
      height: 60rpx;
      position: absolute;
      left: 0;
      top: 0;
      z-index: -1;
      border-radius: 0 0 100% 100%;
      background: #ef0fff;
    }

## wxs ##

let  startY = 0; // 手指起始的坐标
    let moveY = 0; // 手指移动的坐标
    let moveDistance = 0; // 手指移动的距离
    Page({ 
      data: { 
        coverTransform: 'translateY(0rpx)',
        coverTransiton: 'transform 1s linear'
      },
      handletouchstart(event) { 
        this.setData({ 
          coverTransiton: ''
        })
        // 获取手指起始坐标
        startY = event.touches[0].clientY;
      },
      handletouchmove(event) { 
        moveY = event.touches[0].clientY;
        moveDistance = moveY - startY;
        if (moveDistance <= 0) { 
          return;
        }
        if (moveDistance >= 80) { 
          moveDistance = 80;
        }
        // 动态更新coverTransform的状态值
        this.setData({ 
          coverTransform: `translateY(${ moveDistance}rpx)`
        })
      },
      handletouchend(event) { 
        this.setData({ 
          coverTransform: `translateY(${ 0}rpx)`,
          coverTransiton: 'transform 1s linear'
        })
      }
    })

## 效果图 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l3MDB5dw_size_16_color_FFFFFF_t_70]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l3MDB5dw_size_16_color_FFFFFF_t_70 1]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l3MDB5dw_size_16_color_FFFFFF_t_70]: /images/20221005/2822a64df43d43b8a4df2a2043e65066.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l3MDB5dw_size_16_color_FFFFFF_t_70 1]: /images/20221005/782c8666605e421ea47737540698384c.png

发表评论取消回复

表情：

评论列表（有 0 条评论，246人围观）

还没有评论，来说两句吧...

相关阅读

相关小程序实现标尺滑动

效果图： ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3

不念不忘少年蓝@/ 2023年06月10日 15:28/ 0 赞/ 179 阅读

相关小程序实现滑动吸附效果

wxml <view class="container"> <view class="header-top"></view> <view

àì夳堔傛蜴生んèń/ 2022年10月11日 15:54/ 0 赞/ 247 阅读

相关 html tab顶部吸附,微信小程序tab栏吸顶效果实现及防抖动优化

y开始使用的解决方案是使用聚堆定位，在onShow中获取元素距离顶部的距离，然后监听页面滚动，当滚动的距离大于距离顶部的距离时就让他绝对定位 Page(\{ data: \

比眉伴天荒/ 2022年10月07日 11:59/ 0 赞/ 283 阅读

相关小程序--左侧滑动效果

一、效果图讲什么都不如直接上效果图好，所以我们先来看下实现效果如何。通过滑动屏幕，或者点击左上角的图标按钮，都能实现侧边栏的划出效果。 ![70][]![

「爱情、让人受尽委屈。」/ 2022年10月06日 00:57/ 0 赞/ 171 阅读

相关微信小程序实现卡片左右滑动效果

前言快放假了，人狠话不多，啥也不说了。先看效果图。思路从上面的效果图来看，基本的需求包括：左右滑动到一定的距离，就向相应的方向移动一个卡片的位置。

向右看齐/ 2022年10月01日 11:47/ 0 赞/ 807 阅读

相关 ToolBar实现滑动伸缩效果

> 致力于用最简洁的语言描述最复杂的技术有时候我们看TitleBar可以随着下面的内容的滑动而伸缩，这个是怎么实现的呢（我居然不会发那种动画，有没有大神在留言区教一下怎么发

男娘i/ 2022年06月16日 06:53/ 0 赞/ 279 阅读

相关关于小程序 scroll-view 左右横向滑动没有效果（无法滑动）问题

对于小程序的scroll-view组件，有纵向滑动与横向滑动2种。 \-》对于纵向滑动，只需要跟scroll-view组件一个固定高度即可； \-》对于横向滑动，一不小心就

妖狐艹你老母/ 2022年05月26日 09:52/ 0 赞/ 334 阅读

相关小程序实现跑马灯效果

跑马灯效果比较常见，一般做电商类的小程序都会使用到; ![在这里插入图片描述][20181112114423109.gif] 跑马灯效果的制作制作方式很简单，先方

素颜马尾好姑娘i/ 2022年04月17日 02:55/ 0 赞/ 565 阅读

相关小程序中实现VR效果

小程序中实现VR效果最近的工作中有一个奇葩的需求，就是更根据房间场景图，打开摄像机或者上传图片来适配不同的背景图，类似于VR的效果。一开始百度搜索，发现小程序根本没

末蓝、/ 2022年04月03日 12:13/ 0 赞/ 1648 阅读

相关实现导航栏吸附效果

以下是完整代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

野性酷女/ 2022年01月19日 20:09/ 0 赞/ 328 阅读