微信小程序顶部搜索框滑动伸缩效果的实现-Toy模板网

这篇具有很好参考价值的文章主要介绍了微信小程序顶部搜索框滑动伸缩效果的实现。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

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

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

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

实现效果：

滑动前

小程序滚动的框,微信小程序,微信小程序,javascript,前端,css,html5

滑动后

小程序滚动的框,微信小程序,微信小程序,javascript,前端,css,html5

实现原理

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

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

代码示例：

### 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
        })

    },