微信小程序 顶部搜索框滑动伸缩效果的实现

项目场景：微信小程序顶部搜索框随页面滑动伸缩效果

提示：实现搜索框跟随用户滑动页面，实现伸缩效果

微信小程序 顶部搜索框滑动伸缩动画的实现

实现效果：

滑动前

滑动后

实现原理

提示：主要用到了微信小程序的view-scroll bindscroll

1：确定一个控制搜索框伸缩的范围。
2：通过bindscroll事件获取e.detail.scrollTop；即用户滑动的位置
3：计算当前位置占伸缩范围的比例
4：通过滑动的比例。转换成搜索框显示的到顶部距离比例和宽度比例。
5：最后再进行赋值。

代码示例：

### js
data: {
        scHeight: 500,//scroll-view屏幕高度
        pHeight: 0,//padding高度
        topHeight: 0,
        lineHeight: 0,
        Stop: 0,//搜索框距离顶部高度
        Swidth: 710,//搜索框宽度
        menuTop: 0,//胶囊高度
    },
    onScroll(e) {
        let scrollTop = Math.floor(e.detail.scrollTop)
        let headHeight = this.data.topHeight + 60
        if (scrollTop > headHeight) {
            this.setData({
                Stop:this.data.menuTop,
                Swidth:350
            })
        }else{
            console.log(scrollTop+'======'+headHeight);
            let ratio =1-scrollTop / headHeight //滑动的比例
            console.log(ratio);
            let menuTop = this.data.menuTop//胶囊高度
            let curSearchTop=this.data.topHeight//动态获取最大搜索框高度
            let Stop=(curSearchTop-menuTop)*ratio+menuTop//搜索框当前滑动的距离
            let Swidth=(710-350)*ratio+350//搜索框当前的宽度
            this.setData({
                Stop,
                Swidth
            })
        }

    },
    /**
     * 生命周期函数--监听页面加载
     */
    onLoad(options) {
        let SystemInfo = wx.getSystemInfoSync()
        let pxToRpx = 750 / SystemInfo.windowWidth
        let startHeight = SystemInfo.statusBarHeight * pxToRpx
        let titleHeight = 44 * pxToRpx
        let scHeight = SystemInfo.windowHeight * pxToRpx
        let menuTop = wx.getMenuButtonBoundingClientRect().top * pxToRpx
        this.data.menuTop=menuTop
        this.setData({
            scHeight: scHeight,
            topHeight: startHeight + titleHeight,
            pHeight: startHeight,
            lineHeight: titleHeight,
            Stop: startHeight + titleHeight
        })

    },