微信小程序： 实现页面局部下滑效果

首先，在这里要用到touchstart 、touchmove、touchend三个事件，下面做下简单介绍:

 

 

 具体的请看小程序官网：指南 -> 小程序框架 -> 视图层 ->事件系统：

https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxml/event.html

-----------------------------------------------------------------------------------------------------------------------------

接下来实现页面的局部下滑效果：

     滑动到    

 

具体来看代码：

<view class="other_info"
    bindtouchstart="touchStart"   //这里绑定手指点击事件
    bindtouchmove="touchMove"     //绑定手指移动事件
    bindtouchend="touchEnd"       //绑定手指离开事件
    style="transform:{{initTransForm}};transition:{{initTransition}}"   //实现页面滑动的效果及动画
  >
    <image class="bg_bottom" src="/static/imgs/arc.png"></image>
    <view class="others">
      <view class="other_icons">
        <view class="icons_item">
          <text class="iconfont icon-xiaoxi"></text>
          <text>我的消息</text>
        </view>
        <view class="icons_item">
          <text class="iconfont icon-myRecommender"></text>
          <text>我的好友</text>
        </view>
        <view class="icons_item">
          <text class="iconfont icon-gerenzhuye"></text>
          <text>个人主页</text>
        </view>
        <view class="icons_item">
          <text class="iconfont icon-gexingzhuangban"></text>
          <text>个性装扮</text>
        </view>
      </view>
    </view>
    <view class="icons">
      <view class="icons_item">
        <text>最近播放</text>
      </view>
      <view class="icons_item">
        <text>我的音乐</text>
        <text>></text>
      </view>
      <view class="icons_item">
        <text>我的收藏</text>
        <text>></text>
      </view>
      <view class="icons_item">
        <text>我的电台</text>
        <text>></text>
      </view>
    </view>
  </view>

js代码如下：

data: {
    startY: 0, //开始移动的位置  手指的起始位置
    endY: 0, //结束移动的位置   手指移动的结束位置
    initTransForm: 'translateY(0)', //页面滑动距离
    initTransition: '', //页面滑动动画
  },
  touchStart(e) {
    this.setData({
      startY: e.touches[0].clientY,
      initTransition: '',   //这里初始化是只让手指离开时有动画效果
    });
  },
  touchMove(e) {
    let { startY } = this.data;
    let endY = e.touches[0].clientY;
    let dis = endY - startY;  //手指移动距离
    if (dis <= 0) {  //禁止页面上滑
      return;
    }
    if (dis > 100) {  //设置页面最大滑动距离
      return;
    }
    this.setData({
      initTransForm: `translateY(${dis}rpx)`,  //设置页面移动距离
    });
  },
  touchEnd(e) {
    this.setData({
      initTransForm: `translateY(0)`,   //手指离开，页面返回原来的位置
      initTransition: 'transform 1s linear',  //设置页面移动动画
    });
  },

 

到此完成效果。如有问题，还请大家多多指教。