微信小程序—上划悬停效果

思路

写代码，有时候就像变戏法一样，就像上滑悬停，看着是停了，其实只是那个位置提前放了一个一模一样的，通过wx:if="{{isShow}}"来控制隐现，如此而已。

效果

体验

)

代码

js

// miniprogram/pages/index/pages/floatCover/floatCover.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    floatAreaTop:0,
    isShowFloat:false
  },

  onPageScroll: function (e) {
    var scrollTop = e.scrollTop
    if (scrollTop >= this.data.floatAreaTop){
      this.setData({
        isShowFloat:true
      })
    } else {
      this.setData({
        isShowFloat: false
      })
    }
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {

    let that = this;
    var query = wx.createSelectorQuery()
    query.select('#floatMirror').boundingClientRect()
    query.selectViewport().scrollOffset()
    query.exec(function (res) {
      that.setData({
        floatAreaTop:res[0].top
      })
    })
  }
})

wxml

<view class="container">
<view class="view-row" style="color:#aaa;font-size:36rpx;margin:30rpx;border-bottom:1rpx solid #aaa;padding:10rpx">custom-上划悬停</view>
  <view style="font-size:32rpx;color:#aaa">向上滑动可将悬停区域固定在导航栏下方</view>
  <view id="floatMirror" style="width:100%;height:100rpx;justify-content:center;align-items: center;display: flex;background:#ed3">悬停区域</view>
  <view wx:if="{{isShowFloat}}" style="position:fixed;width:100%;height:100rpx;justify-content:center;align-items: center;display: flex;background:#ed3;">悬停区域</view>
  <image style="width:500rpx;height:800rpx;border-radius:20rpx;margin-top:20rpx" src="cloud://normal-env-ta6pc.6e6f-normal-env-ta6pc-1300924598/meinv/00003.jpg"></image>
  <image style="width:500rpx;height:350rpx;border-radius:20rpx;margin-top:20rpx" src="cloud://normal-env-ta6pc.6e6f-normal-env-ta6pc-1300924598/meinv/00003.jpg"></image>
  <image style="width:500rpx;height:600rpx;border-radius:20rpx;margin-top:20rpx" src="cloud://normal-env-ta6pc.6e6f-normal-env-ta6pc-1300924598/meinv/00003.jpg"></image>
</view>

程序员不易，鼓励一下！