uni-app实现sticky效果:让搜索栏固定在顶部
<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>
原文地址: http://www.cveoy.top/t/topic/oUFS 著作权归作者所有。请勿转载和采集!