uniapp+uView搜索列表变颜色

首先看一下页面效果：

<template>
<view class="page">
<b-nav-bar title="公司多维图" class="title">
<template slot="left">
<view @click="goBack" class="iconfont icon-zuofanhui nBack ml15"></view>
</template>
</b-nav-bar>
<view class="companyIpt">
<u-search placeholder="请输入上市公司代码或简称" :show-action="false" searchIconColor="#999999" searchIconSize="24"
shape="round" bgColor="#F1F2F4" maxlength="10" placeholderColor="#C0C0C0" v-model.trim="serchVal"
:clearabled="true" @change="searchCompany" ref="searchIpt"></u-search>
</view>
<view class="serchImg" v-if="showBottomImg"></view>
<view class="noDataBox" v-if="indexList.length == 0 && !showBottomImg">
<view class="noDataImg"></view>
<view class="noDataText">
暂无搜索记录~
</view>
</view>
<u-list @scrolltolower="scrolltolower" class="uList" v-if="indexList.length != 0 && !showBottomImg">
<u-list-item v-for="(item, index) in indexList" :key="index" class="uCellItem">
<u-cell v-html="item.cellText || `${item.title}（${item.code}）`" class="uCellStyle" @click="toCompanyPage(item, index)"></u-cell>
</u-list-item>
</u-list>
</view>
</template>

<script>
import { // 接口文件
queryCompanyList
} from "@/api/company.js"
export default {
data() {
return {
wh: 0, // 当前设备可用的高度
scrollTop: 0,
token: '',
account: '',
serchVal: '', // 搜索框值
indexList: [], // 列表数据
cellText: '', // 搜索高亮显示的数据
timer: null, // 定时器
showBottomImg: true
}
},
onLoad(e) {
if (e.token) {
this.token = e.token
sessionStorage.setItem('token', e.token)
}
},
methods: {
goBack() {
this.nativeBack()
},
nativeBack() {
uni.getSystemInfo({
success(res) {
if (res.platform == 'ios') { //iOS返回APP
window.webkit.messageHandlers.backUp.postMessage('123');
} else { //安卓返回APP
if (window.ytyJsApi) {
window.ytyJsApi.backUp()
} else {
uni.showToast({
title: 'window.ytyJsApi.backUp() is null',
icon: "none"
});
}
}
}
})
},

// 验证输入框不能输入表情符
validParams() {
let iconRule = /[\uD83C|\uD83D|\uD83E][\uDC00-\uDFFF][\u200D|\uFE0F]|[\uD83C|\uD83D|\uD83E][\uDC00-\uDFFF]|[0-9|*|#]\uFE0F\u20E3|[0-9|#]\u20E3|[\u203C-\u3299]\uFE0F\u200D|[\u203C-\u3299]\uFE0F|[\u2122-\u2B55]|\u303D|[\A9|\AE]\u3030|\uA9|\uAE|\u3030/ig
if (iconRule.test(this.serchVal) == true) {
uni.$u.toast('不能输入表情符')
return false
}
return true
},

// 搜索
searchCompany() {
if (this.timer) {
clearTimeout(this.timer);
}
if (this.serchVal.trim() != '' && this.validParams()) {
this.timer = setTimeout(() => {
let params = {
company: this.serchVal
}
let _this = this
queryCompanyList(params).then(res => {
if (res.code == 0) {
this.indexList = []
this.showBottomImg = false
// 遍历所有对话文本内容
for (let i = 0; i < res.data.length; i++) {
this.cellText = `${res.data[i].title}（${res.data[i].code}）`
let item = res.data || {}
// 当对话内容中有包含搜索框中的字符串时
if (this.cellText.indexOf(this.serchVal) > -1) {
this.cellText = this.cellText.replace(this.serchVal,
"<text style='color:#3849B4;'>" + this.serchVal + "</text>"
)
//替换所有搜索找到的关键字 更换颜色
// this.indexList = this.cellText
this.indexList.push({
cellText: this.cellText,
...item
})
}
}
} else {
uni.$u.toast(res.msg)
}
})
}, 500)
} else {
this.indexList = []
this.showBottomImg = true
}
},
// 查看公司详情页面跳转
toCompanyPage(item, index) {
let objValues = Object.values(item) // 获取对象值
objValues.forEach((res1, index1) => {
if (index1 == index) {
uni.navigateTo({
url: `/pages/look-company/companyDetail/companyDetail?title=${res1.title}&code=${res1.code}`
})
}
})
},
// 列表下滑
scrolltolower() {
this.loadmore()
},
// 列表加载更多
loadmore() {
for (let i = 0; i < 30; i++) {
this.indexList.push({
url: this.urls[uni.$u.random(0, this.urls.length - 1)]
})
}
}
},
}
</script>

<style lang="scss" scoped>
.page {
100%;
background: #ffffff;

.title {
font-size: 32rpx;
text-align: center;
border-bottom: 1px solid #DCDEE3;

.nBack {
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
}

.companyIpt {
690rpx;
height: 66rpx;
line-height: 66rpx;
margin: 20rpx auto 20rpx;
}

.uList {
690rpx;
margin: 0rpx auto;
color: #666666;
font-size: 28rpx;
font-family: PingFang SC;
font-weight: bold;
.uCellItem {
padding: 30rpx 24rpx;
border-bottom: 1px solid #DCDEE3;
}

.uCellStyle {
font-size: 28rpx;
font-family: PingFang SC;
font-weight: bold;
color: #666666;
}
}
.noDataBox {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
.noDataImg {
320rpx;
height: 268rpx;
background-image: url('./../../../static/images/noData.png');
background-size: 100% 100%;
}
.noDataText {
color: #666666;
font-size: 26rpx;
margin-top: 53rpx;
text-align: center;
}
}

.serchImg {
586rpx;
height: 482rpx;
background-image: url('../../../static/images/serch.png');
background-size: 100% 100%;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
}
}
/deep/ .u-image {
320rpx;
height: 268rpx;
}
/deep/ .u-search__content__input--placeholder {
font-size: 24rpx;
font-family: PingFang SC;
font-weight: 500;
}

/deep/ uni-view,
uni-scroll-view,
uni-swiper-item {
display: block;
}
</style>