uni-app 小程序 sticky 固定定位失效

今天在继续复习某马优购的uni-app小程序项目的时候，又踩到了第一次次固定定位的坑，给搜索框组件添加了sticky定位也不起作用，查找了半天百度，主要都说设置固定元素的高度超过了父容器的高度，或者没有给定位之一，再者就是父容器设置了overflow属性，我按照他们的建议试了后还是不起作用，代码片段如下:

此为首页引用my-search组件的代码:

<template>
  <view>
    <my-search></my-search>
    <view class="swipwerContainer">
      <!-- 给轮播图设置宽高必须设置在swiper上，设置在swiperItem上有奇怪问题 -->
     <swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" circular="true" class="swiperFath">
       <swiper-item v-for="(item,index) in swiperList" :key="index" class="swiperItem">
         <navigator  :url="`/subpkg/goods_detail/goods_detail?${item.navigator_url.split('?')[1]}`">
             <image :src="item.image_src" ></image>
           </navigator>
       </swiper-item>
      </swiper>
    </view>
    <!-- 分类导航 -->
    <view class="navListContainer"> 
      <view class="navList">
        <view class="navItem" v-for="(item,index) in navList" :key="index" @click="switchPage(item)">
          <image :src="item.image_src" mode=""></image>
        </view> 
      </view>
    </view>
    <!-- 楼层导航区域 -->
    <view class="floorContainer">
      <view class="floorList">
        <view class="flooItem" v-for="(item,index) in floorList" :key="index">
          <view class="floorTitle">
            <image :src="item.floor_title.image_src"></image>
          </view>
          <view class="floorContent">
            <navigator class="floorContentLeft" :url="item.product_list[0].navigator_url">
              <image :src="item.product_list[0].image_src" ></image>
            </navigator>
            <view class="floorContentRight">
              <navigator class="floorContentRightItem" v-for="(item2,index2) in item.product_list" v-if="index2!==0" :url="item2.navigator_url" :key="index2">
                <image :src="item2.image_src"  ></image>
              </navigator>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

此为my-search组件中的代码:

<template>
  <view class="searchContainer">
    <view class="search-input" @click="gotoSearch">
      <uni-icons type="search"></uni-icons>
      <text>搜索</text>
    </view>
  </view>
</template>
<style lang="scss">
.searchContainer{
  position: sticky;
  left: 0;
  // bottom: 0;
  z-index: 999;
  background-color: #f8f3ec;
  height: 60px;
  // border: 1px solid red;
  display: flex;
  justify-content: center;
  align-items: center;
  .search-input{
   width: 90%;
   height: 40px;
   border-radius:20px;
   line-height: 40px;
   text-align: center;
   background-color: white;
   & uni-icons{
     margin-right: 3px;
   }
  }
}
</style>

可以看到，我在my-search组件的样式里已经设置了sticky定位，并且也给定了定位四值之一left:0，且在home页面里引用my-search组件也是在view的根节点下，不存在说有单独设置overflow:hidden这种情况，但是就是不行，第一次搞这个的时候也是卡了很久，当时莫名其妙就好了，没搞清楚，结果又卡在这里了

滑动时搜索框被拉上去运行截图:

解决办法

后面试了半天，修改了my-search组件样式里的定位属性值为top:0，就没问题了，并且我又反复单独测试了其他三个定位值right,bottom,和一开始的left，设置后sticky依然无效，但只要加上top:0位置设定后，就起作用了，真机调试也没有异常，这个我暂时也想不通为什么，不过算是解决了一半，有知道的伙伴可以分享一下。

修改后的my-search组件中的代码如下:(就只是将.searchContainer样式的left:0替换为了top:0)

<template>
  <view class="searchContainer">
    <view class="search-input" @click="gotoSearch">
      <uni-icons type="search"></uni-icons>
      <text>搜索</text>
    </view>
  </view>
</template>

<script>
  export default {
    name:"my-search",
    data() {
      return {
      };
    },
    methods:{
     gotoSearch(){
       uni.navigateTo({
         url:'/subpkg/search/search'
       })
     }
    },
  }
</script>

<style lang="scss">
.searchContainer{
  position: sticky;
  top: 0;
  z-index: 999;
  background-color: #f8f3ec;
  height: 60px;
  display: flex;
  justify-content: center;
  align-items: center;
  .search-input{
   width: 90%;
   height: 40px;
   border-radius:20px;
   line-height: 40px;
   text-align: center;
   background-color: white;
   & uni-icons{
     margin-right: 3px;
   }
  }
}
</style>

sticky定位修复后搜索框正常固定截图:

总结

后续使用sticky定位设置相对位置时，还是应该优先设置top，这样可以避免出现这种莫名的问题