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>