<template>
  <view class='home-container'>
    <view class='top-content'>
      <view class='home-logo'>
        <u--image width='100%' height='124' radius='20' :showLoading='true' :src='src'></u--image>
      </view>
      <view class='title'>
        <u-icon name='list' size='22' color='#d09f72'></u-icon>
        <span class='text'>全部路线</span>
      </view>
      <view class='search'>
        <view class='tab'>
          <view class='tab-item' v-for='(item,index) in tabList' :key='item.name' @click='onChange(index,item.name)'>
            <span class='tab-item-title'>{{item.name}}</span>
            <u-icon name='arrow-down-fill' size='8' color='#d09f72'></u-icon>
          </view>
        </view>
      </view>
    </view>
    <view class='home-content'>
      <view class='list-content'>
        <view class='item' v-for='item in 100'></view>
      </view>
    </view>
  </view>
</template>
<script>
export default {
  data() {
    return {
      dropShow: false,
      src: 'https://cdn.uviewui.com/uview/album/1.jpg',
      tabList: [{
        name: '选择版本',
      }, {
        name: '旅行区域',
      }, {
        name: '所有路线'
      }]
    }
  },
  onLoad() {

  },
  methods: {
    onChange(index,name){
      this.dropShow = !this.dropShow
    },
    dropDownList() {
      this.dropShow = !this.dropShow
      console.log('this.dropdownShow===>', this.dropShow)
    },
  }
}
</script>
<style scoped lang='scss'>
.home-container {
}
.home-content {
  margin-top: 20rpx;
  padding: 0 20rpx;
  background-color: #f5f5f5;
}
.home-logo {
  margin-bottom: 25px;
}

.title {
  display: flex;
  align-items: center;
  margin-bottom: 30rpx;

  .text {
    font-size: 36rpx;
    margin-left: 5rpx;
    font-weight: bold;
  }
}
.search {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 1;
  width: 100%;
  background-color: white;
  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
}

.list-content {
  margin-top: 88rpx;
}
::-webkit-scrollbar {
  width: 0;
  height: 0;
  color: transparent;
}

</style>
uni-app实现sticky效果:让搜索栏固定在顶部

原文地址: http://www.cveoy.top/t/topic/oUFS 著作权归作者所有。请勿转载和采集!

免费AI点我,无需注册和登录