zoukankan      html  css  js  c++  java
  • 微信小程序 transform 实现 惯性滚动,回弹效果 【下拉回弹】

    1. 新建Scroll文件

    2. 在Scroll/index.wxml文件中写入如下代码

    <view class="Scroll-container">
      <view class="content-all" bindtouchstart="scrollTouchstart" bindtouchmove="scrollTouchmove" bindtouchend="scrollTouchend"
        style="transform:translateY(-{{scrollindex*100}}%);margin-top: {{margintop}}px">
    
        <view>
          你好,我想实现 “惯性滚动,回弹效果”,请下拉我
        </view>
    
      </view>
    </view>
    

      

    3. 在Scroll/index.js 文件中写入如下代码

    Page({
      data: {
        starty: 0, //开始的位置x
        endy: 0, //结束的位置y
        margintop: 0, //滑动下拉距离
      },
      onLoad() {
      },
      scrollTouchstart: function (e) {
        let py = e.touches[0].pageY;
        this.setData({
          starty: py
        })
      },
      scrollTouchmove: function (e) {
        let py = e.touches[0].pageY;
        let d = this.data;
        this.setData({
          endy: py,
        })
        if (py - d.starty < 50 && py - d.starty > -50) {
          this.setData({
            margintop: py - d.starty
          })
        }
      },
      scrollTouchend: function (e) {
        this.setData({
          starty: 0,
          endy: 0,
          margintop: 0
        })
      }
    })
    

      

  • 相关阅读:
    Python基础篇 -- 列表
    Python基础篇 -- 字符串
    Python基础篇 -- if while 语句
    Python基础篇 -- 运算符和编码
    Python 入门基础
    Docker知识收藏
    秒表
    Emac
    Android开发
    shell 小工具
  • 原文地址:https://www.cnblogs.com/gqx-html/p/13292264.html
Copyright © 2011-2022 走看看