邓洁:搜索框吸顶

This commit is contained in:
邓洁
2023-11-27 23:47:51 +08:00
parent 096440bbfc
commit 93d2bb04c7
9 changed files with 59 additions and 80 deletions

View File

@@ -5,7 +5,7 @@
<view class="bug-fix"></view>
<view class="search-box">
<view class="search-box-input">
<u-input v-model="keyword" placeholder="热门搜索" placeholder-style="color: #969696" prefixIcon="search"
<u-input v-model="keyword" placeholder="请输入标题进行搜索" placeholder-style="color: #969696" prefixIcon="search"
prefixIconStyle="font-size: 24px;color: #909399;" border="true" @change="getInput">
</u-input>
</view>
@@ -16,7 +16,7 @@
<DropDown @getQueryInfo="getShopList" ref="dropdown" @cancelPageNum="cancelPageNum"></DropDown>
</view>
</view>
<view class="marginLR10">
<ShowShopList :showStyle="2" :adlinkPath="adlinkPath" :listType="3" :shopInfoList="shopInfoList" />
</view>
@@ -64,7 +64,7 @@
},
onReachBottom() {
if (this.shopListLength !== 0) {
this.keyword=''
this.keyword = ''
this.pageNum++
this.getShopList()
console.log("触底加载");
@@ -76,16 +76,16 @@
this.getShopList()
},
methods: {
getInput(val){
console.log('搜索值',val);
if(this.pageNum!==1){
this.pageNum=1
getInput(val) {
console.log('搜索值', val);
if (this.pageNum !== 1) {
this.pageNum = 1
}
const q = this.$u.queryParams({
type: 3,
pageSize: this.pageSize,
pageNum: this.pageNum,
kw:val
kw: val
})
this.$api.getShopList(q).then(res => {
this.shopListLength = res.data.data.length

View File

@@ -5,7 +5,7 @@
<view class="bug-fix"></view>
<view class="search-box">
<view class="search-box-input">
<u-input v-model="keyword" placeholder="热门搜索" placeholder-style="color: #969696" prefixIcon="search"
<u-input v-model="keyword" placeholder="请输入标题进行搜索" placeholder-style="color: #969696" prefixIcon="search"
prefixIconStyle="font-size: 24px;color: #909399;" border="true" @change="getInput">
</u-input>
</view>
@@ -16,7 +16,7 @@
<DropDown @getQueryInfo="getShopList" ref="dropdown" @cancelPageNum="cancelPageNum"></DropDown>
</view>
</view>
<view class="marginLR10">
<ShowShopList :showStyle="2" :adlinkPath="adlinkPath" :listType="4" :shopInfoList="shopInfoList" />
</view>

View File

@@ -5,7 +5,7 @@
<view class="bug-fix"></view>
<view class="search-box">
<view class="search-box-input">
<u-input v-model="keyword" placeholder="热门搜索" placeholder-style="color: #969696" prefixIcon="search"
<u-input v-model="keyword" placeholder="请输入标题进行搜索" placeholder-style="color: #969696" prefixIcon="search"
prefixIconStyle="font-size: 24px;color: #909399;" border="true" @change="getInput">
</u-input>
</view>
@@ -16,7 +16,7 @@
<DropDown @getQueryInfo="getShopList" ref="dropdown" @cancelPageNum="cancelPageNum"></DropDown>
</view>
</view>
<view class="marginLR10">
<SearchShopList :showStyle="1" :searchInfoList="searchInfoList" />
</view>
@@ -62,7 +62,7 @@
},
onReachBottom() {
if (!this.refresh && this.searchListLength !== 0) {
this.keyword=''
this.keyword = ''
this.pageNum++
this.getShopList()
console.log("触底加载");
@@ -74,16 +74,16 @@
this.getShopList()
},
methods: {
getInput(val){
console.log('搜索值',val);
if(this.pageNum!==1){
this.pageNum=1
getInput(val) {
console.log('搜索值', val);
if (this.pageNum !== 1) {
this.pageNum = 1
}
const q = this.$u.queryParams({
type: 2,
pageSize: this.pageSize,
pageNum: this.pageNum,
kw:val
kw: val
})
this.$api.getShopList(q).then(res => {
this.searchListLength = res.data.data.length

View File

@@ -5,7 +5,7 @@
<view class="bug-fix"></view>
<view class="search-box">
<view class="search-box-input">
<u-input v-model="keyword" placeholder="请输入店铺名称进行搜索" placeholder-style="color: #969696" prefixIcon="search"
<u-input v-model="keyword" placeholder="请输入标题进行搜索" placeholder-style="color: #969696" prefixIcon="search"
prefixIconStyle="font-size: 24px;color: #909399;" border="true" @change="getInput">
</u-input>
</view>
@@ -16,7 +16,7 @@
<DropDown @getQueryInfo="getShopList" ref="dropdown" @cancelPageNum="cancelPageNum"></DropDown>
</view>
</view>
<view class="marginLR10">
<ShowShopList :showStyle="1" :shopInfoList="shopInfoList" />
</view>
@@ -63,7 +63,7 @@
},
onReachBottom() {
if (!this.refresh && this.shopListLength !== 0) {
this.keyword=''
this.keyword = ''
this.pageNum++
this.getShopList()
console.log("触底加载");

View File

@@ -9,7 +9,7 @@
</view>
</view>
</view>
<view class="content">
<ShowShopList v-if="listId == 0" :isEdit="true" :showStyle="1" :shopInfoList="searchInfoList" @delItem="handleDel"
@updateItem="handleUpdate1"></ShowShopList>

View File

@@ -1,18 +1,15 @@
<template>
<view class="root">
<InputAndSwiper @getQueryInfo="getInput" :bannerURL="swiperList" :refresh="isRefresh"></InputAndSwiper>
<view>
<view class="dropdown-bug">
</view>
<view class="marginLR10 sticky">
<view class="sticky">
<InputAndSwiper @getQueryInfo="getInput" :bannerURL="swiperList" :refresh="isRefresh"></InputAndSwiper>
<view class="marginLR10">
<DropDown @getQueryInfo="getShopList" ref="dropdown" @cancelPageNum="cancelPageNum"></DropDown>
</view>
<view class="marginLR10">
<SearchShopList :showStyle="1" :searchInfoList="searchInfoList" />
</view>
</view>
<view class="marginLR10">
<SearchShopList :showStyle="1" :searchInfoList="searchInfoList" />
</view>
<view v-if="showNull" class="showNull">
<text>没有符合条件的数据, 请下拉刷新重置数据~
</text>
@@ -143,7 +140,11 @@
}
</script>
<style>
page {
background-color: #f8f8f8;
}
</style>
<style lang="scss" scoped>
.showNull {
display: flex;
@@ -153,22 +154,10 @@
color: darkgray;
}
page {
background-color: $uni-bg-color-grey;
}
.root {
position: relative;
}
.dropdown-bug {
position: absolute;
background-color: $uni-bg-color-grey;
height: 120rpx;
width: 100%;
transform: translateY(-20rpx);
z-index: 2;
}
.marginLR10 {
margin: 0 10px;

View File

@@ -1,18 +1,14 @@
<template>
<view class="root">
<InputAndSwiper @getQueryInfo="getInput" :bannerURL="swiperList" :refresh="isRefresh">
</InputAndSwiper>
<view>
<view class="dropdown-bug">
</view>
<view class="marginLR10 sticky">
<view class="sticky">
<InputAndSwiper @getQueryInfo="getInput" :bannerURL="swiperList" :refresh="isRefresh">
</InputAndSwiper>
<view class="marginLR10 ">
<DropDown @getQueryInfo="getShopList" ref="dropdown" @cancelPageNum="cancelPageNum"></DropDown>
</view>
<view class="marginLR10">
<ShowShopList :showStyle="1" :shopInfoList="shopInfoList"></ShowShopList>
</view>
</view>
<view class="marginLR10">
<ShowShopList :showStyle="1" :shopInfoList="shopInfoList"></ShowShopList>
</view>
<view v-if="showNull" class="showNull">
<text>没有符合条件的数据, 请下拉刷新重置数据~
@@ -141,12 +137,12 @@
}
}
</script>
<style lang="scss" scoped>
<style>
page {
background-color: $uni-bg-color-grey;
background-color: #f8f8f8;
}
</style>
<style lang="scss" scoped>
.showNull {
display: flex;
align-items: center;
@@ -159,14 +155,6 @@
position: relative;
}
.dropdown-bug {
position: absolute;
background-color: $uni-bg-color-grey;
height: 120rpx;
width: 100%;
transform: translateY(-20rpx);
z-index: 2;
}
.marginLR10 {
margin: 0 10px;