uni-app吸顶固定样式

<template>
	<view class="full">
		<view class="sticky-box">
			<!-- 搜索 -->
			<uni-search-bar class="unisearchbar" radius="5" placeholder="请输入搜索关键词" clearButton="auto" bgColor="#EEEEEE"
				cancelButton="none" @input="input" />
			<!-- 搜索 -->
			<view class="doctor">
				<!-- 全部科室 -->
				<view class="doctor_l">
					<view class="uni-list-cell-db">
						<picker @change="bindPickerChange" :value="form.id" :range-key="'name'" :range="deptLists">
							<text v-if="form.id"
								class="uni-input">{{deptLists.find(item => item.id == form.id).name}}</text>
							<text v-else style="color: #000;">全部科室</text>
							<uni-icons type="bottom" size="15"></uni-icons>
						</picker>
					</view>
				</view>
				<!-- 全部职称 -->
				<view class="doctor_r">
					<view class="uni-list-cell-db">
						<picker @change="bindPickerChangeone" :value="form.infoCode" :range-key="'infoName'"
							:range="findByTypeCodeList">
							<text v-if="form.infoCode"
								class="uni-input">{{findByTypeCodeList.find(item => item.infoCode == form.infoCode).infoName}}</text>
							<text v-else style="color: #000;">全部职称</text>
							<uni-icons type="bottom" size="15"></uni-icons>
						</picker>
					</view>
				</view>
			</view>
		</view>
		<view>
			<doctorList :doctorList="doctorList"></doctorList>
		</view>
	</view>
</template>

<script>
	import doctorList from '../../components/doctorList/index.vue'
	import {
		tranfrom
	} from '@/utils/util.js'
	import {
		selectUserList,
		selectDeptList
	} from '@/api/home'
	export default {
		components: {
			doctorList
		},
		data() {
			return {
				//选择切换
				form: {
					id: '',
					infoCode: ''
				},
				// 初始值
				datesize: {
					pageNum: 1,
					pageSize: 10,
					params: {
						userName: "",
						deptId: "",
						ysZc: ""
					}
				},
				deptLists: [],
				findByTypeCodeList: [],
				doctorList: [],
			};
		},
		watch: {
			// 全部职能
			'$store.state.findByTypeCode'(newVal, oldVal) {
				this.findByTypeCodeList = this.$store.state.findByTypeCode
			},
			// 全部科室
			'$store.state.selectDeptList'(newVal, oldVal) {
				this.deptLists = this.$store.state.selectDeptList
			}
		},
		created() {
			this.$store.commit('findByTypeCode')
			this.$store.commit('selectDeptList')
			this.fetchSwiperList(this.datesize)
		},
		onPullDownRefresh() {
			this.form.id = ""
			this.form.infoCode = ""
			this.datesize.pageSize = 10
			this.fetchSwiperList(this.datesize)
		},
		onReachBottom() {
			this.datesize.pageSize = this.datesize.pageSize + 5
			this.fetchSwiperList(this.datesize)
		},
		methods: {
			async fetchSwiperList(date) {
				await selectUserList(date).then(res => {
					res.data.rows.map(it => {
						it.ysZc = tranfrom(this.findByTypeCodeList,it.ysZc)
					})
					this.doctorList = res.data.rows
				})
			},
			input(res) {
				this.fetchSwiperList({
					"pageNum": 1,
					"pageSize": 9999,
					"params": {
						"userName": res,
						"deptId": "",
						"ysZc": ""
					}
				})
			},
			// 选择全部科室
			bindPickerChange(e) {
				this.form.id = this.deptLists[e.detail.value].id
				this.fetchSwiperList({
					"pageNum": 1,
					"pageSize": 9999,
					"params": {
						"userName": "",
						"deptId": this.form.id,
						"ysZc": ""
					}
				})
			},
			// 选择全部职称
			bindPickerChangeone(e) {
				this.form.infoCode = this.findByTypeCodeList[e.detail.value].infoCode
				this.fetchSwiperList({
					"pageNum": 1,
					"pageSize": 999,
					"params": {
						"userName": "",
						"deptId": "",
						"ysZc": this.form.infoCode
					}
				})
			},

		}
	}
</script>

<style lang="scss" scoped>
	.full {
		width: 750upx;
		margin: 0;
		padding: 0;
	}

	.sticky-box {
		/* #ifndef APP-PLUS-NVUE */
		// display: flex;
		position: -webkit-sticky;
		/* #endif */
		position: sticky;
		top: var(--window-top);
		z-index: 99;
		flex-direction: row;
		margin: 0px;
		// padding: 15px 0 15px 0;
		background-color: #F4F5F6;
		// border-bottom-style: solid;
		// border-bottom-color: #E2E2E2;
	}

	.unisearchbar {
		width: 100%;
	}

	.doctor {
		height: 100rpx;
		display: flex;
		justify-content: space-around;
		align-items: center;
		border-top: 1px solid #e1e1e1;
		border-bottom: 1px solid #e1e1e1;

		.doctor_l {
			width: 50%;
			height: 100rpx;
			line-height: 100rpx;
			text-align: center;
			border-right: 1px solid #e1e1e1;
		}

		.doctor_r {
			width: 50%;
			height: 100rpx;
			line-height: 100rpx;
			text-align: center;
		}
	}

	.textcenter {
		text-align: center;
		font-size: 18px;
	}
</style>