话不多少,上代码。
<template>
<view class="container">
<!-- 搜索栏 -->
<view class="searchbar">
<view class="search-box">
<input class="search-input" placeholder="请输入要检索的关键字" :value="searchValue" @input="onKeyInput"
@confirm="search" :focus="focusState" />
<icon class="search-icon" v-if="showClearIcon" @click="claerIcon" type="clear" @tap="claerIcon"></icon>
</view>
</view>
<view class="searchresult">{
{searchValue}}</view>
<!-- 顶部选项卡 -->
<scroll-view id="tab" :scroll="false" :scroll-x="true" :show-scrollbar="false">
<view style="flex-direction: column;">
<view style="flex-direction: row;">
<view v-for="(item,index) in tabList" :key="item.id" class="tabName" :data-current="index"
@click="ontabtap" :class="tabIndex == index?'active_text':''">
<text class="tabName_text">{
{item.name}}</text>
</view>
</view>
</view>
</scroll-view>
<view class="scroll-view-indicator">
</view>
</view>
</template>
<script>
export default {
data() {
return {
searchValue: '',
focusState: true,
showClearIcon: false,
tabIndex: 0,
tabList: [{
id: "tab01",
name: '全部',
newsid: 0
}, {
id: "tab02",
name: '法律',
newsid: 23
}, {
id: "tab03",
name: '行政法规',
newsid: 223
}, {
id: "tab04",
name: '部门规章',
newsid: 221
}, {
id: "tab05",
name: '地方性法规',
newsid: 225
}, {
id: "tab06",
name: '地方政府规章',
newsid: 208
}, {
id: "tab07",
name: '其他',
newsid: 208
}],
}
},
onReady() {},
methods: {
//input组件绑定事件
search(res) {
// this.searchValue = "";
// this.showClearIcon = false;
// this.focusState = false;
// this.$nextTick(function() {
// this.focusState = true;
// })
uni.showToast({
title: this.searchValue,
icon: "none"
})
},
clear(res) {
this.focusState = false;
this.$nextTick(() => {
/*DOM更新后*/
this.focusState = true
})
},
onKeyInput: function(event) {
this.searchValue = event.detail.value;
if (event.detail.value.length > 0) {
this.showClearIcon = true;
} else {
this.showClearIcon = false;
}
},
claerIcon: function() {
this.searchValue = '';
this.showClearIcon = false;
this.focusState = false;
this.$nextTick(() => {
/*DOM更新后*/
this.focusState = true;
})
},
//顶部选项卡
ontabtap(e) {
console.log(e.target.dataset.current);
console.log(e.currentTarget.dataset.current);
let index = e.target.dataset.current || e.currentTarget.dataset.current;
this.switchTab(index);
},
switchTab(index) {
if (this.tabIndex == index) {
return
}
this.tabIndex = index;
}
}
}
</script>
<style>
.container {
display: flex;
flex-direction: column;
font-size: 40rpx;
}
.searchbar {
width: 100%;
position: fixed;
}
.search-box {
width: 100%;
height: 100rpx;
display: flex;
flex-direction: row;
background-color: #0075F3;
justify-content: space-between;
align-items: center;
padding: 20rpx 20rpx 20rpx 20rpx;
box-sizing: border-box;
}
.search-input {
height: 75rpx;
width: 100%;
border-radius: 10rpx;
line-height: 28px;
font-size: 35rpx;
padding-left: 10rpx;
flex: 1;
background-color: #FFFFFF;
}
.search-icon {
padding-left: 20rpx;
size: 60;
}
.searchresult {
margin-top: 100rpx;
}
#tab {
width: 100%;
display: flex;
/* overflow: hidden; */
white-space: nowrap;
font-size: 30rpx;
}
.tabName {
padding-left: 10rpx;
padding-right: 10rpx;
text-align: center;
/* width: 20%; */
display: inline-block;
height: 70rpx;
line-height: 60rpx;
white-space: nowrap;
}
.tabName_text {
display: inline-block;
width: 100%;
height: 100%;
}
.active_text {
background-color: #0075F3;
color: #FFFFFF;
transition-duration: 2s;
transition-property: left;
}
.scroll-view-indicator {
border-bottom: solid 1rpx #0075F3;
}
</style>
实现后的效果
威信搜索小程序:检索助手或者法务手册,查看实际运行效果。