微信小程序： 實現頁面局部下滑效果

首先，在這里要用到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',  //設置頁面移動動畫
    });
  },

 

到此完成效果。如有問題，還請大家多多指教。