uniapp 微信小程序搜索框滚动固定

1.需求首页搜索框列表滚动固定在顶部
2.方案
1.底部tabbar是自定义的高度184rpx
2.顶部navbar是自定义的高度写死 44px
3.在mounted生命函数使用uni.getSystemInfo获取状态栏的高度
4.搜索框使用position:sticky;粘连定位
5.使用动态style，top的高度就是获取的状态栏高度+44 px

<template><view class="content"><!-- 自定义navbar --><u-navbar back-text="首页"  :border-bottom="true" back-icon-size="40":back-text-style="{ fontWeight: 600 }" height="44"></u-navbar><view class="search-wapper" :style="{top: `${statusBarHeight + 44}px`}"><view class="search"><u-search placeholder="搜索站点或者设备编号" disabled bg-color="#FFFFFF" @click="getFocus" :show-action="false"></u-search><view class="classify" @click="setScreen"><u-icon name="list" size="40"></u-icon></view></view></view><view class="list"><view v-for="i in 10" class="item" :key="i"><view class="item-A"><view>城南信号塔站 | 中国电信荆州分公司</view><view @click="setScreen"><u-icon name="arrow-right" size="35"></u-icon></view></view><view class="item-B">系统输出电流：100.1 mA</view><view class="item-C"><view>铝空剩余容量：85.1%</view><view>运行·自动模式</view></view></view></view><screen :showModal="screenShow" @close="onclose"></screen><tabbar></tabbar></view>
</template><script>import tabbar from '../../component/tabbar.vue';import screen from '../../component/screen.vue'export default {components: {tabbar,screen,},data() {return {background: 'transparent',searchVal: '',screenShow: false,statusBarHeight :'',}},onPullDownRefresh() {console.log('下拉刷新')},onReachBottom() {console.log('触底了')},mounted() {uni.getSystemInfo({//获取系统信息success: res => {this.statusBarHeight = res.statusBarHeight//状态栏的高度console.log(this.statusBarHeight)},fail(err) {console.log(err);}})},methods: {/*点击搜索*/getFocus() {console.log('点击搜索框')uni.navigateTo({url: '/pages/search-history/index'})},/*点击筛选*/setScreen() {console.log('筛选')this.screenShow = true;},/*popup回调*/onclose(show) {this.screenShow = show}}}
</script><style lang="scss" scoped>.content {width: 100vw;background: #F8FAFF;box-sizing: border-box;padding: 0rpx 44rpx 184rpx 46rpx;//底部tabbar高度是184rpx}.content /deep/ .u-icon-wrap u-icon {display: none;}.content /deep/ .u-content {box-shadow: 0px 4px 16px 2px rgba(106, 106, 106, 0.2);}.search-wapper {height: 114rpx;box-sizing: border-box;display: flex;align-items: center;position: sticky;background-color: #F8FAFF;z-index: 100;}.search {width: 100%;position: relative;}.search /deep/ .u-icon-wrap u-icon {display: inline-block;}.classify {position: absolute;right: 20rpx;top: 50%;transform: translateY(-50%);z-index: 100;}.list {width: 100%;box-sizing: border-box;flex: 1;.item {width: 96%;height: 220rpx;background: #FFFFFF;box-shadow: 0rpx 4rpx 16rpx 2rpx rgba(106, 106, 106, 0.2);border-radius: 36rpx;margin: 10rpx auto 30rpx;padding: 30rpx;display: flex;flex-direction: column;justify-content: space-between;font-size: 28rpx;font-family: PingFangSC-Regular, PingFang SC;font-weight: 400;color: #000000;.item-A {display: flex;justify-content: space-between;align-items: center;}.item-B {}.item-C {display: flex;justify-content: space-between;align-items: center;>view {&:nth-child(2) {font-weight: 600;font-size: 24rpx;color: #21C0D5;font-size: 24rpx;}}}}}
</style>

uniapp 微信小程序搜索框滚动固定相关推荐

vue uniapp 微信小程序搜索下拉框模糊搜索
vue uniapp 微信小程序搜索下拉框模糊搜索话不多说直接贴代码 template <template><view class="index"> ...
html打开微信搜索页,微信小程序搜索框样式并实现跳转到搜索页面(小程序搜索功能)...
上效果图: 一:搜索框功能实现 1.在首页做一个搜索框的样式并实现跳转到搜索页面搜索 .search{ width: 80%; } .search_arr { border: 1px solid # ...
微信小程序搜索框回车搜索事件
这里写的是在微信小程序里的搜索框,按软键盘回车键触发搜索事件. 首先前台代码,这是整个搜索框代码 <view class="weui-search-bar"><v ...
微信小程序搜索框实现模糊查询
目录前言一.概述二.步骤三.效果展示总结前言主要实现功能,无美化,如需请自设一.概述开发工具:微信开发者工具通过对微信原生组件input绑定事件实现对已获取的列表元素模糊查询的操作 ...
微信小程序————搜索框获取本地缓存搜索记录
微信小程序获取本地缓存的搜索记录 html  //这里是搜索框 <view class="box_search">< ...
微信小程序搜索框自动补全功能
▶动态效果图◀ ▶效果涉及到的input属性◀ focus Boolean false 获取焦点 bindinput EventHandle ...
微信小程序搜索框加跳转
样式如下图一般情况下获得焦点时(出现可供搜索列表和取消键) 搜索关键字时(关键字在列表中) 搜索关键字时(关键字不在列表中) html <!-- 一般情况 ...
微信小程序--搜索框样式及form提交实现
搜索框样式及form提交实现第一种风格 .js bt_search(e){console.log('搜索',e)}, .wxml <form bindsubmit="bt_sear ...
微信小程序搜索框组件之SearchBar
index.wxml  <view class="wrapper"><slot></slot><vi ...

uniapp 微信小程序搜索框滚动固定

uniapp 微信小程序搜索框滚动固定相关推荐

最新文章

热门文章

uniapp 微信小程序 搜索框滚动固定

uniapp 微信小程序 搜索框滚动固定相关推荐

最新文章

热门文章

uniapp 微信小程序搜索框滚动固定

uniapp 微信小程序搜索框滚动固定相关推荐