看到小米的商城小程序的搜索栏效果，觉得不错，就想移植到我的小程序上，自己写了一下，效果不是很好，上拉时，搜索框可以伸长，但是下拉时，搜索框的缩放总是出现问题。

百度了一圈，只发现了安卓的效果，不知道为什么web端一个都没有，研究了一下安卓的代码，其实发现并不难！

先放出安卓的代码:

https://github.com/cuiwenju2017/JingDongSearchBar/blob/master/app/src/main/java/com/dy/jingdongsearchbar/MainActivity.java

下面是我改写的代码：

<scroll-view hidden="{{showPage}}" scroll-y style="height:100vh" bindscroll="scroll">
  <view>
</view>
</scroll-view>



js部分
  onLoad: function (options) {
    const res = wx.getSystemInfoSync(); // 获取屏幕宽度
    this.windowHeight = res.windowHeight; // 视口高度
    this.windowWidth = res.windowWidth; // 视口宽度
    this.searchInputWidth = this.windowWidth * 0.45; // 搜索框原始宽度,也是最小宽度
    this.searchInputMaxWidth = this.searchInputWidth + 50; // 搜索框最大宽度
    this.setData({ // 设置search框宽度
      searchInputWidth: this.searchInputWidth
    })
  },

scroll(e) { // 页面滚动
    const {
      scrollLeft,
      scrollTop,
      scrollHeight,
      scrollWidth,
      deltaX,
      deltaY
    } = e.detail;
    // 新搜索框宽度 = 最小宽度 + 下拉距离 * 0.3
    let searchLayoutNewWidth = this.searchInputWidth + scrollTop * 0.3;
    //处理布局的边界问题
    // 新搜索框宽度 = 新宽度 < 最小(原始宽度) ? 设置为最小宽度 :否则 新宽度 
    searchLayoutNewWidth = searchLayoutNewWidth < this.searchInputWidth ? this.searchInputWidth : searchLayoutNewWidth;
    if (searchLayoutNewWidth > this.searchInputMaxWidth) { // 新宽度 > 最大宽度
      searchLayoutNewWidth = this.searchInputMaxWidth; // 新宽度 = 最大宽度
    }
    setTimeout(() => { // 防抖
      this.setData({
        searchInputWidth: searchLayoutNewWidth
      })
    }, 10)
  },

效果: