uniapp实现滚动监听搜索栏动画

实现大多app的上下滚动让搜索栏放大缩小

实现效果

距离顶部大于200时

距离顶部小于200时

此处是将动画属性绑定到输入框上 :animation="animationData"

<view  style="width: 98%;background-color: #20C3AF;border-radius: 0 0 20rpx 20rpx;position: sticky;top: 0%;z-index: +20;padding: 1%;">
        <input class="uni-input":animation="animationData" confirm-type="search" style="background-color: white;width: 94%;margin: 2%;padding: 1%;border-radius: 50rpx;" placeholder="搜索"/>
</view>

函数:

    data() {
            return {
                    animationData:{}
            }
    },
    onPageScroll(e) {//uniapp自带的监听滚动条方法
            console.log(e);
            if(e.scrollTop>=200){//顶部距离大于等于200
                    this.searchwidth()
            }
            if(e.scrollTop<200){//顶部距离小于于200
                    this.searchwidth2()
            }
    },
    mounted() {
                var animation = uni.createAnimation({
                  duration: 500,
                      timingFunction: 'ease',
                })
                    //此处创建动画并赋值
                this.animation = animation
    },
    methods: {
            searchwidth: function () {
              // 缩小宽度至300px
              this.animation.width(300).step()
              this.animationData = this.animation.export()
            },
            searchwidth2: function () {
              // 放大宽度到94%
              this.animation.width('94%').step()
              this.animationData = this.animation.export()
            }
   }

具体样式自己调整，我写的比较简单