搜索框轮播功能

搜索框轮播功能

效果

1. 不断轮播数据，直到用户点击搜索或完成输入
2. 用户搜索时若无输入数据，则以当前轮播数据作为输入值，若有输入数据，则以输入数据作为搜索值

思路

1. 文字轮播同样采用轮播图的形式（通过绝对定位浮现在输入框的位置，且输入框的层级要比轮播图高，否则会出现输入数据，输入框不显示）
2. 用一个变量保存轮播图当前数据，使用轮播图中@change函数，每次轮播的时候报存当前轮播数据，且注意变量初始值为轮播数据首位
3. 监听输入框的值，若有值，轮播图隐藏，
4. 搜索时判断当前输入框有无值，有值则以它为搜索条件，无值则以当前轮播值为搜索条件

代码实现

页面结构

			<!-- 输入框 ——start -->
			<view class="input">
				<!-- <view class="iconfont icon-sousuo1"></view> -->
				<input style="z-index: 1000;" confirm-type="search" maxlength="15" type="text"  auto-blur 
					@confirm="searchWare()" v-model="inputValue" :placeholder="inputPlaceholder" placeholder-style="padding-left: 20rpx;color: '#666666'" />
				<!-- 清空按钮  -start -->
				<view class="close" v-if="inputValue" @click="clearInput()">
					<view class="iconfont icon-guanbi"></view>
				</view>
					<!-- 清空按钮  -end -->
				<view class="iconfont icon-sousuo1" @click="searchWare()"></view>

				<!-- 提示词轮播  ——start-->
				<swiper class="place_swiper" autoplay interval=2000 circular vertical @change="placeChange" v-show="!focus"> 
					<swiper-item v-for="(item,index) in classifyList">
						<view class="">{{item.type}}</view>
					</swiper-item>
				</swiper>
				<!-- 提示词轮播 ——end -->
			</view>
				<!-- 输入框 ——end -->

逻辑

export default {
		data() {
			return {
				inputValue: '', //输入框的值
				focus: false, //是否聚焦
				currentSwip: '零食',  //轮播文字当前显示，默认值为轮播数据第一条
			}
		},
 		watch: {
			inputValue: {
				handler(newValue,oldValue) {
					console.log(newValue,'新的值');
					if(newValue) {
						this.inputPlaceholder = ''
						this.focus = true;
					} else {
						this.inputPlaceholder = ''
						this.focus = false;
					}
				}
			}
		},
		methods: {
		 			//搜索
			searchWare() {
				uni.showLoading({
					title: '加载中..',
					mask: true
				});
			
				//初始化数据
				this.currentPage = 1;
				this.list = [];
				
				if (this.inputValue) {
					
				} else {
					this.inputValue = this.currentSwip
					this.focus = true;
				}
				//接下来是调接口搜索了
			},
			
			//清空搜索
			clearInput() {
				this.inputValue = '';
				this.inputPlaceholder = '';
				this.focus = false
			},
			
			
			//轮播文字改变
			placeChange(event) {
				// console.log(event.detail);
				this.currentSwip = this.classifyList[event.detail.current].type
				// console.log('轮播图改变',this.currentSwip )
			},
		}
}