微信小程序实现类滚动界面动态显示内容_微信小程序,动态界面

需求：最近做小程序遇到的一个需求是这样的，想通过滑动一个view组件实现某个页面的动态隐藏和展示，想用scroll-view来监听触底和触顶事件，但是scroll-view有滚动条，直接放弃，并且下拉的时候会出现加载的动画，十分不美观，所以自己用movable-area实现了一个（我不知道怎么把效果做成动图，所以没办法展示）

代码如下

js页面：

Page({
  data: {
    xx: 0,
    yy: 4.5,
    height:100,
    hide:false,//t是隐藏
  },
  changeTest2(e)
  {var w = e.detail.y
    if(w==0)
    {
      console.log("触顶")
      this.setData({
        yy:4.5,
        hide:true
      })
    }
    else if(w==9)
    {
      console.log("触底")
      this.setData({
        yy:4.5,
        hide:false
      })
    }
    else
    {
      console.log("未达到")
      this.setData({
        yy:4.5,
      })
    }
    console.log(e.detail)
  },
})

<view style="height:100px;width:100%;background: #1AAD19;" hidden="{{hide}}"></view>
  <view class="page-section">
    <view class="page-section-title">只可以纵向移动</view>
    <movable-area style="height:{{height+15}}rpx">
      <movable-view x="{{xx}}" y="{{yy}}"  direction="vertical"  bindchange="changeTest2" style="width:100%" inertia>text</movable-view>
    </movable-area>
  </view>

css页面：

movable-view {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100rpx;
  width: 100rpx;
  background: #1AAD19;
  color: #fff;
}
 
movable-area {
  height: 400rpx;
  width: 400rpx;
  margin: 50rpx;
  background-color: #ccc;
  overflow: hidden;
}
 
.max {
  width: 600rpx;
  height: 600rpx;
}
 
.page-section{
  width: 100%;
  margin-bottom: 60rpx;
}
 
.page-section:last-child{
  margin-bottom: 0;
}
 
.page-section-title{
  font-size: 28rpx;
  color: #999999;
  margin-bottom: 10rpx;
  padding-left: 30rpx;
  padding-right: 30rpx;
}

效果图不会做

text所在的view上移动使y=0时触发隐藏函数

下拉达到y=9时显示

其他数值时设y=4.5

有不懂的请留言