微信小程序,仿微信,下拉显示小程序效果,非常丝滑

1. 视图层

使用到了微信小程序的movable-view(可移动的视图容器)和movable-view的可移动区域。

微信小程序文档

javascript 复制代码
<!--wxml-->
<view style="position: relative;" class="page-container">
  <view>
    二楼内容
  </view>
  <movable-area class="area-style">
    <movable-view disabled="{{disabled}}" bindchange="changeMove" bindtouchend="touchend" bindtouchstart="touchstart" y="{{y}}" class="view-style br" direction="vertical">
      一楼内容
    </movable-view>
  </movable-area>
</view>

3. css

注意:移动区域一定要大于可移动视图容器,否则将无法移动

我这里 .area-style设置200vh .view-style设置100vh

这里有个细节:

当移动区域到最下方时,继续往下滑动,移动区域将会回弹到顶部,

解决方法:

1.设置:移动区域高度 = 可移动区域高度 + 可移动返回高度,

2.通过js控制:在最低点下滑无效即可

javascript 复制代码
/* wxss */
.page-container{
  height: 100vh;
  overflow: hidden;
  background-color: #aaa;
  text-align: center;
  font-size: 24px;
  font-weight: 500;
  padding-top: 20px;
}
.area-style {
  height: 200vh;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
}

.view-style {
  width: 100%;
  height: 100vh;
  background-color: #fafafa;
  text-align: center;
  font-size: 24px;
  font-weight: 500;
  padding-top: 20px;
}

5. js

通过js控制y值,进而实现下滑和上划动画打开/关闭效果。

注意:如果在一楼或者二楼使用到了scroll-view,那么需要在y=minY 或y=maxY的时候,动态控制scroll-view是否可滑动即可。

javascript 复制代码
// ts
Page({

  /**
   * 页面的初始数据
   */
  data: {
    y: 0, // 一楼(可滑动块)距离顶部的距离
    minY: 0, // 一楼(可滑动块)距离顶部的最小距离
    maxY: 0,// 一楼(可滑动块)距离顶部的最大距离
    endY: 0,// 滑动结束是y的值
    startY: 0, // 滑动开始时y的值(要么等于minY,要么等于maxY)
    threshold: 100, // 滑动阀值(指 滑动超过此值一段距离,才会打开或者关闭,否则弹回原来的状态)
    disabled: false, // 是否禁止滑动
  },
  // 滑动过程中,把每次滑动的当前值,赋值给endY
  changeMove(e: any) {
    this.setData({
      endY: e.detail.y
    })
  },
  // 滑动结束
  touchend() {
    const { startY, endY, maxY, minY, threshold } = this.data
    let value;
    // 判断向下滑动
    if (endY > startY && endY - startY > threshold) {
      // 触发下滑,页面打开二楼
      value = maxY
      // 触发下滑成功,设置震动反馈
      wx.vibrateShort({ type: 'heavy' })
    } else {
      // 未触发下滑,页面回弹到一楼
      value = minY
    }
    // 判断上划
    if (startY > endY && startY - endY < threshold) {
      // 触发上滑,页面回到一楼
      value = maxY
    }
    this.setData({
      y: value
    })
  },
  // 滑动开始
  touchstart() {
    this.setData({
      startY: this.data.y
    })
  },
  /**
   * 生命周期函数--监听页面加载
   */
  async onLoad() {
    // 获取屏幕高度
    const res = await wx.getSystemInfo()
    // 设置最大顶部距离(-200,目的是让一楼漏出头,方便上划,或者点击)
    this.setData({
      maxY: res.screenHeight - 200
    })
  },
})

持续优化,欢迎一起讨论。

相关推荐
游戏开发爱好者810 小时前
iOS App 电池消耗管理与优化 提升用户体验的完整指南
android·ios·小程序·https·uni-app·iphone·webview
_pengliang11 小时前
小程序按住说话
开发语言·javascript·小程序
万岳科技程序员小金13 小时前
多端协同的招聘系统源码开发指南:小程序+APP一体化设计
小程序·软件开发·app开发·招聘小程序·同城招聘系统源码·招聘app开发·招聘软件开发
xkxnq13 小时前
微信小程序地理定位功能
微信小程序·小程序
難釋懷13 小时前
微信小程序全局数据共享
微信小程序·小程序
郭邯14 小时前
小程序自定义组件学习笔记
微信小程序
阿眠16 小时前
vue3实现web端和小程序端个人签名
前端·小程序·apache
2501_9159184118 小时前
iOS 性能监控工具全解析 选择合适的调试方案提升 App 性能
android·ios·小程序·https·uni-app·iphone·webview
xmdoor20 小时前
微信小程序:酒店预订管理系统
微信小程序·酒店预订·酒店系统·酒店管理
sunly_1 天前
Flutter:上传图片,选择相机或相册:wechat_assets_picker
数码相机·flutter·微信